2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
五种基本布局定位类型:* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。给你几个比较重要的建议把1、用Dreamweaver布局的时候，预览模式只能做部分参考或者不做参考，最终还是以浏览器显示为依据，因为Dreamweaver的预览模式的纠错能力差，或者说是兼容性不行
2、尽量把各个样式代码的名称记住，因为Dreamweaver有代码提示功能，所以也不用一字不落的全记住，但至少你得记住代码的大概拼写或者打头字母，这样能有效的帮你找到样式，这一条建议是比较适合初学者，记住代码能让你更快速更有效的布局
3、多看一看人家的成品页面，能让你快速的学习，但是当你能够基本熟悉后，想要有所进步看别人的效果就不那么明显了，最好就是自己多做，然后碰到问题解决问题，解决问题的过程就是学习的过程，我经常在百度这里帮人解决css方面的问题，经常能碰到一些我没碰到的问题，这就能让我在解决这个问题当中又学到一些东西，此外我教你一个更快速看别人页面样式的方法，那就是firefox火狐浏览器有一个firebug插件，按下快捷键F12就可以查看你所看到的页面的页面布局以及css样式，360浏览器也可以用
4、最好是能买一本专业的div+css布局的基础教程的书学习，因为我们在网上所学到的都比较的凌乱，看书学基础的话会比较的扎实，虽然可能会多花一点点时间，但是对于以后的发展是有好处的
