CSS 盒子模型

CSS 盒子模型

1.盒子模型

1.1盒子模型的组成部分

border边框、content内容、padding内边距、margin外边距

1.1.1 border边框

会影响盒子的实际大小

语法：

 border: 1px solid red;

 border: border-width||border-style||border-color;

属性	作用
border-width	定义边框粗细
border-style	边框的样式
border-color	边框颜色

表格细线边框

table,td,th{
    border: 1px solid pink;
    border-collapse: collapse;
}

border-collapse: collapse:表示相邻边框合并在一起

1.1.2 padding内边距

边框与内容之间的距离，会影响盒子实际大小

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

1.1.3 margin外边距

控制盒子与盒子之间的距离

外边距可以让块级盒子水平居中，但是必须满足俩个条件：

1. 盒子必须指定宽度
2. 盒子左右的外边距都设置为auto

• margin：0 auto;

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

嵌套块元素垂直外边距的塌陷

就是对于俩个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素的塌陷较大的外边距值

解决方法：

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

清除内外边距

        *{
            padding: 0;
            margin: 0;
        }

2.圆角边框

border-radius属性用于设置元素的外边距圆角

3.盒子阴影

box-shadow属性为盒子添加阴影

4.文字阴影

text-shadow属性为文字添加阴影

外边距圆角**

3.盒子阴影

box-shadow属性为盒子添加阴影

4.文字阴影

text-shadow属性为文字添加阴影