CSS盒子模型

盒子

• margin 外邊距
  橫向相加，縱向重疊
  父子盒子合併（用 overflow:hidden 解決）
• border 邊框

none /*無邊框*/
dotted /*點線框*/
dashed /*虛線框*/
solid /*實線框*/
double /*兩個邊界*/
groove /*定義3D溝槽邊界*/
ridge /*定義3D脊邊界*/
inset /*定義3D嵌入邊框*/
outset /*定義3D突出邊框*/

• padding 內邊框
• content 內容區
• width和height 設定的部分

參數個數：
1 上右下左
2 上下 左右
3 上 左右 下
4 上 右 下 左

overflow 內容超出範圍時

visible 可見
auto 自動顯示滾動條
scroll 總是顯示滾動條
hidden 隱藏

邊框效果

border-radius 圓角邊框
參數個數：
1 四角
2 左上&右下 左下&右上
3 左上 右上&左下 右下
4 左上 右上 右下 左下

box-shadow 陰影
水平偏移 垂直偏移 模糊距離 陰影尺寸 顏色 inset(內陰影)

outline 輪廓線 不佔用空間 在border外
寬度 樣式 顏色

盒子擺放模式

標準流模式

塊級盒子

div從上自下排列，寬度自動伸展佔據整個瀏覽器，自動換行

行級盒子

span從上自下排列，從左到右，空間是內容所佔據的空間，自動換行

非標準流模式

浮動與定位

浮動

使元素脫離常規文檔流而表現爲向右或向左浮動
float: /*right left none*/;

• 浮動盒子寬度不會自動伸展，寬度以內容爲準
• 標準流中其他盒子將視浮動盒子不存在而佔據浮動盒子的位置，但內容會受浮動盒子寬度的影響
• 可以設置clear屬性使標準流中其他盒子不受之前盒子的浮動影響
• 父級盒子中的所有盒子都採用浮動形式，若父級盒子未指定高度則父級盒子的高度爲0

在浮動元素後添加 clear: both; 元素清除浮動的影響

使用after僞類清除浮動

div:after{
  content:'';
  display:block;
  clear:both;
}

怪異盒子模型

box-sizing: /*
content-box 標準盒子模型(width=content)
border-box 怪異盒子模型(width=content+padding+border)
*/

定位

position: /*
static 默認
absolute 絕對定位
relative 相對定位
fixed 相對視圖定位
 */

/* 偏移方向: 偏移距離 */
top: 10px;
left: 10%;
right
bottom

/*Z軸高度 數值大的元素放在上層 默認0*/
z-index

相對定位

div{
  position: relative;
}

• 相對於原始位置移動位置
• 依然佔據原來的空間

絕對定位

div{
  position: absolute;
}

• 相對最近的已定位祖先元素，若沒有則爲body
• 不再佔據原本空間

用絕對定位和負邊距實現完全居中

無需考慮父容器大小

<style media="screen">
  #d1{
    width: 250px;
    height: 250px;
    background-color: red;
    position: relative;
  }
  #d2{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px;
    background-color: yellow;
  }
</style>
<div id="d1">
  <divid="d2"></div>
</div>

固定定位

div{
  position: fixed;
  right: 10px;
  bottom: 10px;
}

• 相對窗口原點偏移定位
• 不佔據空間
• 不隨滾動條滾動改變位置