CSS入門常見的問題

寫在前面：本文簡單介紹一下css的三大特性：層疊性、繼承性、優先權。以及margin,padding,浮動，定位幾個知識點。限於水平，不深入探討，僅作為學習總結。

 1，三特性

1）層疊性：同標籤同權重下，樣式衝突，後面的樣式會覆蓋前面的。

2）繼承性： 為父元素設定樣式的時候，子元素在預設沒有樣式的情況下會受父元素的樣式影響。注意寬高不能繼承。

 

可繼承的屬性：
  ◇文字顏色可以被繼承 color
  ◇文字相關的屬性都可以繼承
  ◆ 特殊情況：

a

標籤預設不會受父級元素的顏色影響

常見的在製作nav 中給li 設定顏色a標籤不起作用，原因是受到瀏覽器預設的樣式影響 color: -webkit-link

。 h1-h6 預設單位是em 具體大小要乘積運算 3）優先：

標籤選擇器類選擇器

選擇器 行內樣式 行內樣式 2，Margin 的特徵：

1）垂直外邊距合併（取大的）

2）垂直外邊距塌陷？

解決方法： 為父元素設定邊框。

 給父元素設定 overflow:hidden（觸發bfc） 

3,Padding值特殊性

在區塊級元素中，如果預設子元素沒有設定寬度，為目前子元素設定padding值，不會影響目前子盒子的寬度。 （「繼承」的盒子padding值不會影響）

4,浮動

為什麼要用浮動？

開始是作為 圖片文字環繞效果設計現在多用在佈局和導航 製作

什麼時候清理浮動？

1，父容器沒有設定高度

2，父容器所有子元素都設定浮動

如何清理浮動？ （這裡介紹常見的4種）
1，clear：both;
2,給父元素設定overflow：hidden;(父元素沒有定位)

3，使用偽元素 

.clearfix 
:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

4,display: table;

 

.clearfix:before,
.clearfix:after{
clear: both;
display: table;
/*表格模式*/
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

　　

定位：

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">c9ccee2e6ea535a969eb3f532ad9fe89
</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">    531ac245ce3e4fe3d50054a55f265927</span>