CSS の使用を開始する際のよくある質問

以前書いた記事: この記事では、CSS の 3 つの主要な特徴 (カスケード、継承、優先度) を簡単に紹介します。マージン、パディング、フローティング、およびいくつかのナレッジ ポイントの配置だけでなく。レベルに限定されており、詳細については説明しません。学習の概要としてのみ使用されます。

1. 3つの特徴

1) カスケード: スタイルが同じラベルおよび同じウェイトと競合する場合、後のスタイルが前のスタイルを上書きします。

2) 継承: 親要素のスタイルを設定するとき、デフォルトでスタイルがない場合、子要素は親要素のスタイルの影響を受けます。幅と高さは継承できないことに注意してください。

継承可能な属性:
◇文字の色を継承可能 color
◇文字関連の属性を継承可能
◆Line-height(line-height)を継承可能
◆text-align

特別な状況:

a デフォルトでは、タグは親要素の色の影響を受けません

ブラウザのデフォルトスタイルcolor:-webkit-linkの影響を受けるため、ナビゲーションを作成するときにliのcolorタグを設定することが機能しないことがよくあります。

h1-h6 デフォルトの単位は em です。特定のサイズには プロダクト操作

が必要です。

3) 優先順位:

タグセレクター<クラスセレクターセレクター<インラインスタイル

2、マージン機能:

1) 垂直マージンを結合します (大きい方を選択します)

2)

縦マージン崩壊？ 解決策:

親要素に境界線を設定します。

親要素(トリガーbfc)にoverflow:hiddenを設定します

3、パディング値の特殊性

ブロックレベル要素では、デフォルトのサブ要素に幅が設定されていない場合、現在のサブ要素のパディング値を設定しても、現在のサブボックスの幅には影響しません。 (「継承された」ボックスのパディング値は影響を受けません)

4、フローティング

なぜフロートを使用するのですか?

画像テキストのラッピング効果のデザインとして始まり、現在は主にレイアウトとナビゲーションの制作に使用されています

フロートを掃除するのはいつですか?

1. 親コンテナには高さが設定されていません

2. 親コンテナのすべての子要素は float に設定されています

フロートを掃除するにはどうすればよいですか？ (一般的なのは次の 4 つです)

1. clear: 両方;

2. set overflow: hidden; (親要素は配置されません)
3. 疑似要素を使用します

リーリー

4,表示: テーブル;

リーリー

　　

定位：

1，静态（static）标准流下的显示方式，可转换成其他定位方式
2，绝对 （absolute） ：
1）标准流下的盒子，设置绝对定位以body 为参照
2）除了父盒子设置static ，其他定位方式，子盒子以父盒子为参照
3）绝对定位的元素脱标
4）实现模式转换的效果
使用场景：1，盒子压盒子 2，绝对定位可以使用margin padding
3，相对（relative）：相对自己作为参照，不会脱标
使用子绝父相
4，固定（fixed）：
1）以body标签可视区域作为参照
2）脱标
3）实现模式转换的效果
层级：
1）定位的元素有层级关系
2）只有给定位的元素才能设z-index
特点：
1）元素设置定位后有个默认的z-index ：auto（除去static）
2）z-index 值相同 元素后来居上
3）z-index 值越大 当前的元素层级越高
4）父元素的z-index值越大 当前的元素层级越高简单

  绝对定位如何居中？

◆通过设置left:50% ;         父元素宽度的一半
◆设置margin-left:     -元素自己宽度一半；

 

 

双飞翼布局

目的：加载文档时先加载中间区域，再加载左右两边

特点：两侧固定，中间自适应

 

	<div class="container">
		<div class="columns mainbox">
			<div class="inner">
				我看见个会计课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个会计课件发卡
				机看见看见我看见个会计 课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个
				会计课件发卡机看见看见我看见个会计课件发卡机看见看见
			</div>

		</div>
		<div class="columns leftbox"></div>
		<div class="columns rightbox"></div>
	</div>

　　

<span style="color: #008080"> 1</span> <span style="color: #800000"><style>
</span><span style="color: #008080"> 2</span> <span style="color: #800000">        body </span>{
<span style="color: #008080"> 3</span> <span style="color: #ff0000">            min-width</span>:<span style="color: #0000ff"> 1000px</span>;
<span style="color: #008080"> 4</span>         }
<span style="color: #008080"> 5</span>         
<span style="color: #008080"> 6</span> <span style="color: #800000">        .columns </span>{
<span style="color: #008080"> 7</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080"> 8</span> <span style="color: #ff0000">            float</span>:<span style="color: #0000ff"> left</span>;
<span style="color: #008080"> 9</span>         }
<span style="color: #008080">10</span>         
<span style="color: #008080">11</span> <span style="color: #800000">        .container </span>{
<span style="color: #008080">12</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">            border</span>:<span style="color: #0000ff"> 1px solid red</span>;
<span style="color: #008080">14</span>         }
<span style="color: #008080">15</span>         
<span style="color: #008080">16</span> <span style="color: #800000">        .mainbox </span>{
<span style="color: #008080">17</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 100%</span>;
<span style="color: #008080">18</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> yellow</span>;
<span style="color: #008080">19</span>         }
<span style="color: #008080">20</span>         
<span style="color: #008080">21</span> <span style="color: #800000">        .inner </span>{
<span style="color: #008080">22</span> <span style="color: #ff0000">            margin</span>:<span style="color: #0000ff"> 0 300px 0 250px</span>;
<span style="color: #008080">23</span> <span style="color: #ff0000">            word-break</span>:<span style="color: #0000ff"> break-all</span>;
<span style="color: #008080">24</span>         }
<span style="color: #008080">25</span>         
<span style="color: #008080">26</span> <span style="color: #800000">        .leftbox </span>{
<span style="color: #008080">27</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">28</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> red</span>;
<span style="color: #008080">29</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -100%</span>;
<span style="color: #008080">30</span>         }
<span style="color: #008080">31</span>         
<span style="color: #008080">32</span> <span style="color: #800000">        .rightbox </span>{
<span style="color: #008080">33</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 300px</span>;
<span style="color: #008080">34</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> blue</span>;
<span style="color: #008080">35</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -300px</span>;
<span style="color: #008080">36</span>         }
<span style="color: #008080">37</span> <span style="color: #800000">    </style></span>