CSS盒子模型

左手的ㄟ右手 2024-03-22 13:46 7阅读 0赞

### 01-选择器 ###

#### 结构伪类选择器 ####

#### 基本使用 ####

作用：根据元素的**结构关系**查找元素。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uye2qHCM-1683517075285)(assets/1680321408957.png)\]][img-uye2qHCM-1683517075285_assets_1680321408957.png]

li:first-child {
        
      background-color: green;
    }

#### :nth-child(公式) ####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tpLeKMpG-1683517075286)(assets/1680321448162.png)\]][img-tpLeKMpG-1683517075286_assets_1680321448162.png]

> 提示：公式中的n取值从 **0** 开始。

#### 伪元素选择器 ####

作用：创建**虚拟元素**（伪元素），用来**摆放装饰性的内容**。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2bo8p0bC-1683517075287)(assets/1680321533901.png)\]][img-2bo8p0bC-1683517075287_assets_1680321533901.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KVUXbXeb-1683517075288)(assets/1680321544646.png)\]][img-KVUXbXeb-1683517075288_assets_1680321544646.png]

div::before {
        
      content: "before 伪元素";
    }
    div::after {
        
      content: "after 伪元素";
    }

注意点：

*  必须设置 **content: ””属性**，用来 设置伪元素的内容，如果没有内容，则**引号留空**即可
 *  伪元素默认是**行内**显示模式
 *  **权重和标签选择器相同**

### 02-PxCook ###

PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

*  开发面板（自动智能识别）
 *  设计面板（手动测量尺寸和颜色）

使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UbzsNuii-1683517075289)(assets/1680321681695.png)\]][img-UbzsNuii-1683517075289_assets_1680321681695.png]

### 03-盒子模型 ###

作用：布局网页，摆放盒子和内容。

#### 盒子模型-组成 ####

*  内容区域 – width & height
 *  内边距 – padding（出现在内容与盒子边缘之间）
 *  边框线 – border
 *  外边距 – margin（出现在盒子外面）

div {
        
      margin: 50px;
      border: 5px solid brown;
      padding: 20px;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sAjbi09R-1683517075290)(assets/1680330928735.png)\]][img-sAjbi09R-1683517075290_assets_1680330928735.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vueMqyWW-1683517075292)(assets/1680330935635.png)\]][img-vueMqyWW-1683517075292_assets_1680330935635.png]

#### 边框线 ####

##### 四个方向 #####

属性名：**border**（bd）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-74aL0E40-1683517075293)(assets/1680330976390.png)\]][img-74aL0E40-1683517075293_assets_1680330976390.png]

div {
        
      border: 5px solid brown;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

##### 单方向边框线 #####

属性名：**border-方位名词**（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

div {
        
      border-top: 2px solid red;
      border-right: 3px dashed green;
      border-bottom: 4px dotted blue;
      border-left: 5px solid orange;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

#### 内边距 ####

作用：设置 内容 与 盒子边缘 之间的距离。

*  属性名：padding / padding-方位名词

div {
        
      /* 四个方向 内边距相同 */
      padding: 30px;
      /* 单独设置一个方向内边距 */
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 40px;
      padding-left: 80px;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

> 提示：添加 padding 会撑大盒子。

*  padding 多值写法

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TiYwCI8A-1683517075295)(assets/1680331118330.png)\]][img-TiYwCI8A-1683517075295_assets_1680331118330.png]

> 技巧：从**上**开始**顺时针**赋值，当前方向没有数值则与**对面取值相同**。

#### 尺寸计算 ####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qiUKAkiK-1683517075296)(assets/1680331322935.png)\]][img-qiUKAkiK-1683517075296_assets_1680331322935.png]

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

*  手动做减法，减掉 border / padding 的尺寸
 *  內减模式：**box-sizing: border-box**

#### 外边距 ####

作用：拉开两个盒子之间的距离

属性名：**margin**

提示：与 padding 属性值写法、含义相同

#### 版心居中 ####

![在这里插入图片描述][f0f6a06ffc3d454e943a8be9c24c3254.png]

左右 margin 值 为 auto（盒子要有宽度）

div {
        
      margin: 0 auto;
      width: 1000px;
      height: 200px;
      background-color: pink;
    }

#### 清除默认样式 ####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocMHxPFc-1683517075298)(assets/1680331558304.png)\]][img-ocMHxPFc-1683517075298_assets_1680331558304.png]

清除标签默认的样式，比如：默认的内外边距。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3dT1X7k6-1683517075299)(assets/1680331580746.png)\]][img-3dT1X7k6-1683517075299_assets_1680331580746.png]

/* 清除默认内外边距 */
    * {
        
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 清除列表项目符号 */
    li {
        
      list-style: none;
    }

#### 元素溢出 ####

作用：控制溢出元素的内容的显示方式。

属性名：**overflow**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7hoRb8Ha-1683517075300)(assets/1680331623305.png)\]][img-7hoRb8Ha-1683517075300_assets_1680331623305.png]

#### 外边距问题 ####

##### 合并现象 #####

场景：**垂直**排列的兄弟元素，上下 **margin** 会**合并**

现象：取两个 margin 中的**较大值生效**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95roA6i0-1683517075301)(assets/1680331672628.png)\]][img-95roA6i0-1683517075301_assets_1680331672628.png]

.one {
        
      margin-bottom: 50px;
    }
    .two {
        
      margin-top: 20px;
    }

##### 外边距塌陷 #####

场景：父子级的标签，子级的添加 **上外边距** 会产生**塌陷**问题

现象：**导致父级一起向下移动**

.son {
        
      margin-top: 50px;
      width: 100px;
      height: 100px;
      background-color: orange;
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ryik4Dzk-1683517075302)(assets/1680333860271.png)\]][img-Ryik4Dzk-1683517075302_assets_1680333860271.png]

解决方法：

*  取消子级margin，父级设置padding
 *  父级设置 overflow: hidden
 *  父级设置 border-top

#### 行内元素 – 内外边距问题 ####

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 **line-height** 可以改变垂直位置

span {
        
      /* margin 和 padding 属性，无法改变垂直位置 */
      margin: 50px;
      padding: 20px;
      /* 行高可以改变垂直位置 */
      line-height: 100px;
    }

#### 圆角 ####

作用：设置元素的外边框为圆角。

属性名：**border-radius**

属性值：数字+px / 百分比

提示：属性值是圆角半径

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0rOLmJLr-1683517075303)(assets/1680334014390.png)\]][img-0rOLmJLr-1683517075303_assets_1680334014390.png]

*  多值写法

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rmDVLOUn-1683517075305)(assets/1680334027657.png)\]][img-rmDVLOUn-1683517075305_assets_1680334027657.png]

> 技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

*  正圆形状：给正方形盒子设置圆角属性值为 **宽高的一半 / 50%**

img {
        
      width: 200px;
      height: 200px;
      
      border-radius: 100px;
      border-radius: 50%;
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L9ToJRio-1683517075306)(assets/1680334083567.png)\]][img-L9ToJRio-1683517075306_assets_1680334083567.png]

*  胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半

div {
        
      width: 200px;
      height: 80px;
      background-color: orange;
      border-radius: 40px;
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mmWAZrZ-1683517075307)(assets/1680334136242.png)\]][img-9mmWAZrZ-1683517075307_assets_1680334136242.png]

#### 盒子阴影（拓展） ####

作用：给元素设置阴影效果

属性名：**box-shadow**

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

*  X 轴偏移量 和 Y 轴偏移量 必须书写
 *  默认是外阴影，内阴影需要添加 inset

div {
        
      width: 200px;
      height: 80px;
      background-color: orange;
      box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
    }

[img-uye2qHCM-1683517075285_assets_1680321408957.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f9d9630f5de84985b35ad12b876aefc2.png
[img-tpLeKMpG-1683517075286_assets_1680321448162.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/89547cee5cef4e0aaa184213cca2243a.png
[img-2bo8p0bC-1683517075287_assets_1680321533901.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/659f8141940244998fbcea801a0afd30.png
[img-KVUXbXeb-1683517075288_assets_1680321544646.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/82da770158744dbe9c29c59171ae4827.png
[img-UbzsNuii-1683517075289_assets_1680321681695.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f522904352fb42eea4ab0b2359d0d1e4.png
[img-sAjbi09R-1683517075290_assets_1680330928735.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9504e021533d49699bc5f3dd3ba8a8e0.png
[img-vueMqyWW-1683517075292_assets_1680330935635.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f47ac952ac5f4d8cb0ef482c82f86b2a.png
[img-74aL0E40-1683517075293_assets_1680330976390.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d9305d6fbe3a451e815e36aeac7a945d.png
[img-TiYwCI8A-1683517075295_assets_1680331118330.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/297f86139d834018b1e0214a7a856bf8.png
[img-qiUKAkiK-1683517075296_assets_1680331322935.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8f419b115fd3418fb5e49c1edc5b1bce.png
[f0f6a06ffc3d454e943a8be9c24c3254.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/150af295327049cb86df7758e9d98368.png
[img-ocMHxPFc-1683517075298_assets_1680331558304.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0745921509904731acdf35b38b821231.png
[img-3dT1X7k6-1683517075299_assets_1680331580746.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f22b4fe16b234c31bac8a84cb93a6131.png
[img-7hoRb8Ha-1683517075300_assets_1680331623305.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/31275e91d9e04496a84e14a9d2e20082.png
[img-95roA6i0-1683517075301_assets_1680331672628.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/459742c18ddf4574bd88c70bafccd4ba.png
[img-Ryik4Dzk-1683517075302_assets_1680333860271.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/eba19a4779d24472910102079fc59c8e.png
[img-0rOLmJLr-1683517075303_assets_1680334014390.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/65d6cfd9b0f74ea089c2221da4fe078a.png
[img-rmDVLOUn-1683517075305_assets_1680334027657.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/75e343ee3bb0431bac76e993361bfa3c.png
[img-L9ToJRio-1683517075306_assets_1680334083567.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d68622f0ea2444d69473833672d10785.png
[img-9mmWAZrZ-1683517075307_assets_1680334136242.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9d9ae06848a743dcad57f5eb48b0f78a.png