众所周知，grid布局目前得到浏览器的支持已经非常可观了，它强大的功能已经成为很多复杂布局的首选同时，很多场景里，它也成为了 table 布局的优秀替代方案但是很多人在使用grid代替table布局时，却发现了一个严重的问题，那；16在body中设置minwidth760px，可以避免布局重叠现象；第四种grid布局 父盒子display grid gridtemplatecolumns300px auto 300px分割成3列，宽度分别为300px auto 300px gridtemplaterows100px占一行，行高100px。

HTML中TABLE布局是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单，但是一个大型的网页如果用表格嵌套的表格来布局的话；第一步新建html文档并搭建框架 新建一个TXT文档，重命名为“田子格布局html”，然后用记事本打开，输入表头信息，已经html整体框架搭建包括head与body第二步DIV布局 分别复制4个不同的div作为4部分，并且分别命名为；1所谓HTML是超文本标记语言HyperText Markup Language，简称HTML是一种用于创建网页的标准标记语言2HTML页面布局有两种方式，一种是TABLE布局，一种是DIV布局3以前WEB10时代基本上都是table布局，后来WEB20；使用表格布局最简单和最流行的创建布局的方法是使用HTML lttable标签可以按照自己喜欢的方式来对表格中的列和行进行排列例例如，使用包含3行和2列的表来实现以下HTML布局示例，但页眉和页脚列使用colspan属性跨越两列lttable。

html5新增的一些语义话标签，可以使用比如头部可以使用header标签，导航nav，主体部分可以使用section，底部footer，中间文章articlediv，ul li标签都是使用比较频繁的标签，span，i，em可以对文字进行单独的描述，表示等ltarticl；1流动布局html网页默认的布局方式特点1块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%2内联元素都会在所处的包含元素内从左到右水平分布显示内联；4“T”结构布局 所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式在实际设计中还可以改变“T”结构布局的。

比如几个DIV之间宽度自适应的问题，跟100%DIV布局的问题 表格都完全可以解决总结就是 DIV+CSS 可以简单实现的 布局就不要用表格了 ，除了DIV 难以实现的 用下table也无大碍，不要觉得自己的页面里出现table就好像天理；第一利于搜索引擎蜘蛛爬行 根据总结和经验，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的网页来做对比，很显然table的字节大于div+css的，字节小就有益于搜索引擎蜘蛛下载页面所用的时间，而且也有益于；HTML5新元素及其特性HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单本次学习HTML5的新标签元素有ltheader定义页面或区段的头部ltfooter定义页面；lt！DOCTYPE htmllthead ltmeta charset=quotUTF8quot lttitle布局之路移动端开发实例lttitle ltmeta name=quotviewportquot content=quotwidth=devicewidth，userscalable = noquot ltlink rel=quotstylesheetquot type。

在使用div布局时，需要掌握以下要点1 确定页面的结构首先需要明确页面的布局需求，并将内容按照需要展示的区域划分为不同的div元素这可以通过手动编辑或使用一些工具来完成2 设计样式根据不同的div元素，使用CSS；7手动强行换行布局br标签遇到文字需要换行的使用br标签即“ltbr ”，值得注意br标签是单独的标签非盒子标签，独立的一个标签，什么地方需要换行就使用br标签8表格型table表格标签在HTML布局中，学习DIV CSS并。