当前位置：首页 > article >正文

CSS教程（八）- 盒子模型

article 2024/11/13 22:24:35

1、介绍

核心内容
- 盒子模型、浮动和定位，帮助我们实现页面布局
本质：页面布局过程
1. 准备好相关的页面元素，网页元素基本都是盒子 Box
2. 利用 CSS 设置盒子的样式，摆放到相应的位置
3. 向盒子中填充相应内容
  
  网页布局的核心本质：就是利用 CSS 摆盒子。
概念
- 就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
组成
- 封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

2、边框

1 边框样式

属性：border-style
作用：指定要显示的边框类型
取值
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
示例

2 边框宽度

属性：border-width
作用：指定四个边框的宽度
取值：以 px、pt、cm、em 单位。
示例

3 边框颜色

属性：border-color
作用：用于设置四个边框的颜色。
取值：
- name - 指定颜色名，比如 “red”
- HEX - 指定十六进制值，比如 “#ff0000”
- RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
- transparent
说明：如果未设置 border-color，则它将继承元素的颜色。

示例

p.one {
  border-style: solid;
  border-color: red green blue yellow;   /* 上红、右绿、下蓝、左黄 */
}

4 边框简写

属性：border

写法

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

/* 单独设置某一个边的边框 */
border-top: border-width border-style border-color;
border-bottom: border-width border-style border-color;
border-left: border-width border-style border-color;
border-right: border-width border-style border-color;

示例

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

5 边框圆角

属性：border-radius
作用：用于向元素添加圆角边框
取值：px 或百分比
分类
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
说明
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
示例

3、内边距

属性：padding
作用：用于定义边框与内容之间的距离。
分类
- padding-left
- padding-right
- padding-top
- padding-bottom

语法

padding语法	表达含义
padding: 5px;	1个值，表示上下左右内边距都是5像素
padding: 5px 10px;	2个值，表示上下内边距是5像素，左右内边距是5像素
padding: 5px 10px 20px;	3个值，表示上内边距是5像素，左右内边距10像素，下内边距是20像素
padding: 5px 10px 20px 30px;	4个值，表示上内边距是5像素，右内边距10像素，下内边距20像素，左内边距30像素

示例
说明
- 如果盒子已经有了宽度和高度，再指定内边距，则会撑大盒子。
解决方案
- 如果要保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小

4、外边距

1 介绍

属性：margin
作用：用于在任何定义的边框之外，为元素周围创建空间（盒子和盒子之间的距离）。
分类
- margin-top
- margin-right
- margin-bottom
- margin-left
取值
- auto：浏览器来计算外边距
- length：以 px、pt、cm 等单位指定外边距
- %：指定以包含元素宽度的百分比计的外边距
- inherit：指定应从父元素继承外边距

简写方法

margin: top/right/bottom/left
margin: top/bottom  right/left
margin: top  right/left  bottom
margin: top  right  bottom  left

示例
应用
- 让块级盒子 水平居中，必须满足两个条件
  1. 盒子必须指定宽度（width）
  2. 盒子的 左右外边距 都设置为 auto
- 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
示例

2 外边距合并

1、相邻块元素垂直外边距的合并

介绍
- 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，取两个值中的较大者，这种现象被称为 相邻元素垂直外边距的合并
示例

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

介绍
- 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
示例

解决方案

使用边框或内外边距：给元素添加边框或内边距可以阻止外边距塌陷。

<div class="container">  
    <div class="box" style="margin-bottom: 20px; border-bottom: 1px solid transparent;"></div> 
    <div class="box" style="margin-top: 30px;"></div>  
</div>

使用浮动：浮动元素不会参与外边距塌陷。

<div class="container">  
    <div class="box" style="margin-bottom: 20px; float: left;"></div>  
    <div class="box" style="margin-top: 30px; clear: both;"></div>  
</div>

使用 overflow 属性：给父元素设置 overflow: hidden、overflow: auto 或 overflow: scroll 可以创建一个新的块格式化上下文（Block Formatting Context, BFC），从而避免外边距塌陷。
```
<div class="container" style="overflow: hidden;">  
    <div class="box" style="margin-bottom: 20px;"></div>  
    <div class="box" style="margin-top: 30px;"></div>  
</div>
```

使用伪元素：通过添加伪元素（如 ::before 或 ::after）并设置适当的样式，可以创建 BFC，从而避免外边距塌陷。

<div class="container">  
    <div class="box" style="margin-bottom: 20px;"></div>  
    <div class="clearfix"></div>  
    <div class="box" style="margin-top: 30px;"></div>  
</div>  

<style>  
    .clearfix::after {  
        content: "";  
        display: table;  
        clear: both;  
    }  
</style>

3、清除内边距

介绍
- 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
```
*{
    padding: 0;    /* 清除内边距  */
    margin: 0;      /* 清除外边距  */
}
```
注意
- 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以。

5、盒子阴影

语法
- box-shadow: h-shadow v-shadow blur spread color inset;

参数

值	描述
h-shadow	必需，水平阴影的位置，可以为正值（向右）或负值（向左）。
v-shadow	必需，垂直阴影的位置，可以为正值（向下）或负值（向上）。
blur	可选，模糊半径，值越大，阴影越模糊。如果不需要模糊效果，可以设置为 0。
spread	可选，阴影尺寸，值可以是正值（扩展阴影）或负值（收缩阴影）。
color	可选，阴影的颜色，可以使用颜色名称、十六进制值、RGBA、HSLA 等。
insert	可选，将外部阴影（outset，默认）修改为内部阴影（inset）

注意
1. 默认是外部阴影（outset），但不可以写这个单词，否则阴影无效
2. 盒子阴影不占空间，不会影响其他盒子排列
示例

6、文字阴影

语法
- text-shadow: h-shadow v-shadow blur color;

参数

值	描述
h-shadow	必需，水平阴影的位置，可以为正值（向右）或负值（向左）。
v-shadow	必需，垂直阴影的位置，可以为正值（向下）或负值（向上）。
blur	可选，模糊半径，值越大，阴影越模糊。如果不需要模糊效果，可以设置为 0。
color	可选，阴影的颜色，可以使用颜色名称、十六进制值、RGBA、HSLA 等。