眾所周知，grid布局目前得到瀏覽器的支持已經(jīng)非?？捎^了，它強(qiáng)大的功能已經(jīng)成為很多復(fù)雜布局的首選同時(shí)，很多場(chǎng)景里，它也成為了 table 布局的優(yōu)秀替代方案但是很多人在使用grid代替table布局時(shí)，卻發(fā)現(xiàn)了一個(gè)嚴(yán)重的問題，那；16在body中設(shè)置minwidth760px，可以避免布局重疊現(xiàn)象；第四種grid布局 父盒子display grid gridtemplatecolumns300px auto 300px分割成3列，寬度分別為300px auto 300px gridtemplaterows100px占一行，行高100px。

HTML中TABLE布局是早以前CSS不存在的時(shí)候興起的，是對(duì)TABLE標(biāo)簽的不正規(guī)使用，Table標(biāo)簽就是表格，是用來顯示數(shù)據(jù)的，而不是用來布局網(wǎng)頁的，雖然它有時(shí)候布局網(wǎng)頁很簡(jiǎn)單，但是一個(gè)大型的網(wǎng)頁如果用表格嵌套的表格來布局的話；第一步新建html文檔并搭建框架 新建一個(gè)TXT文檔，重命名為“田子格布局html”，然后用記事本打開，輸入表頭信息，已經(jīng)html整體框架搭建包括head與body第二步DIV布局 分別復(fù)制4個(gè)不同的div作為4部分，并且分別命名為；1所謂HTML是超文本標(biāo)記語言HyperText Markup Language，簡(jiǎn)稱HTML是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言2HTML頁面布局有兩種方式，一種是TABLE布局，一種是DIV布局3以前WEB10時(shí)代基本上都是table布局，后來WEB20；使用表格布局最簡(jiǎn)單和最流行的創(chuàng)建布局的方法是使用HTML lttable標(biāo)簽可以按照自己喜歡的方式來對(duì)表格中的列和行進(jìn)行排列例例如，使用包含3行和2列的表來實(shí)現(xiàn)以下HTML布局示例，但頁眉和頁腳列使用colspan屬性跨越兩列l(wèi)ttable。

html5新增的一些語義話標(biāo)簽，可以使用比如頭部可以使用header標(biāo)簽，導(dǎo)航nav，主體部分可以使用section，底部footer，中間文章articlediv，ul li標(biāo)簽都是使用比較頻繁的標(biāo)簽，span，i，em可以對(duì)文字進(jìn)行單獨(dú)的描述，表示等ltarticl；1流動(dòng)布局html網(wǎng)頁默認(rèn)的布局方式特點(diǎn)1塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%2內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示內(nèi)聯(lián)；4“T”結(jié)構(gòu)布局 所謂“T”結(jié)構(gòu)布局，就是指網(wǎng)頁上邊和左邊相結(jié)合，頁面頂部為橫條網(wǎng)站標(biāo)志和廣告條，左下方為主菜單，右面顯示內(nèi)容，這是網(wǎng)頁設(shè)計(jì)中用得最廣泛的一種布局方式在實(shí)際設(shè)計(jì)中還可以改變“T”結(jié)構(gòu)布局的。

比如幾個(gè)DIV之間寬度自適應(yīng)的問題，跟100%DIV布局的問題 表格都完全可以解決總結(jié)就是 DIV+CSS 可以簡(jiǎn)單實(shí)現(xiàn)的 布局就不要用表格了 ，除了DIV 難以實(shí)現(xiàn)的 用下table也無大礙，不要覺得自己的頁面里出現(xiàn)table就好像天理；第一利于搜索引擎蜘蛛爬行 根據(jù)總結(jié)和經(jīng)驗(yàn)，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的網(wǎng)頁來做對(duì)比，很顯然table的字節(jié)大于div+css的，字節(jié)小就有益于搜索引擎蜘蛛下載頁面所用的時(shí)間，而且也有益于；HTML5新元素及其特性HTML5的語義化標(biāo)簽以及屬性，可以讓開發(fā)者非常方便地實(shí)現(xiàn)清晰的web頁面布局，加上CSS3的效果渲染，快速建立豐富靈活的web頁面顯得非常簡(jiǎn)單本次學(xué)習(xí)HTML5的新標(biāo)簽元素有l(wèi)theader定義頁面或區(qū)段的頭部ltfooter定義頁面；lt！DOCTYPE htmllthead ltmeta charset=quotUTF8quot lttitle布局之路移動(dòng)端開發(fā)實(shí)例lttitle ltmeta name=quotviewportquot content=quotwidth=devicewidth，userscalable = noquot ltlink rel=quotstylesheetquot type。

在使用div布局時(shí)，需要掌握以下要點(diǎn)1 確定頁面的結(jié)構(gòu)首先需要明確頁面的布局需求，并將內(nèi)容按照需要展示的區(qū)域劃分為不同的div元素這可以通過手動(dòng)編輯或使用一些工具來完成2 設(shè)計(jì)樣式根據(jù)不同的div元素，使用CSS；7手動(dòng)強(qiáng)行換行布局br標(biāo)簽遇到文字需要換行的使用br標(biāo)簽即“l(fā)tbr ”，值得注意br標(biāo)簽是單獨(dú)的標(biāo)簽非盒子標(biāo)簽，獨(dú)立的一個(gè)標(biāo)簽，什么地方需要換行就使用br標(biāo)簽8表格型table表格標(biāo)簽在HTML布局中，學(xué)習(xí)DIV CSS并。