CSS盒子模型

盒子模型

组成：边框、外边距、内边距、内容

边框（border）：三部分组成“ 边框粗细、边框样式、边框颜色 ”

简写border:1px solid red;没有顺序！！！

边框的每一条边都能定义样式（ border-top / bottom / left / right ）

注意：这里在定义不同边的时候一定要注意层叠性！！！

表格的细线边框：解决表格边框粗细叠加的问题

border-collapse： collapse; 表示把相邻的边框合并在一起

内边距（padding）：设置内边距，即边框与内容之间的距离

padding-left / right / top / bottom 分别定义四边的内边距

简写方式

注意：

• 边框会影响盒子的实际大小！！
• 盒子本身没有写 width或者height属性时，不会撑开盒子

外边距：用于控制盒子与盒子之间的距离

margin-left / right / top / bottom 分别定义四边的外边距

和padding语法基本相同

块级盒子水平居中

• 保证左右的外边距为"auto"
• 盒子必须指定宽度
• 常用写法：margin: 0 auto;

行内元素或者行内块元素水平居中给其父元素添加 text-align:center;即可

外边距合并：在使用margin定义块元素的垂直外边距时，可能会出现外边距合并

嵌套块元素塌陷解决方法：

1. 可以为父元素定义上边框
2. 为父元素定义上内边距
3. 为父元素添加overflow：hidden;

清除内外边距：网页元素很多都会带有默认的内外边距，而不同浏览器的默认值不一致，所以我们在布局前，首先要清楚内外边距

*{
	margin:0;
    padding:0;
}

注意：行内元素尽量只设置左右内外边距

清除无序列表的小圆点

li{
            list-style: none;
        }

很常用！加上这行代码可以去掉小圆点

圆角边框:把盒子变成圆角的

border-radius: 10px;

通过设定radius（半径）的值来确定圆弧的大小，用该半径的圆去与盒子的两条相邻边切

所以数值越大弧度越明显

要想要做出圆形的盒子，先设置一个正方形盒子，在让半径等于边长的一半

 width: 200px;
 height: 200px;
 border-radius: 50%;

圆角矩形：把半径设为盒子高度的一半

注意：border-radius可以设置多个值，4个数值是从左上角开始，顺时针的4个角的弧度

盒子阴影：用box-shadow来给盒子添加阴影

注意：盒子阴影不占用空间，不影响其他盒子的排列

文字阴影：用text-shadow来添加阴影

和盒子阴影写法一样