【前端】快速掌握CSS-盒子模型

一、选择器

1. 结构伪类选择器

基本使用

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

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第一个元素N为1）

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

:nth-child(公式)

作用：根据元素的结构关系查找多个元素，公式中的n取值从 0 开始

功能	公式
偶数标签	2n
奇数标签	2n+1/2n-1
5的倍数的标签	5n
第5个以后的标签（即第5个开始后面所有的）	n+5
第5个以前的标签（即第5个开始前面所有的）	-n+5

2. 伪元素选择器

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

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

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

注意：

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

 

二、PxCook

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

• 开发面板（自动智能识别）
• 设计面板（手动测量尺寸和颜色，使用工具栏的尺子工具进行测量，使用工具栏的吸管工具查看颜色）

使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击右上角按钮【添加】，导入设计稿（或者直接将PSD文件拖入）

右上角加减号缩放大小；按住键盘空格，当鼠标变成手的形状时，滑动鼠标可将设计稿上下移动

 

三、盒子模型

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

1. 盒子模型-组成

• 内容区域 – width & height（在这里的内容会紧贴左上角）
• 内边距 – padding（出现在内容与盒子边缘之间，会撑大这个盒子，后面会学如何取消）
• 边框线 – border
• 外边距 – margin（出现在盒子外面）

可以在样式中选中元素进行查看，也可以点击计算样式，直接查看整个盒子的可视图

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

2. 边框线

(1) 四个方向相同

属性名：border（bd）

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

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

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

(2) 单方向边框线

作用：实际运用中盒子的每个方向边框线可能不同，可以设置单方向边框线

属性名：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;
}

2. 内边距

作用：设置内容与盒子边缘之间的距离（如搜索框中的提示文字和盒子最左边缘之间的距离）

• 属性名：padding / 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: 10px;	四个方向内边距均为10px
四个值	padding: 10px 20px 40px 80px;	上10，右20，下40，左80
三个值	padding: 10px 40px 80px;	上10，左右40，下80
两个值	padding: 10px 80px;	上下10，左右80

3. 尺寸计算

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

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

解决：

• 手动做减法，减掉 border / padding 的尺寸
• 內减模式：添加属性box-sizing: border-box

4. 外边距

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

属性名：margin

提示：与 padding 属性值写法、含义相同（比如单独方向、多值写法），但外边距不会撑大盒子

5. 版心居中

所有板块在网页中都是左右居中的，将左右 margin 值 为auto（盒子要有宽度）

使用版心居中的效果时盒子必须有宽度值，否则无法实现效果

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

6. 清除默认样式

清除标签默认的样式，比如默认的内外边距，使用通配符或者将所有有默认样式的标签逗号隔开（小程序写不能用*）

/* 清除默认内外边距，可以在这里直接添加上内减模式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号，将这一项写在通配符中也可以 */
li {
  list-style: none;
}

7. 元素溢出

作用：控制溢出元素的内容的显示方式（如盒子范围小内容多）

属性名：overflow

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出都显示滚动条位置，垂直和水平都有）
auto	溢出滚动（溢出才显示滚动条位置）

div {
  width: 1000px;
  height: 200px;
  background-color: pink;
  overflow: hidden;
}

8. 外边距问题

(1) 合并现象

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

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

/* 合并后外边距变为50px */
.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

(2) 外边距塌陷

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

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

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

解决方法：

• 取消子级margin，父级设置padding，给父级加内边距，直接规避塌陷问题，推荐使用
• 父级设置属性 overflow: hidden
• 父级设置 border-top，但border会撑大盒子

9. 行内元素 – 内外边距问题

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

解决方法：给行内元素添加 line-height 可以改变垂直位置（行内元素垂直位置受行高控制）

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

10. 圆角

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

属性名：border-radius

属性值：数字+px / 百分比，指圆角半径

• 多值写法

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

取值个数	示例	含义
一个值	border-radius: 10px;	四个角均为10px
四个值	border-radius: 10px 20px 40px 80px;	左上10，右上20，右下40，左下80
三个值	border-radius: 10px 40px 80px;	左上10，右上左下40，右下80
两个值	border-radius: 10px 80px;	左上右下10，右上左下80

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

img {
  width: 200px;
  height: 200px;
  /* 写100px或者50%，百分比取值越小越不圆，但增大无效果，即圆角最大是50% */
  border-radius: 100px;
  border-radius: 50%;
}

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

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

11. 盒子阴影（拓展）

作用：给元素设置阴影效果（一个盒子的外面有阴影的感觉）

属性名：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;
}

 

四、综合案例-产品卡片

为了使网页在浏览器中加载的速度更快，注意CSS书写顺序如下：

1. 盒子模型属性
2. 文字样式
3. 圆角、阴影等修饰属性

1. HTML标签

<div class="product">
  <img src="./images/liveSDK.svg" alt="">
  <h4>抖音直播SDK</h4>
  <p>包含抖音直播看播功能</p>
</div>

2. CSS样式

<style>
  /* 清除默认样式，启动内减模式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
    
  /* 设置网页背景浅灰色 */
  body {
    background-color: #f1f1f1;
  }

  /* 设置盒子的宽高、背景颜色，设置外边框（上下50左右版心居中），给父级设置水平居中（使子级的图片和文字水平居中），设置盒子的内边距使内容向下移动，设置圆角 */
  .product {
    margin: 50px auto;
    padding-top: 40px;

    width: 270px;
    height: 253px;
    background-color: #fff;
    text-align: center;

    border-radius: 10px;
  }

  /* 设置标题文字的上下外边框，设置字号（一般是偶数），设置字体颜色 */
  .product h4 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #333;
    font-weight: 400;
  }

  /* 设置内容的字号和颜色 */
  .product p {
    font-size: 12px;
    color: #555;
  }
</style>

 

五、综合案例二 – 新闻列表

1. 整体布局

将整体内容分区域

<style>
/* 清除默认样式，启动内减模式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表标号 */
li {
  list-style: none;
}
/* 清除超链接下划线 */
a {
  text-decoration: none;
}
/* 整体盒子宽高，版心居中 */
.news {
  margin: 100px auto;
  width: 360px;
  height: 200px;
  /* background-color: pink; */
}
</style>

<div class="news"></div>

2. 标题区域

<style>
/* 设置标题区域的高度，背景颜色，描边，去掉左面的边框 */
.news .hd {
  height: 34px;
  background-color: #eee;
  border: 1px solid #dbdee1;
  border-left: 0;
}

/* 设置左边的白色盒子，超链接设置宽高不生效，改成块级元素使其生效，设置上右边框线，设置水平居中和行高，设置字体大小和颜色 */
.news .hd a {
  /* -1 盒子向上移动，使橙色边框和父级灰色边框对齐 */
  margin-top: -1px;
    
  display: block;
  border-top: 3px solid #ff8400;
  border-right: 1px solid #dbdee1;
  width: 48px;
  height: 34px;
  background-color: #fff;

  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #333;
}
</style>

<div class="hd"><a href="#">新闻</a></div>

3. 内容区域

<style>
/* 设置内边距 */
.news .bd {
  padding: 5px;
}
/* 将橙色方块载入li作为li的背景图，设置不重复，设置位置，给li设置左内边距，使后面添加的图片和文字向右移动 */
.news .bd li {
  padding-left: 15px;
  background-image: url(./images/square.png);
  background-repeat: no-repeat;
  background-position: 0 center;
}
/* 将图片图标载入a作为a的背景图，设置不重复和位置，设置左内边距，使文字向右移动，设置文字的大小颜色和行高 */
.news .bd li a {
  padding-left: 20px;
  background: url(./images/img.gif) no-repeat 0 center;

  font-size: 12px;
  color: #666;
  line-height: 24px;
}
/* 设置鼠标悬停的效果和悬停时文字的颜色 */
.news .bd li a:hover {
  color: #ff8400;
}
</style>

<div class="bd">
  <ul>
    <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
    <li><a href="#">在希望的田野上...</a></li>
    <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
    <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
    <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
    <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
  </ul>
</div>