CSS盒子模型

目录

前言

一、盒子的组成

1.外边距

2.内边距

3.边框

4.内容

二、圆角边框

三、盒子阴影

四、文字阴影

总结

---

---

前言

CSS的盒子模型是非常重要的，在前端代码编写上回经常用到。

---

一、盒子的组成

        盒子由四个部分组成，即外边距，边框，内边距和内容。

1.外边距

        首先，我们来看外边距，CSS margin属性用于在任何定义的边框之外，为元素周围创建空间。

        外边距可让块级盒子水平居中，满足一下条件：
        1.盒子指定了宽度（width）
        2.盒子左右的外边距都设置为auto。

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

        外边距合并：取两值中间较大者这种现象被称为相邻块元素垂直外边距的合并。

        嵌套块元素垂直外边距的塌陷：
        1.为父元素定义上边框
        2.为父元素定义上内边距
        3.为父元素添加overflow：hidden

        复合写法：与padding复合写法一致。

2.内边距

        CSS padding 属性用于在任意定义的边界内的元素内容周围生成空间。

        复合写法：
        padding：5px 10px 20px 30px
        一个值：上下左右都有X像素内边距
        两个值：上下内边距5px 左右内边距10px
        三个值：上内边距5px，左右10px，下内边距20px
        四个值：顺时针

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

3.边框

        CSS border 属性允许我们指定元素边框样式，宽度和颜色。

        border-style样式：
        1.solid实现边框
        2.dashed虚线边框
        3.dotted点线边框

        border-width：定义边框粗细，单位px

        border-color：边框颜色

        边框简写：border：width，style，color 没有顺序

        边框分开写：
                border-top：1px solid red（值设定上边框，其余同理）

                border-collapse：控制相邻单元格的边框
                border-collapse：collapse相邻边框合并在一起

4.内容

        用于显示文本和图像等。

二、圆角边框

        border-radius属性用来向盒子添加圆角边框。

        border-radius:lenght
        50%是一半
        圆形的做法：宽度和高度的一半（50%）
        圆角矩形：高度的一半

        设置四个不同的圆角：左上，右上，右下，左下

        设置两个不同的圆角：对角线
 
        分开写：border-top-left-radius...

p {
  border: 2px solid red;
  border-radius: 5px;
}

三、盒子阴影

        CSS box-shadow 属性应用阴影于元素。

        box-shadow：
        1.h-shadow（必须）水平阴影的位置
        2.v-shadow（必须）垂直阴影的位置
        3.blur（可选）。模糊距离
        4.spread（可选）。阴影的尺寸
        5.color（可选）。阴影的颜色
        6.insert（可选）将外部阴影（outset默认不写）改为内部阴影

        最简单的用法是只指定水平阴影和垂直阴影

div {
  box-shadow: 10px 10px;
}

四、文字阴影

        CSS text-shadow 属性为文本添加阴影。

        text-shadow:
        1.h-shadow（必须）水平阴影的位置
        2.v-shadow（必须）垂直阴影的位置
        3.blur（可选）。模糊距离
        4.color（可选）。阴影的颜色

        最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

h1 {
  text-shadow: 2px 2px;
}

---

总结

        CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。