塊元素
h1 p div ul ol li dl table form
行內(nèi)元素
a span em strong
行內(nèi)快 img input th td
兩個(gè)行內(nèi)快 默認(rèn)有一定間距
浮動(dòng)
1.脫離標(biāo)準(zhǔn)普通流的控制(浮) 浮動(dòng)到指定位置(動(dòng)) 俗稱脫標(biāo)
2.浮動(dòng)的盒子不在保留原先的位置
3.浮動(dòng)的元素是互相貼靠在一起的(不會(huì)有縫隙) 如果父級(jí)寬度裝不下這些浮動(dòng)的盒子, 多出的盒子會(huì)另起一行對(duì)齊.
4.任何元素都可以加浮動(dòng), 不管原先是什么類型元素加上浮動(dòng) 具有行內(nèi)快特性
5.如果行內(nèi)元素有了浮動(dòng), 則不需要轉(zhuǎn)換塊級(jí).行內(nèi)快元素就可以直接給高度和寬度
注意
子盒子 一個(gè)浮動(dòng) 全部浮動(dòng)
浮動(dòng)的盒子 只會(huì)影響后邊的標(biāo)準(zhǔn)流 前邊的不會(huì)浮動(dòng)
浮動(dòng)的盒子不會(huì)有外邊距問題.
注意
清除浮動(dòng) 有的父盒子不適合給高度. 會(huì)影響下邊的盒子.
本質(zhì): 清楚浮動(dòng)元素脫離標(biāo)準(zhǔn)流造成的影響 閉合浮動(dòng)只讓浮動(dòng)在父盒子內(nèi)部影響. 不影響父盒子外面的其他盒子
額外標(biāo)簽法, 就是在最后個(gè)浮動(dòng)的子元素后面添加一個(gè)額外標(biāo)簽, 添加清楚浮動(dòng)樣式
1.額外標(biāo)簽法 比如給最后一個(gè)元素添加個(gè)浮動(dòng). 把門關(guān)上 必須為塊級(jí)元素才能添加.不能是行內(nèi)元素
2.父親添加overflow:hidden 子不教父之過
3.after 之偽元素 父親添加 一串代碼.
4.父親添加雙偽元素.
代碼布局順序 1. 布局定位屬性 (dispaly postionn/float/clear/visibility/ overflow) 2. 自身屬性(wide, height, margin,padding, border,background) 3. 文本屬性 (color,font,text-decoration-textalign,vertical-align, white-space-break-word)4.其他屬性(css3)(content, cursor.border-radius),box-shadow-text-shadow
布局整體思路
1.先確定行 再看列
2.看列的寬度高度
3.行里浮動(dòng)比較多
網(wǎng)頁布局常用樣式
定位
