- 各モジュールの命名規則
CSSボックスモデルは説明する
と一般的に使用される複数列のレイアウト
あなたが行方不明見つける助けに104のCSSのインタビューの質問を
集め104のCSSの面接の質問の価値は
、あなたのCSS開発の効率向上のために55個の不可欠な断片を
、HTML / CSSのシンプルなフォルムの例
フロントエンド必見の8見るためのHTML + CSSのヒント
1.ロゴ書き込み仕様
HTMLコード
h1はhnタグの中で最も重要なタグです。通常、Webページには1つしか含めることができないため、h1タグにロゴを配置すると、クローラーはロゴ情報を簡単にキャプチャできます。
<div class="logo">
<h1>
<a href="#">
<span>标题</span>
</a>
</h1>
</div>
CSSコード
.logo a {
width: 154px;
height: 30px;
display: block;/*因为a元素是行元素，设置宽高没有用，所以要设置成块元素*/
background: coral no-repeat;/*no-repeat的意思是背景图像将仅显示一次。 */
}
.logo a span {
display: none;/*令文字消失*/
}
Two.navナビゲーションバーの書き込み仕様
HTMLコード
<u class="nav">
<li class="list-item">
<a href="">内容1</a>
</li>
<li class="list-item">
<a href="">内容2</a>
</li>
<li class="list-item">
<a href="">内容3</a>
</li>
</u>
CSSコード
* {
margin: 0;
padding: 0;
color: #424242;/*令所有的字体都是标准的黑色*/
font-family: Arial;/*令所有的字体都是标准字体*/
}
.nav {
list-style: none;/*去除li左边小点点的样式*/
}
.nav::after {
content: "";
clear: both;
display: block;
}/*清除浮动效果*/
.nav .list-item {
float: left;
margin: 0 10px;
height: 30px;
border: 1px solid chartreuse;
line-height: 30px;
}
.nav .list-item a {
text-decoration: none;/*去除a元素的下划线*/
font-weight: bold;/*字体加粗*/
height: 30px;/*令a元素占满整个li*/
display: inline-block;/*因为a元素是行元素，所以height不能生效，所以要变成块元素*/
padding: 0 5px;/*给a元素与块元素两边增加距离*/
border-radius: 15px;/*可以给a元素增加圆角效果*/
}/*令鼠标移动到a标签都的效果*/
.nav .list-item a:hover {
background-color: #f40;
color: #fff;
}
効果は以下の通りです
3.テキストオーバーフロー処理、背景画像処理
- テキストオーバーフロー処理（基本的に開発プロセスでは多くの単一行テキストが使用されます）
ブロック要素に幅と高さを設定すると、内部のコンテンツがいっぱいになるとオーバーフローします
htmlコード
<p>溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</p>
cssコード
p {
width: 300px;
height: 20px;
line-height: 20px;
border: 1px solid black;
}
オーバーフローした場合、オーバーフローコンテナに3行のコード（致命的に記述された）を追加します
p {
width: 300px;
height: 20px;
line-height: 20px;
border: 1px solid black;
/*后面这三行代码是写死的，处理文字溢出的效果*/
white-space: nowrap;/*让文本失去换行功能*/
overflow: hidden;/*溢出部分不能展示*/
text-overflow: ellipsis;/*溢出部分用点点点展示*/
}
- 背景画像処理
ボックスに背景画像
を
設定するためのメインコードの紹介背景画像のサイズを設定します。画像が大きすぎる場合は図1の効果が表示され、画像が適切な場合は図2の効果が表示されます。 、画像が小さすぎる場合、図3の効果が表示されます
background-size: 100px 100px;/* 设置背景图片的大小 */
画像を繰り返すかどうかを設定します。繰り返すと図3の効果が現れ、繰り返しないが中央に配置されていない場合は図4の効果が現れます。
background-repeat: no-repeat;/*不重复出现，一张图片就一张图片*/
この要素で背景画像の位置を設定します。次の値はピクセル単位でも使用できます。
background-position: center center;/*设置背景图片在本元素中的定位，后面的值也可以用像素*/
4つの効果を設定できます
div {
width: 200px;
height: 200px;
border: 1px solid red;
background-image: url(fy.jpg);/*url是背景图片的地址*/
float: left;
}
.b {
/*第二张图*/
background-size: 200px 200px;/* 设置背景图片的大小 */
}
.c {
/*第三张图*/
background-size: 100px 100px;
}
.d {
/*第四张图*/
background-size: 100px 100px;/* 设置背景图片的大小 */
background-repeat: no-repeat;/*不重复出现，一张图片就一张图片*/
background-position: center center;/*设置背景图片在本元素中的定位，后面的值也可以用像素*/
}
4.CSS開発のマイナーな問題
- 3つのプロパティは、開発プロセスでプロパティを表示します：inline、inline-block、
inline-blockおよびinlineを呼び出したブロック-> Text-earth要素
インラインテキスト属性を持つすべての要素は
、テキストのクラス機能であるため、どの機能が
そのような機能を実行しますか文字列を記述しますスペースで区切られたテキストのこのスペースはテキスト区切り文字を表すため、テキストの中央に小さなスペースがあり、これらの多くのスペースは適切ではありません。
テキスト要素もこの機能に準拠しています。たとえば、スパン要素とimgにもこの効果があります。imgはインラインブロック要素であるため、imgにもこの効果があるのはなぜですか
。この問題を解決する方法：スペースを直接キャリッジリターンを削除するだけで真ん中（テキストセパレーター）
<div>
第一串元素 第一串元素 第一串元素
</div>
<div>
<span>第二串元素</span>
<span>第二串元素</span>
</div>
<div>
<span>第三串元素</span><span>第三串元素</span>
</div>
line要素の幅と高さを設定しても効果はありません。line要素に次の2つの属性を設定
する理由は何ですか？これら2つの属性のいずれかが設定されている限り、要素は表示に変換されます：inline-block ;だから使い切ることができます
float: left/right;
position: absolute;
- テキスト要素の特徴
配置、テキスト行では、imgもテキスト要素であるため、テキストコンテンツは下揃えになり、画像とテキストも下揃えになります。
スパン要素が幅に設定されている場合、高さ、ボックスに従います。下部を揃えます。
スパン要素に幅と高さを設定すると、ボックス内のコンテンツの下部に揃えられます。
また、vertical-align：pixel value;を使用して、要素の行の配置を調整することもできます。
- パディング
とマージンをリセットしない場合の結果Web自体の多くの要素にはパディングとマージンが付属しているため、最初に、
次のようにパディングとマージンのコードをリセットする必要があります。
*{
padding:0px;
margin:0px;
}
そうしないと、レイアウト中に次の状況が発生します
。ul自体のパディングとマージンがulをボックスから分離しているためです。
- 垂直テキストレイアウトを実現
//css
div {
writing-mode: vertical-rl;
}
//html
<div class="a">
你好啊
</div>
- テキストの配置を実現する
div {
background: #999999;
width: 140px;
height: 50px;
text-align-last: justify; //实现文字对齐
padding: 0 14px;
line-height: 50px; //高度居中
}
<div class="a">
你好啊
</div>
- イベントトリガー
を無効にし、デフォルトイベント、バブリングイベント、マウスイベント、キーボードイベントなどを無効にします。
.disabled-trigger{
pointer-events: none;
}
純粋なCSSで三角形を実現する
width: 0px;
height: 0px;
border-bottom: 20px solid #000;
border-left: 20px solid transparent;
/* transparent是透明色 */
border-right: 20px solid transparent;
効果
画像ギャップの問題
2枚の写真を合わせると真ん中に隙間ができます
- 最初の処理方法（キャリッジリターン）
- 2番目のタイプ（画像にフロートを追加）
- 3番目のタイプ（画像にdisplay：blockを追加）
小さなタイトルアイコンを追加
アイコンファイルのサフィックスはicoであり、
画像ファイルはプロジェクトのルートディレクトリに配置する必要があります
调用图标
<link rel="icon" href="favicon.ico">
カスタムの小さなアイコン
iconfont公式ウェブサイト
最初にjsファイルで紹介します（参照されるコードはcssファイルに配置されます）
ダウンロードされたコードはフォントファイルに配置され、次にフォントファイルから参照されます
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
ボックスモデル（ボックスの幅と高さの計算を解決し、パディングまたは境界線で拡大します）
ボックスモデル
1.標準ボックスモデル
全幅=境界線（左と右）+幅+パディング（左と右）
全高=境界線（左と右）+高さ+パディング（左と右）
2。IEボックスモデル（奇妙なボックスモデル）
全幅=幅;
全高=高さ;
box-sizing:border-box;/* 变成IE盒模型*/