盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
盒子的宽度= width + 左右两边边框的宽度 + 左右两边的内边距
盒子的高度= height + 上下的内边距 +上下边框
padding-内边距：盒子的内容区与盒子边框之间的距离
margin-外边距：当前盒子与其他盒子之间的距离
浏览器在页面中没有样式时，有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
* { margin: 0;
padding: 0;
}
盒模型分成内容区、内边距、边框、外边距四部分。
内联元素不能设置width和height
设置水平内边距，内联元素可设置水平方向的内边距
垂直方向内边距，内联元素可以设置垂直方向的内边距，不会影响页面布局
为元素设置边框，内联元素可以设置边框边框，垂直的边框不会影响到页面的布局
水平外边距，内联元素支持水平方向的外边距
为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和
内联元素不支持垂直外边距
display 、 visibility 和 overflow ：
display：将内联元素变块元素，通过display样式可以修改元素类型,选值：
inline：将一个元素作为内联元素显示
block：将一个元素设置块元素显示
inline-block：将一个元素转换行内块元素
可使一个元素既有行内元素的特点又有块元素的特点，既可设置宽高，又不独占一行
none：不显示元素，并不会再页面中继续占有位置
visibility：用来设置样式的隐藏和显示的状态，选值：
visible：默认值，元素默认会在页面显示
hidden：元素会隐藏不显示，但是位置会在。
overflow：子元素存在父元素的内容区中，子元素最大等于父元素大小，如果超出，显示在父元素之外的内容，称溢出内容。
如何处理溢出：可选值：
visible：默认值，不作处理
hidden：会被修剪，不显示
scroll：添加滚动条，通过拖动滚动条查看内容
不论是否溢出，会添加水平与垂直双方向的滚动条
auto：会根据需求添加滚动条
文档流：
元素在文档流的特点：
块元素：
1> 独占一行，会自上而下排列
2> 默认宽度是父元素的100%
3> 高度默认被内容撑开
内联元素：
1> 只占自身大小，默认从左向右排列
2> 宽度和高度默认都被内容撑开
元素值为auto时，此时指定内边距不会影响可见框的大小，会自动修改宽度，以适应内边距
就算跌倒，也要豪迈的笑
网友评论