20181127 Css中的盒子模型

前言

盒子模型，英文即box model。無論是div、span、還是a都是盒子。

但是，、表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。

乙個盒子中主要的屬性就5個：width、height、padding、border、margin。如下：

width和height：內容的寬度、高度（不是盒子的寬度、高度）。

padding：內邊距。

border：邊框。

margin：外邊距

敲黑板

在 css 盒子模型 (box model) 規定了元素處理元素的幾種方式： 內容、內邊距、邊框、外邊距。

在 css的標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。ie盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度。

如果想保持乙個盒子的真實占有寬度不變，那麼加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災難性的，這會把別的盒子擠下去。

認識padding

padding就是內邊距。padding的區域有背景顏色。padding是4個方向的，所以我們能夠分別描述4個方向的padding。方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。

小屬性的寫法：

padding-top: 30px;

padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

padding:30px 20px 40px 100px

padding: 30px 40px;

要懂得，用小屬性層疊大屬性。比如

padding: 20px;

padding-left: 30px;

div

div

20181127 Css中的清除浮動

一 浮動產生原因 般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了。簡單...

CSS中盒子的浮動定位

1.盒子的浮動 在標準流中,乙個塊級元素在水平方向會自動伸展，知道包含它的元素的邊接 而在豎直方向與相鄰元素依次排列，不能併排。css中float屬性，預設為none。將float屬性的值設定為left或right，元素就會向其父元素的左側或右側靠緊。同時預設情況下，盒子的寬度不再伸展，而是根據盒子...

css中的盒子模型

盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...