1流动布局html网页默认的布局方式特点1块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%2内联元素都会在所处的包含元素内从左到右水平分布显示内联。

利用HTML进行布局的方法有通过lttable标签来对表格的行和列进行排列来实现页面布局的效果，也可实现将网页内容放在多个页面中的多列布局还可以使用div和span标签进行布局页面布局是图形设计的一部分，用于处理页面上视觉元素。

布局网格由一些垂直和水平线条组成，可用于结构化网页内容网格是一个整体框架，也可以作为布局来组织框架的文本和图片使用网格可以更好地解决元素在页面中的定位问题，从而更准确地进行布局规划，同时使用网格也可以使布局设计更高效#xF3A8。

2固定布局Fixed 在固定布局中，网页的宽度是必须指定为一个像素值，一般为960px过去，开发人员发现960px是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12和15在今天，在web开发中还是比较普遍。

流动布局流动布局是浏览器默认的布局方式他会按照你所写的标签特性，从上至下从左到右的方式进行排列在HTML中我们按照标签的排列特性可以将它们分成三类1行级元素不独占一行，不能设置元素的高度宽度和底边边距。

在网页设计中，排版是至关重要的一环好的排版能够让页面更加清晰美观，提升用户体验本文将为你揭秘网页排版的技巧，让你的UI设计作品瞬间升级！#xF31F网格系统，打造完美平衡网格系统是网页设计的“秘密武器”，它能够帮助你轻松规划页面元素。

用bootstrap可以很容易的实现ltdiv class=quotrowquot ltdiv class=quotcolquot1ltdiv ltdiv class=quotcolquot2ltdiv ltdiv class=quotcolquot3ltdiv ltdiv class=quotcolquot4ltdivltdivrow 是行，col是列，或。

border 属性通过设置 border 属性，可以为 ltdiv 元素设置边框样式宽度和颜色CSS布局技巧如使用 float 属性实现多列布局使用 flexbox 实现弹性布局使用 grid 实现网格布局等通过结合 ltdiv 标签和CSS样式。

1所谓HTML是超文本标记语言HyperText Markup Language，简称HTML是一种用于创建网页的标准标记语言2HTML页面布局有两种方式，一种是TABLE布局，一种是DIV布局3以前WEB10时代基本上都是table布局，后来WEB20。

网格布局可以使页面更加有条理和易读，增强了用户体验#xF4F1#xF4BB响应式设计网格设计是响应式设计的一种常见实现方式，能够适应不同分辨率的屏幕#xF3A8清晰紧凑网格设计可以帮助设计师更好地组织页面元素，使页面结构更加清晰和紧凑#xF31F美感和谐。

3弹性网格布局使用弹性网格布局是自适应设计的核心通过使用相对单位如百分比而不是绝对单位如像素，确保页面中的元素可以根据屏幕大小进行相应的调整4媒体查询使用CSS3媒体查询来检测设备的特性，如屏幕宽度。

然后说PC端的，由于各个CSS框架的推进，基本上都是以12列或12的倍数网格布局为主了，然后网格布局又分为流式网格和固定宽度网格如总宽度设为960px前者通常用百分比来实现，并且已经计算和减去了所谓的“。

3无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系4浮动是从网页布局的角度来定义元素的显示，而行内和块状属性。

网格布局同样是布局方面的神器，目前不太常用 displaygrid 设置网格 必须使用 display grid 将容器元素定义为一个 grid网格 布局，使用 gridtemplatecolumns 和 gridtemplaterows 设置 列 和 行 的尺寸。

20152016前端知识体系 总结了下前端这两年的主流技术，大部分技术在我的博客里有较深入的研究学习，对应技 ，博客持续更新中，欢迎大家关注~一框架与组件 bootstrap等UI框架设计与实现 伸缩布局grid网格布局 基础UI样式。