HTML的組成部分

• dtd部分：文檔類型說明，聲明版本、標(biāo)準(zhǔn)

• header部分：給機器看的
• body部分：給人看的

CSS控制div顯示

• 是一個塊級元素。這意味著它的內(nèi)容自動地開始一個新行。實際上，換行是 固有的唯一格式表現(xiàn)。可以通過 的 class 或 id 應(yīng)用額外的樣式。
• 如下代碼是CSS通過id設(shè)置每個div的寬高和背景色

Document

執(zhí)行效果：

浮動布局

我們先寫兩個div設(shè)置上背景顏色看看效果

Document我是左邊 我是右邊

上文也說ddiv的內(nèi)容會自動地開始一個新行，所以想將兩個div左右排列就要進(jìn)行浮動布局

我們分別在CSS中加上float屬性

效果如下圖：

清除浮動

當(dāng)有浮動布局和普通div共同存在時，會發(fā)生如下覆蓋的情況

Document我是左邊 我是右邊 我不設(shè)置浮動

所以如果不想被覆蓋，就要清除浮動

在CSS中對普通元素設(shè)置clear屬性

當(dāng)我們增加 clear: left; 時，代表不讓左邊浮動蓋著自己

#normal { height: 400px; background: blue; clear: left; }

此時清除左浮的div就會貼著左浮的div下邊顯示，如圖：

同樣的還可設(shè)置 clear: right; 代表不讓右邊浮動蓋著自己；設(shè)置 clear: both; 代表不讓浮動蓋著自己。這里不做演示

點擊【右上角，關(guān)注 子瑜說IT 】持續(xù)更新IT資訊以及web前端開發(fā)教學(xué)

8年開發(fā)老碼農(nóng)福利贈送：網(wǎng)頁制作，網(wǎng)站開發(fā)，web前端開發(fā)，從最零基礎(chǔ)開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰(zhàn)【視頻＋工具＋系統(tǒng)路線圖】都有整理，送給每一位對編程感興趣的小伙伴

獲取方式：

右上角有私信，請私信發(fā)我：01 即可獲取！

總結(jié)

以上是生活随笔為你收集整理的div html 下边加横线_HTML的组成部分、DIV+CSS布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。