CSS的流式布局
- 每个块元素都带着一个换行
- 每个块元素从上往下流动，每个内联元素从左上方往右下方流动
- 只要两个块元素的垂直方向的外边距碰到一起，那么它们就会折叠（使得实际的间距为两个元素中最大的那个外边距值）；即使元素嵌套的情况也不例外，除非是嵌套的最外层的元素有一个边框
流式布局之浮动设置
- 所有的浮动元素都必须要有一个宽度（但是像image这样默认有个宽度的元素就可以不指定）
-
浏览器遇到浮动元素时，会按设置把它浮动到位，然后从流中删除该元素，就好像这个元素浮动在页面之上一样，接下来的块元素会继续在原位置填充，就好像没有这个浮动元素一样，但是内部的内联元素会考虑浮动元素的边界，从而定位时绕过这个浮动元素
浮动元素.png
- clear属性可以使得元素流入页面时，在这个元素的左右两边不允许出现浮动内容
冻结布局和凝胶布局(frozen layouts/Jello layouts)
- 冻结：把body的内容再用一层div包裹起来，然后设置这个div的宽度，这样就能把页面内容固定在这个宽度内显示，而无论浏览器如何调整页面的宽度大小
- 凝胶：在冻结的基础上，设置margin-left和margin-right为auto，这样就能使得内容区居中
定位（position属性）
- 静态定位：static，默认设置，由浏览器来决定位置，跟流有关联，float元素也这种定位的
- 绝对定位：absolute，使用绝对定位的元素，会从流中完全删除，然后按相对于离它最近的父元素来设置位置，流中的其他元素会完全忽略该元素的存在，绝对定位的元素之间通过z-index来确定z轴的位置
- 固定定位：fixed，元素相对与浏览器窗口（而不是相对于页面）来定位
- 相对定位：relative，元素还在流中，然后按照指定的偏移量进行定位
CSS表格
- 每个单元格包含一个块元素
- 表格使用div来进行组织，并使用display属性的table、table-row、table-cell来标记表格、行和单元格
- 表格布局和table元素的单元格都有内边距和边框，但是用border-spacing（边框间距）取代外边距，且只能为所有单元格设置一个共同的间距
HTML5
- 用section来组织相关的内容，article组织独立的内容，不相关的内容用div来组织
- 很多新增的h5元素更多的是提供更加规范的语义表达
网友评论