一、盒模型
1.1 盒子的區域
乙個盒子的主要屬性5個：width、height、padding、border、margin
padding：內邊距
border：邊框
margin：外邊框
1.2 認識width、height
乙個盒子的真實占有的寬度：左border+左padding+width+右padding+右border
乙個盒子的真實占有的高度：上border+上padding+height+下padding+下border
如果想保持乙個盒子的真實占有寬度不變：那麼加width要減padding，加padding要減width
高度同理。
6.3 padding
padding 就是內邊距。padding的區域有背景顏色，background-color填充的是border以內的所有區域
padding是四個方：兩種描述padding的方法。
1）小屬性：
padding-top：30px;
padding-right：20px；
padding-bottom：40px;
padding-left:100px;
2)綜合屬性：
padding：30px 20px 40px 100px;
上 右 下 左
要懂得小屬性層疊大屬性：
padding：20px;
padding-left:30px;
很多元素都帶有預設的padding，比如ul，所以在做**的時候便於控制，需要清除預設的padding，*效率不高，採用並集選擇器羅列所有的標籤清除padding（專業的樣式表）
1.4border
就是邊框。有三要素：粗細，線型，顏色
顏色預設黑色，其他兩個如果不寫，就顯示不出邊框。
border：1px dashed red;
dashed:虛線 solid：實線 dotted:圓點
border 屬性可以被拆分為兩種方式：
1）三要素拆分：
border-width、border-style、border-color
border-width：1px;
border-style:solid;
border-color:red;
等價於：border：1px solid red;
2）方向拆分：
border-top、border-right、border-bottom
二、標準文件流
標準文件流的微觀現象：
1）空白摺疊現象
2）高矮不齊，底邊對齊
3）自動換行
2.1塊級元素和行內元素
標籤分兩種等級：
1）塊級元素
霸佔一行，不與其他任何元素並列
能接受寬高
如果不設定寬度，寬度將預設為父親的100%
2) 行內元素
與其他行內元素併排
不能設定寬高，預設就是文字的寬高
1、html將標籤分為容器級和文本級：
容器級：div h dt dd li 等
文本級：p span b a em u i 等
2、css將標籤分為塊級元素和行內元素：
塊級元素：div h dt dd li p等
行內元素：a span em b u i 等
注意：不要將兩者混淆！
2.2塊級元素和行內元素的相互轉換
divspan脫離標準流：css中的三種手段
1）浮動
2）絕對定位
3）固定定位
三、浮動
浮動是css裡面布局最多的屬性
3.1 浮動的元素脫標
乙個span標籤不需要轉變成塊級元素就能設定寬高。一旦乙個元素浮動了，就能併排了，並且能設定寬高，不論原來是什麼。
span
文字這個div浮動了，並且沒有設定寬度，那麼將自動縮緊為內容的寬度。
CSS盒模型 定位流 浮動流
一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS盒模型與浮動
box sizing屬性用於改變元素width和height值的具體意義 段落p 標題h1或div等元素是塊級元素，它們生成塊級框，各個框體是縱向堆疊的 即 換行 任何元素可以由display block宣告為塊級元素。注 通過css的display屬性，是可以改變html文件中元素預設的布局方式的...