页面布局之盒子模型——内容与边框（overflow，border：none，border-collapse）

看透页面布局的本质

经常听说，网页布局实际上就是一个又一个盒子堆砌排列起来。这些盒子里面装了我们要用的东西。CSS则是给盒子加上修饰包装，让盒子变得好看美观。
任何元素都可以看作是一个盒子。

盒子模型的组成

首先了解盒子模型的组成，包括以下四部分

1. content 内容
2. padding 内边距
3. border 边框
4. margin 外边距

个人理解，content内容是盒子的核心区域，设置padding则是向外“拓展”“撑开”盒子，设置border则是再把盒子封装起来，设置margin则是确定盒子与其它盒子之间的距离。

注：盒子模型的content内容和border边框会在本文讲解，padding和margin会另开一文讲解。

元素一、content 内容

content的必要性

内容是盒子模型的核心，处在盒子模型的中心位置，是盒子模型不可缺少的一个组成元素。即盒子模型不能没有content，可以没有border,padding和margin。

content的属性

content的属性包括width,height和overflow。
不论是在块级元素还是在行内块元素中，对其设置width宽度,height高度，实际上都是给content内容区设置宽度和高度。即width，height仅针对content，不包括padding。
by the way，行内元素设置宽度和高度是无效的。

关于overflow，大多使用三个值：scroll，hidden，作用如下：

1. overflow:scroll 显示滚动条
2. overflow:hidden 隐藏内容 避免溢出
3. overflow:hidden 清除浮动
4. overflow:hidden 在父元素种添加避免外边距塌陷

外边距塌陷可查看以下链接
盒子模型之margin——外边距叠加

div{
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

倘若盒子内东西过多装不下，则会影响视觉效果，

显然内容已经超过了盒子的大小，内容溢出，不美观。

若添加 overflow:scroll，则能够添加滚动条。

div{
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: scroll;
}

若超过了宽度，则有水平方向的滚动条，若超出了高度，则有竖直方向的滚动条，内容不溢出，能够完整浏览。

若添加的是overflow:hidden，隐藏溢出内容。

div{
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
}

可见，overflow：hidden可以隐藏溢出内容，以免影响页面的布局。它能使超出盒子的部分自动隐藏，虽然显示不完全，但至少不会影响布局。

注：overflow:hidden还能清除浮动，关于浮动清除会另外阐述。

元素二、border 边框

border相关属性

border用于设置盒子的边框，有width,style,color三个属性。
width设置边框的粗细，style表示样式，color是颜色。
其中style有 solid (实线边框）dashed（虚线边框）dotted( 点线边框）
写作：

div{
    border-width: 10px;
    border-style: solid;
    border-color: pink;
    border: 10px solid pink;
}

三个属性也可合并起来如第四行，简洁明了

当然也可以单独设置，上边框，右边框，下边框，左边框。

div{
    width: 100px;
    height: 100px;
    margin-left: 30px;
    border-top: 5px solid pink;
    border-right: 5px dotted red;
    border-bottom: none;
    border-left: 5px dashed black;
}

效果：

border：none与border:0

上面单独设置border-bottom:none，即不设置下边框，故盒子是没有显示下边框的。
另外，border:0 也可以实现不显示边框。
但是border:0是需要占用内存的，因为实际上这句是定义了像素为0px的border。浏览器还是会对此进行渲染，只不过渲染了一条像素为0px的边框。
border：none 不会作渲染，故不占用内存

border-collapse：collapse

border-collapse：collapse用于table中合并相邻的边框。