前言

上篇文章主要介紹了CSS樣式更改篇中的列表、表格和輪廓，這篇文章主要介紹CSS樣式更改中框模型、定位、浮動、溢位基礎知識。

1.框模型Border Model

從上圖可以得知，如果把一個網頁比作一個方框，那麼border  padding  margin 所扮演的角色。

通過通用選擇器，可以設定所有的元素的border  padding  margin  初始值為0：

*{
margin:0;
padding:0;
border:0
}
所有的邊距都可以用em  px 百分比來設定
它們都有四個值，你可以單個設定，也可以一起設定，順序為top-right-bottom-left

2.定位Position

1).相對定位relative

相對於其正常位置進行定位

div{
  position:relative
}

2).絕對定位absolute

相對於 static 定位以外的第一個父元素進行定位

div{
  position:absolute
}

3).靜態定位static

沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）

div{
  position:static
}

4).固定定位fixed

相對於瀏覽器視窗進行定位

div{
  position:fixed
}

3.浮動Float

元素內的內容向某個方向移動

div{
   float:left
}
left  左浮動
right 右浮動
none  不浮動

4.溢位Overflow

元素內容超過了框架的大小

div{
  overflow:scroll
}
visible 內容不會被修剪，會呈現在元素框之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容

參考文件：W3C官方文件（CSS篇）

總結

這篇文章主要介紹了CSS樣式更改篇中的框模型、定位、浮動、溢位基礎知識，希望讓大家對CSS樣式更改有個簡單的認識和了解。 想要學習更多，請前往Python爬蟲與資料探勘專用網站：http://pdcfighting.com/