css table设置边框_CSS布局综述（上篇）

安卓App常用线性布局（LinearLayout），相对布局（RelativeLayout）；刚开始做web页面布局的时候，奇怪于为什么web端没有类似的布局模式。其实，上述的线性布局和相对布局在web端是高阶布局。web前端最直接的使用是更基础的布局模式，由它们构成高阶布局。

基础布局

盒子模型

margin
border
padding
width
height
min-width
max-width
min-height
max-height
line-height

两种计算盒子宽度的方式：

box-sizing:content-box  
box-sizing:border-box

格式化类型

display:none
display:block
display:inline-block
display:inline

行内元素/内联元素

特性：

1. 沿着文本流水平排列
2. 明确设置的宽度和高度不起作用
3. 高度不受其垂直方向上的内边距，边框，外边距影响，水平间距同构左、右外边距，边框和内边距影响

块元素

1. 沿着垂直方向堆叠
2. 垂直方向的间距由上、下外边距决定

内联块级元素

兼具块级元素和行内元素的特性

文档流

文档流是怎么组织布局的？

网页从左到右像河流般流淌，遇到行内元素，行内块级元素则继续水平向前，遇到块级元素则该块级元素自成一行，从另一行往前流淌。

position: static

我理解的基础布局有下面四种：文档流布局，相对定位布局，绝对定位布局，浮动布局。文档流布局是后面三种布局的基础，是对文档流布局规则的增强、修改而成。

相对定位

元素设置方式：

position: relative

基于上述的文档流布局，是对文档流的布局的增强。

设置了相对定位的元素仍然会占用文档流的位置，因此该元素以外的其他元素的位置依然按文档流规则排列。

拥有了对初始位置的平移能力，这种平移是以该元素在文档流中初始位置为原点，通过top，bottom，right，left来平移。

相对定位存在遮挡其他元素的可能。

绝对定位

元素设置方式：

position: absolute

是对相对定位的增强，这种布局方式不再占用原来的空间，其他元素按文档流重新确定位置。

平移的原点不再是按相对定位的规则，即按文档流中的位置确定，而是距离它最近的display不是static的父元素，也就是非文档流里的父元素。如果向上没找到，那最后就以html为定位的包含块。

提供了z-index属性来决定遮挡时谁显示。

浮动定位

元素设置方式：

float: left

或，

float: right

该元素移动到其他块的外边沿或者浮动元素的外边沿，如果水平排列容纳不了所有浮动元素，后面的浮动元素会向下浮动至高度最小的浮动元素下面。

该元素不再占用文档流的位置，不会对位于该元素之前的其他元素造成影响，造成影响的是对该元素之后的元素按文档流布局，重新确定位置。

缺陷：

1. 如果不设置宽度（width/min-width/max-width）浮动元素会收缩为适应其中内容的最小宽度。
2. 使用浮动元素，有可能出现浮动元素包含块高度坍塌。

修复方法：

1)设置clear属性

1.新增浮动元素的兄弟标签，对其设置clear属性

2.通过浮动元素的父元素伪类after作为浮动元素的兄弟标签，对其设置clear属性

2)设置浮动元素的父元素为BFC（Block Formatting Context 块级格式化上下文）
即：

overflow：hidden

接下来说下什么是BFC

格式化上下文（Block Formatting Context）

它表明了元素之间如何相互影响；这种相互影响涉及到格式化上下文的内容

BFC特性

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。（是网页中某个独立的CSS渲染区域）
6. 计算BFC的高度时，作为子元素的浮动元素也参与计算。

其中，第5点，6点特别重要。

创建BFC的途径

1. 成为浮动元素
2. 作为绝对定位
3. 属性display: inline-block的块级盒子
4. overflow值不为“visiable”的块级盒子
5. 弹性盒 flex boxes(元素的display: flex或inline-flex)

表格布局

早期表格布局通过html结构化标签书写，现在通过CSS就能形成表格布局。

display:table;                 --<table>
display:table-cell;            --<td>
display:table-row;             --<tr>
display:table-row-group;       --<tbody>
display:table-column;          --<col>
display:table-column-group;    -- <colgroup>
display:table-header-group;    -- <thead>
display:table-footer-group;    --<tfoot>

table-layout:fixed;
text-align:center;
vertical-align:middle;

参考资料

BFC 详解​www.jianshu.com