（9）css常用样式--盒子模型

最新推荐文章于 2024-03-01 11:37:06 发布

泽哥ins

最新推荐文章于 2024-03-01 11:37:06 发布

阅读量657

点赞数

分类专栏： CSS3 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_36213140/article/details/121546339

版权

CSS3 专栏收录该内容

53 篇文章 4 订阅

订阅专栏

一、CSS盒子模型介绍

盒子模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、边框 border、外边距 margin。

二、常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域：1.书写元素内容区域：width+height 2.盒子可以实体化的区域：width+height+padding+border 3.盒子实际占位的位置：width+height+padding+border+margin。

三、浏览器控制台盒模型图

四、宽度 width

作用：设置可以添加元素内容的区域的宽度。

属性值：

宽度width的特殊应用

如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。

五、高度height

作用：设置可以添加元素内容的区域的高度。

属性值：

高度height的特殊应用

如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

六、内边距 padding

作用：设置的是元素的边框内部到宽高区域之间的距离。

特点：可以去加载背景，不能书写嵌套的内容。属性值：常用px为单位的数值。 padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。

1.单一属性：

书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒模型</title>   
    <style>
       div {
           width: 300px;
           height: 300px;
           background-color: purple;
           padding-top: 10px;
           padding-right: 20px;
           padding-bottom: 30px;
           padding-left: 40px;
       }
    </style>
</head> 
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

padding支持简写方式书写

有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性。padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。根据四个方向属性值不同，padding 有多种值的书写表示方法。根据 padding 的属性值的个数不同，区分了四种表示法：

1.四值法

设置四个属性值，分配方向上、右、下、左。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>   
    <style>
       div {
           width: 300px;
           height: 300px;
           background-color: purple;
           padding: 20px 20px 20px 20px;
       } 
    </style>
</head> 
<body>
    <div>
        <p>这是一段文字</p>
    </div>
</body>
</html>

2.三值法

设置三个值分配给上、左右、下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>   
    <style>
       div {
           width: 300px;
           height: 300px;
           background-color: purple;
           padding: 10px 20px 20px;
       } 
    </style>
</head> 
<body>
    <div>
        <p>这是一段文字</p>
    </div>
</body>
</html>

3.二值法

设置两个值，分配给上下、左右。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>   
    <style>
       div {
           width: 300px;
           height: 300px;
           background-color: purple;
           padding: 10px 20px;
       } 
    </style>
</head> 
<body>
    <div>
        <p>这是一段文字</p>
    </div>
</body>
</html>

4.单值法

设置属性值只有一个，分配方向上右下左，四边的值相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>   
    <style>
       div {
           width: 300px;
           height: 300px;
           background-color: purple;
           padding: 20px;
       } 
    </style>
</head> 
<body>
    <div>
        <p>这是一段文字</p>
    </div>
</body>
</html>

案例：

制作三边内边距相同，一边不同。

方法①：使用四值法、三值法，进行属性值设置。

<style>
      div{padding: 10px 10px 10px 20px;}
</style>

<style>
      div{padding: 10px 10px 20px;}
</style>

方法②：利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分。

<style>
        div{
           padding: 10px;
           padding-bottom: 20px;
        } 
</style>

注：其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分。

七、边框 border

作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。

属性值：由三个值组成，分为线的宽度、线的形状、线的颜色。

border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。

border属性四边法

按照属性值的类型划分

线宽：border-width 线型：border-style 颜色：border-color

（1）线宽 border-width：

作用：设置边框线的宽度。属性值：常用px形式的数值，四个方向都有边框，属性值类似于 padding，也有四种值的写法。

1.border-width的四值法：

2.border-width的三值法：

3.border-width的二值法：

4.border-width的单值法：

（2）线型border-style：

1.border-style的四值法：

2.border-style的三值法：

3.border-style的二值法：

4.border-style的单值法：

八、边框颜色 border-color

作用：设置边框的颜色。属性值：颜色名或颜色值，整体类似 padding 综合属性写法。

1.boder-style的单值法：

2.boder-style的二值法：

3.border-style的三值法：

4.border-style的四值法：

九、根据边框的方向划分

上边框：border-top右边框：border-right下边框：border-bottom左边框：border-left每个单一属性都必须与复合属性 border 一致，设置三个属性值。

根据方向和类型，进一步细分，类似 border-top 的单一方向属性，也可以根据属性值类型继续进行单一属性划分。单一属性写法：border-方向-类型。注意：细分时必须先写方向划分再写类型划分，否则属性名错误。

错误现象：

十、外边距 margin

作用：设置的是盒子与盒子之间的距离。特点：不能渲染背景。属性值：常用 px 为单位的数值。外边距的设置方式与内边距 padding 一模一样的。

1.单一属性

margin‐top: 20px;
margin‐right: 20px;
margin‐left: 20px;
margin‐bottom: 10px;

2.复合属性的四种值的写法

margin: 10px 20px 30px 40px;（上右下左）
margin: 10px 20px 30px;（上左右下)
margin: 10px 20px;（上下左右）
margin: 10px;（上下左右四个一样）

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（9）css常用样式--盒子模型

一、CSS盒子模型介绍盒子模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、边框 border、外边距 margin。二、常见盒模型区域盒模型的属性中，根据不同属性的效果，可以划分区域：1.书写元素内容区域：width+height 2.盒子可以实体化的区域：width+height+padding+border 3.盒子实际占位的位置：width+height+padding+border+margin。三、浏览.
复制链接

扫一扫