Day 3
1.標(biāo)準(zhǔn)流布局
什么是標(biāo)準(zhǔn)流
在沒有給標(biāo)簽通過css布局的時候劳淆，標(biāo)簽在瀏覽器中有一套默認(rèn)的布局規(guī)則全庸，這個規(guī)則就是標(biāo)準(zhǔn)流布局標(biāo)準(zhǔn)流布局規(guī)則
1）塊級標(biāo)簽：一個占一行(不管標(biāo)簽本身的寬度)剃斧，設(shè)置寬高有效藤违，默認(rèn)寬度是父標(biāo)簽的寬度帐偎，默認(rèn)高度是內(nèi)容的高度
例如：p慈鸠、h1-h6、hr膏燃、div...
2）行內(nèi)標(biāo)簽：一行可以有多個茂卦，默認(rèn)大小第內(nèi)容的大小，設(shè)置寬高無效
例如：a组哩、font等龙、label、button伶贰、span
3）行內(nèi)塊標(biāo)簽：一行可以顯示多個蛛砰，默認(rèn)大小是內(nèi)容的大小幕袱；設(shè)置寬高是有效的
例如：input暴备、button、imgdisplay屬性
block -- 塊級標(biāo)簽
inline -- 行內(nèi)標(biāo)簽
inline-block -- 行內(nèi)塊
none -- 隱藏
脫流/脫標(biāo)
只要標(biāo)簽脫流们豌，標(biāo)準(zhǔn)的流的規(guī)則全部失效涯捻，不管是什么樣的標(biāo)簽在拖離標(biāo)準(zhǔn)流的情況下都是按照以下規(guī)則進行布局；
一行可以顯示多個望迎；默認(rèn)大小是內(nèi)容的大姓习；設(shè)置寬度有效浮動和定位都可以讓標(biāo)簽脫流
2.float
- float屬性
left(左浮動)
right(右浮動)
3.內(nèi)容環(huán)繞現(xiàn)象
浮動內(nèi)容環(huán)繞現(xiàn)象：
被環(huán)繞標(biāo)簽浮動辩尊，環(huán)繞的內(nèi)容的容器標(biāo)簽不浮動
4.清除浮動
- 清除浮動：
清除浮動是清除因為浮動二產(chǎn)生的高度塌陷的問題
1）高度塌陷
當(dāng)父標(biāo)簽浮動涛浙，并且不設(shè)置固定高度，字標(biāo)簽浮動就會產(chǎn)生高度塌陷的問題
2）清除浮動的方法
a.空盒子法：在高度塌陷的標(biāo)簽的最后添加一個空的div摄欲，并且設(shè)置這個空的div的樣式的clear屬性為both
b.設(shè)置高度會塌陷的標(biāo)簽的樣式overflow屬性為hidden
c.萬能清除法：設(shè)置高度會塌陷的標(biāo)簽的after狀態(tài)添加樣式(display: block;clear: both;content: "";visibility: hidden;height: 0;)再給高度會塌陷的標(biāo)簽添加樣式屬性zoom的值為1
5.定位
- position屬性 -- 選中定位的標(biāo)簽的參考對象
initial/static -- 不定位轿亮，默認(rèn)值，但是body的不是它們
absolute -- 絕對定位胸墙，相對第一個position屬性不是initial/static的父標(biāo)簽進行定位
relative -- 相對定位相對標(biāo)準(zhǔn)流定位(相對于原標(biāo)簽在標(biāo)準(zhǔn)流中的位置進行定位)
fixed -- 相對瀏覽器定位
sticky -- 定位保持網(wǎng)頁中最后一個塊在最后面(網(wǎng)頁滾動的時候在瀏覽器的最下面我注，網(wǎng)頁不超過一屏在內(nèi)容后面)
- left\right\top\botton
設(shè)置當(dāng)前標(biāo)簽的左、右迟隅、上但骨、下到參考對象的左、右智袭、上奔缠、下的距離
注意：在不給position屬性的時候直接設(shè)left\right\top\botton屬性無效
6.盒子模型
- html中每個可見的標(biāo)簽都是一個盒子模型，由content吼野、padding校哎、border、margin組成
1）content -- 內(nèi)容瞳步，設(shè)置寬和高其實是設(shè)置內(nèi)容的大小闷哆，添加子標(biāo)簽是添加在內(nèi)容上；設(shè)置背景顏色和背景圖都會作用于內(nèi)容部分
2）padding -- 內(nèi)容外面的可見部分(默認(rèn)沒有)谚攒，有4個方向阳准；設(shè)置padding會讓標(biāo)簽變大設(shè)置背景顏色和背景圖都會作用于padding部分
/*2.padding*/
/*一起設(shè)置4個方向的padding的值為50px*/
/*padding: 50px;*/
3）border -- 邊框，有4個方向馏臭，可以單獨控制每個方向的大小野蝇、顏色、樣式
/*3.border
* 1）一起設(shè)置
* 格式 - border:邊框的寬度 邊框樣式 邊框顏色
* 邊框樣式 - solid實線括儒、dashed虛線绕沈、dotted*/
4）margin -- 內(nèi)邊距，有4個方向帮寻，不可見乍狐，但是占位置
/*4.margin*/
/*1) 一起設(shè)置*/
/*margin: 20px;*/
