浮動(dòng)是什么
- 浮動(dòng)是HTML元素存在的第二種狀態(tài)犹菇。
- 在這種狀態(tài)下袍睡，它的五大特征：
- 嘎ㄒ丁：浮動(dòng)元素會(huì)脫離文檔流沪蓬。(浮動(dòng)元素后面的元素流動(dòng)元素會(huì)占據(jù)浮動(dòng)元素的原有位置)
- 動(dòng)：浮動(dòng)元素會(huì)向左或右無(wú)限運(yùn)動(dòng)彤钟，直到它碰到另一個(gè)元素。
- 塊：所有的浮動(dòng)元素都是塊元素跷叉。(沒(méi)有行內(nèi)元素逸雹，行內(nèi)直接變塊)
- 并排：浮動(dòng)元素會(huì)發(fā)生并排現(xiàn)象营搅。
- 混排：文字會(huì)環(huán)繞浮動(dòng)圖片排列。
浮動(dòng)屬性
定義
float屬性定義元素元素的浮動(dòng)方式梆砸。
語(yǔ)法
選擇器{
float:none / left / right ;
}
- none：默認(rèn)值剧防，元素不浮動(dòng)
- left：讓元素向左移動(dòng)
- right：讓元素向右移動(dòng)
如何設(shè)置元素并排
第一步：確定子元素
第二步：確定父元素
第三步：給子元素添加float
第四步：給子元素設(shè)置合理寬度
第五步：清除浮動(dòng)
高度坍塌
1.高度坍塌：是指子元素浮動(dòng)之后，父元素失去高度辫樱，后續(xù)元素上移
2.元素上移：造成布局發(fā)生混亂峭拘。（用clear屬性解決）
浮動(dòng)的問(wèn)題和解決辦法
第一種：使用空元素（不推薦）
第二種：BFC | haslayout
第三種：使用偽元素
clear屬性
定義：清除元素兩側(cè)的浮動(dòng)影響。
語(yǔ)法
footer{
clear：left | right | both | none
}
- left：左側(cè)清除浮動(dòng)
- right：右側(cè)清除浮動(dòng)
- both ：兩側(cè)清除浮動(dòng)
- none：不清除浮動(dòng)
網(wǎng)頁(yè)布局
web1.0時(shí)代
1989年 沒(méi)有css：使用標(biāo)簽的屬性來(lái)做網(wǎng)頁(yè)外觀狮暑。
web2.0 HTML結(jié)構(gòu) + css樣式 + js行為 互相獨(dú)立鸡挠、分離
2000年 以后
布局方式 ：div布局
- 流動(dòng)布局
- 浮動(dòng)布局：口字型布局、工字型布局搬男、兩欄布局拣展、三欄布局 自適應(yīng)布局、雙飛布局缔逛、神杯布局
- 定位布局
2013年：移動(dòng)互聯(lián)網(wǎng)時(shí)代
- 彈性盒模型
- 網(wǎng)格布局：普適布局系統(tǒng)
關(guān)于邊距值
- 外邊距可以取負(fù)值
- 內(nèi)邊距不可以取負(fù)值
向HTML頁(yè)面引入css的樣式
1.使用link標(biāo)簽引入
2.使用style標(biāo)簽引入
3.使用style屬性引入
4.使用@im
