Webフロントエンドスキル概要（個人の実務経験）

1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくしたかったので、padding-top: 23% を使用しました。しかし、23% を計算するときに問題がありました。調べてみると、padding-top のパーセンテージは親要素の高さではなく幅に基づいて計算されていることがわかりました。おかしいと思いませんか?それを説明できる専門家は誰ですか?
2. レイヤーをフロートさせてからマージンを追加すると、IE6 では二重マージンが表示されます。 ----------解決策は display:inline; です (わかっていますが、いつも忘れてしまいます)。
3. 左は固定幅、右は適応幅＋左右は固定幅、中央は適応幅という枠組みを必ず使う。よく使われる。

デモ1（左側固定、右側適応型）:

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<title>2 列レイアウト、左側は固定幅、右側は適応幅</title>
<スタイル>
html,body{ 高さ:100%; 余白:0px; パディング:0px; }
#ヘッダー { 幅:100%; 高さ:20px; 背景:#CCC; }
#フッター { 幅:100%; 高さ:20px; 背景:#CCC; }
#main { パディング左: 200px; }
#left { 幅:200px; 高さ:200px; 位置:絶対; 左:0; 背景:#FF0;}
#middle { 幅:100%; 高さ:200px; 背景:#F00; }
</スタイル>
</head>
<本文>
<div id="header">ヘッダー</div>
<div id="メイン">
<div id="left">左</div>
<div id="middle">中央</div>
</div>
<div id="footer">フッター</div>
</本文>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

デモ2 (左と右は固定、中央は適応型):

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<title>2 列レイアウト、左側は固定幅、右側は適応幅</title>
<スタイル>
html,body{ 高さ:100%; 余白:0px; パディング:0px; }
#ヘッダー { 幅:100%; 高さ:20px; 背景:#CCC; }
#フッター { 幅:100%; 高さ:20px; 背景:#CCC; }
#main { パディング左: 200px; パディング右: 200px;}
#left { 幅:200px; 高さ:200px; 位置:絶対; 左:0; 背景:#FF0;}
#right { 幅:200px; 高さ:200px; 位置:絶対; 右:0; 背景:#FF0; フロート:左;}
#middle { 幅:100%; 高さ:200px; 背景:#F00; フロート:左;}
</スタイル>
</head>
<本文>
<div id="header">ヘッダー</div>
<div id="メイン">
<div id="left">左</div>
<div id="middle">中央</div>
<div id="right">右</div>
</div>
<div id="footer">フッター</div>
</本文>
<html></span><span style="font-family:'マイクロソフトヤヘイ'">
</span></span>

4. IE6 で画像を挿入する場合、img タグを使用すると、img の下に数ピクセルの空白スペースができてしまい、デザイン案と異なる作品になってしまいます (上司に気づかれ、叱られることになります)。解決策としては、img をブロックレベル要素 (display:block) に変更します。
5. ブロック内のテキストを垂直にする方法は次のとおりです: 1).vertical-align:middle.2).line-height:***; -------------一般的に、2 番目の方法の方が 1 番目の方法よりも優れていますが、その理由はわかりません。
6. a タグの lvha はあまり一般的には使用されませんが、必ず使用されます: a:link{} a:visited{};a:hover{}a:active{}
7. 改行なしでテキストを切り捨てることは非常に一般的であるようです (最近では毎日使用されています)。white-space:nowrap;overflow:hidden;text-overflow:ellipsis; (line break: word-wrap:break-word;)
8. 浮動小数点をクリアする方法はたくさんあります。最近よく使われる主な方法は、1) clear: both、2) overflow: hidden、3) です。私の講師のお気に入りは、#a: after{display: block; clear: both; visibility: hidden; height: 0; content'.';} です。
9. IE でマウスジェスチャが消えることがあります。この状況は過去 2 日間で数回発生しました。 ---------------- 解決策は corsor:pointer; です (hand は使用できないことに注意してください。インストラクターが特に注意しました)
10. 高さが 2 ピクセルだけのコンテナーを定義すると、IE6 でバグが発生します。解決策としては、さまざまな属性、特に font-size:0;height:0;line-height:0; をクリアします。
11. max-width は IE6 では機能しません --- 解決策は _width: *; です (先週この問題に遭遇しました)
12.!important ルール - これまでこの属性を使用したことはありませんでしたが、一昨日、上司が私のコードを見て、ページがレスポンシブである場合、後続の幅によって元の width:100%; が上書きされるため、width:100%!important; を追加する必要があることを思い出しました。
13. フロートのクリアは非常に重要です。たとえば、コンテナが高さに適応できない場合は、フロートを使用する必要があります。！！
14. テキストをクリックすると、csdn のこの機能のように、ラジオボタンまたはチェックボックスもクリックされます。方法は、ラジオボタンをラベルで囲むか、ラベルを「id」に使用します。
15.display:none--------消えてスペースを占有しません。 visibility:hidden;--------------消えた後の位置を占めます。

<<: Vue開発の一般的な手法の詳細な説明

>>: CSS で TikTok テキスト揺れエフェクトを実装する例