CSS入門常見問題

標籤：lin   box   border   製作   圖片   簡單   衝突   css   htm   

 1，三特性

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

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

 

可繼承的屬性：
  ◇文字顏色可以被繼承  color
  ◇與文字相關的屬性都可以被繼承
  ◆行高（line-height） 可以被繼承
  ◆text-align

特殊情況：

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

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

h1-h6 預設單位是em 具體大小要乘積運算

3）優先順序：

標籤選取器<類別選取器 <ID選取器 < 行內樣式 <! Important

2，Margin 的特點：

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

2）垂直外邊距塌陷？

解決方案：

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

3,Padding值特殊性

在區塊層級元素中，如果預設子項目沒有設定寬度，給當前子項目設定padding值，不會影響當前子盒子的寬度。（“繼承”的盒子padding值不會影響）

4,浮動

為什麼用浮動？

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

什麼時候清理浮動？
1，父容器沒有設定高度
2，父容器所有子項目都設定浮動

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

123456789101112

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

4,display: table;

 

12345678910

.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:     -元素自己寬度一半；

 

 

雙飛翼布局

目的：載入文檔時先載入中間地區，再載入左右兩邊

特點：兩側固定，中間自適應

 

123456789101112

<div class="container">    <div class="columns mainbox">        <div class="inner">            我看見個會計課件發卡機看見看見我看見個會計課件發卡機看見看見我看見個會計課件發卡            機看見看見我看見個會計 課件發卡機看見看見我看見個會計課件發卡機看見看見我看見個            會計課件發卡機看見看見我看見個會計課件發卡機看見看見        </div>     </div>    <div class="columns leftbox"></div>    <div class="columns rightbox"></div></div>

 

　　

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

  本文轉自：http://www.cnblogs.com/yiyefusheng/archive/2016/11/28/6104359.html

CSS入門常見問題