CSS基础知识筑基( 六 ) _生活百科

border的间距（上右下左，顺时针方向）。

?border：盒子边框，边框线包括多个样式属性：线粗细、线样式、颜色、圆角等。border包含的区域称为“border-box” 。

?margin：盒子外边距，盒子和其他元素的间距（上右下左）。

属性描述值?border边框样式（上右下左），可简写border:5px solid red;border-width设置四个边框的宽度border-width: 5px 10px 1px mediumborder-style设置 4 个边框线的样式dotted点、 solid线、 double双线、 dashed虚线border-color设置四条边框的颜色border-color:red green blue pink;border-radius设置四个 border-*-radius 圆角属性border-radius:15px 0;border-collapse表格的边框的合并设置collapse /k??l?ps/?padding设置所有（上右下左）内边距属性数值/百分比%：padding:10px 5px;?margin设置所有（上右下左）外边距属性，可负数数值/百分比%：margin:10px 5px 15px 20px;border、padding、margin都有四个边（上右下左，顺时针方向：top、right、bottom、left），可以一起设置，也可以分别设置。在浏览器的调试模式下可以看到任何元素的盒子模型结构：

文章插图

?注意：margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框border为止 —— 不会延伸到 margin 。?外边距折叠：两个外边距上下相邻的元素，他们的外边距将合并为一个外边距（重叠在一起），即最大的那个外边距的大小，而不是二者的外边距之和。当然不是绝对的，参考外边距重叠。

文章插图
用边框画三角形：四个边框可以分别设置样式，设置其他三个变为透明色，就可以画出一个三角形了。

/*用边框画三角形：全部用边框填充*/<style>.border {border: solid 50px #6af36a;border-top-color: #368cee;border-bottom-color: #368cee;width: max-content;}</style><div class="border"></div>

文章插图
基于块级元素、内联元素的区别，盒子也分为两种：块级盒子 (block box) 和内联盒子 (inline box) 。
块级盒子 (block box)：应用完整的盒子模型

自动换行，宽度默认和父容器一样宽
width、height有效，内边距、外边距、边框会将盒子周围的元素“推开” 。

内联盒子 (inline box)：部分盒子模型有效

盒子不换行，width、height无效，基于元素内容自动适应。
垂直方向的内边距、外边距、边框有效，但不会把其他inline盒子推开。
水平方向的内边距、外边距、边框有效，会把其他inline盒子推开。

4.2、box-sizing盒模型盒子模型 box-sizing 有两种模式：标准盒模型、代替（IE）盒模型，通过属性box-sizing设置（IE8支持，之前IE都只有代替盒模型）。
box-sizing描述备注content-box标准盒子模型（默认值）：元素width、height仅限Content内容，padding 和 border往外扩张。如果给元素设置 width 、height，实际设置的是 content box 。整个盒子的宽高需再加上padding 和 border，是不是很反人类？是就对了！切换标准盒模型：box-sizing: content-box