盒模型
一、盒子中的區域
乙個盒子中主要的屬性就5個：width、height、padding、border、margin。
width是「寬度」的意思，css中width指的是內容的寬度，而不是盒子的寬度。
height是「高度」的意思，css中height指的是內容的高度，而不是盒子的高度
padding是「內邊距」的意思
border是「邊框」
margin是「外邊距」
二、認識padding
背景色會填充到padding中去，padding區域有背景顏色，background-color將填充所有boder以內的區域。
padding有兩種寫法，一種小屬性寫法，另一種是綜合性寫法，綜合寫法時要用空格隔開。順序是上右下左
在寫padding時，要用小屬性層疊大屬性
例如：padding: 20px;
padding-left: 30px;
三、border
border就是邊框。邊框有三要素：粗細、線型、顏色。
顏色如果不寫，預設是黑色。粗細和線型不寫顯示不出來邊框。（顏色、線型缺一不可）
border屬性能夠被拆開，有兩大拆開方式：
1）按3要素拆開
border-width:10px; → 邊框寬度
border-style:solid; → 線型
border-color:red; → 顏色。
等價於：border:10px solid red;
2）按方向拆：
按方向：border-top、border-right、border-bottom、border-left
按方向還能再拆一層，就是把每個方向的按每個要素拆開。如：
border-top-width:10px;
標準文件流
1）空白折行摺疊現象
當後面的空間不足以放下本身空間時，會自動換行
2）文件流按照底部對齊，高矮不齊；
一、塊級元素和行內元素
標籤根據文件流分為塊級元素、行內元素。
1） 塊級元素
● 霸佔一行，不能與其他任何元素並列
● 能接受寬、高
● 如果不設定寬度，那麼寬度將預設變為父親的100%。
2） 行內元素
● 與其他行內元素併排
● 不能設定寬、高。預設的寬度，就是文字的寬度。
根據顯示內容分為：文本級、容器級。
文本級：p、span、a、b、i、u、em
容器級：div、h系列、li、dt、dd
所有的文本級標籤，都是行內元素，除了p，p是個文本級，但是是個塊級元素。
所有的容器級標籤都是塊級元素。
二、塊級元素和行內元素互換
通過display相互轉換
display：inline轉換成行內元素。
● 此時這個div不能設定寬度、高度；
● 此時這個div可以和別人併排了
display：block轉換成塊級元素。
● 此時這個元素能夠設定寬度、高度
● 此時這個元素必須霸佔一行了，別人無法和他併排
● 如果不設定寬度，將撐滿父親
脫離標準文件流
css中一共有三種手段，使乙個元素脫離標準文件流：
1） 浮動
2） 絕對定位
3） 固定定位
一、浮動
1）浮動會使元素脫離標準文件流，不受標準文件流束縛。
2）浮動元素會相互貼靠
3）浮動元素有字圍效果
注意：字圍只能是漢字才有的效果，英文本元數字不行！
雖然div有浮動，可以擋住p標籤但是擋不住p裡的內容
強調：要有浮動都浮動。
4）浮動元素會收縮
收縮：乙個浮動的元素，如果沒有設定width，那麼將自動收縮為文字的寬度（這點非常像行內元素）。
二、浮動的清除
清除浮動的方法：
1）給浮動的元素的祖先元素加高度
如果乙個元素要浮動，那麼它的祖先元素一定要有高度。
只要浮動在乙個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。所以就是清除浮動帶來的影響了。
給前面乙個浮動過的元素的祖元素加高度，清除浮動對後面的影像。
2）clear：both
clear就是清除，both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。
注意：這種方法有bug，加上clear：both後margin會失效。
3）隔牆法
在兩個浮動的中間插乙個div分隔開來並清除浮動clear：both。
內牆法：把div塊插在浮動元素的後面，也就是浮動元素父元素裡面。
「內牆法」： 瀏覽器渲染機制 內牆div 設定屬性 clear: both即可給父親設定高度
注意：脫標的元素是不能把父元素撐出高度的！表現出的高是假象。
兩個p都浮動，所以div不能被撐出高。而在家裡新增乙個內牆，就能夠讓div被兒子撐出高度。
4）溢位清除浮動：overflow：hidden
overflow 當層的內容超出層所能容納的範圍時：
visible 層的 大小 內容會顯示出來
hidden 隱藏超出層大小的內容
scroll 不管內容是否超出層的範圍 都新增滾動條
auto 只在內容超出層的範圍時才顯示滾動條
乙個父親不能被自己浮動的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。這是乙個偏方。
開發時，隔牆法和溢位隱藏都可以。
2020 12 09盒模型與標準文件流
二 標準文件流 div 內邊距 內容與邊框的距離。內邊距的區域也會被背景渲染。padding有四個方向 上下左右。box border 邊框 盒子占有的最外層的區域。box box margin 外邊距 盒子與盒子之間的距離。margin有四個方向 上下左右。盒子的內容多少不確定時，為了保證元素的高...
CSS盒模型 定位流 浮動流
一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...
css 標準流 盒模型 浮動
一 盒模型 1.1 盒子的區域 乙個盒子的主要屬性5個 width height padding border margin padding 內邊距 border 邊框 margin 外邊框 1.2 認識width height 乙個盒子的真實占有的寬度 左border 左padding width...