本文详细介绍了CSS盒模型，包括标准盒子模型和怪异盒子模型，以及它们的计算方式。此外，还讨论了外边距margin的设置，如外边距重叠和传递的问题，并给出了解决方案。同时，文章涵盖了内边距padding、边框border的使用，如何用边框创建三角形，以及盒阴影box-shadow的实现。最后，文章讲述了多种基于边距的居中布局方法。
一、盒模型 box
1、标准盒子模型
盒模型包含四个部分，分别是外边距margin，外边框border，填充区padding，内容区content。不设置时外边距和内边距是透明的。我们称border+padding+content为可视空间，margin为占位空间。
- 占位总宽度=
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right - 占位总高度=
margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
盒模型图示：
2、怪异盒子模型
当我们设置padding和border时，盒子会被撑大，这时候就会使用怪异盒子模型。它规定padding和border都包含在了width之内，设置时不会改变盒子的大小，只会向内挤压。它的占位空间为width/height(content+padding+border)+margin。
box-sizing：content-box为默认值，border-box切换异盒模型。
二、外边距 margin
外边距显示在元素边框以外的空白区域。允许设置负值，元素设置margin正值向右下移动，负值向左上移动。可以设置margin:0 auto;使块元素适应浏览器水平居中，垂直不可，且不能设置定位和浮动。
margin:上下左右;：设置一个值时为四个方向的外边距，数值+单位。值为百分数时，水平和垂直方向外边距的参照物都为父元素的宽度。margin:上下 左右;margin:上 左右 下;margin:上 右 下 左;：注意顺序。margin-top/bottom/left/right;：设置单边的外边距。
设置margin的两个问题
外边距重叠
因为BFC原则，水平方向的margin会重合。解决方案就是把总的margin写一个元素即可。
外边距传递
父元素当中的第一个子元素（块元素）的margin-top会向上传递。解决方案为把原本设置给子元素的margin-top换成父元素的padding-top；给父元素或者儿子元素添加浮动；给父元素设置上边框；给父元素添加overflow:hidden;
三、内边距 padding
一般把内边距设置给父元素。padding区域内正常显示背景。padding不允许设置负值。
padding:上下左右;：设置一个值时为四个方向的外边距，数值+单位。值为百分数时，水平和垂直方向外边距的参照物都为父元素的宽度。padding:上 左右 下;padding:上下 左右;padding:上 右 下 左;：注意顺序。
用margin设置外边距，padding设置内边距，处理间距。
实例：
<head>
<style>
div{
width:100px;
height:100px;
background-color: skyblue;
}
最低0.47元/天 解锁文章
扫一扫
1456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
