CSS入门三（盒子模型）

最新推荐文章于 2022-08-03 19:55:56 发布

原创

最新推荐文章于 2022-08-03 19:55:56 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

本文详细介绍了CSS盒子模型，包括盒子模型的概念、总宽度和总高度的计算，以及边框、内边距、外边距、背景和阴影等属性的设置，帮助初学者掌握网页布局的关键技巧。

文章目录

前言
一、盒子模型是什么？
二、盒子模型的总宽度与总高度
三、盒子模型的属性

前言

大家在以前的学习中，想使网页排版更加整齐的话，一般会使用表格，但是有时候表格不是很方便，很多我们想要的效果也做不出来，这时候，盒子模型能很好的解决这一切。

一、盒子模型是什么？

盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。把所有的网页元素都看成一个盒子，它具有：
content（内容）；
padding（内边距，也叫填充距离,内容和边框之间的距离）；
border（边框）
margin（外边距，盒子与其他元素之间的距离）；
四个属性，这就是盒子模型。
在这里插入图片描述

二、盒子模型的总宽度与总高度

每个盒子都有固定的大小
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

三、盒子模型的属性

1、边框属性

（1）边框样式

border-style: 属性值;

A:border-style的常用属性值有：
none：没有边框
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

B:border-style综合属性:
border-style:属性值 ; /四边均为此属性值/
border-style:属性值1 属性值2 ; /上下为属性值1、左右为属性值2/
border-style:属性值1 属性值2 属性值3; /上为属性值1、左右属性值2、下属性值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>003</title>
</head> 
<style>
  .a1 {
   
   
     border-style: dotted;
  }
  .a2 {
   
   
     border-style: dotted double;
  }
  .a3 {
   
   
     border-style: dashed solid dotted;
  }
</style>
<body>
    <div class="a1">勇气</div><br/>
    <div class="a2">暖暖</div><br/>
    <div class="a3">告白气球</div>
</body>
</html>

在这里插入图片描述

（2）边框宽度

border-width: 属性值;

在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。
注意：常用取值单位为像素。

border-style综合属性:
border-width:5px; /四边宽度均为5像素宽度/
border-width:5px 3px ; /上下边框5像素宽度、左右边框3像素宽度/
border-width:5px 3px 4px; /上边框5像素宽度、左右边框3像素宽度、下边框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>003</title>
</head> 
<style>
  .a1 {
   
   
     border-style: dotted;
     border-width: 5px;
  }
  .a2 {
   
   
     border-style: dotted double;
     border-width: 30px 9px;
  }
  .a3 {
   
   
     border-style: dashed solid dotted;
     border-width: 3px 9px 20px;
  }
</style>
<body>
    <div class="a1">勇气</div><br/>
    <div class="a2">暖暖</div><br/>
    <div class="a3">告白气球</div>
</body>
</html>

在这里插入图片描述

（3）边框颜色

border-color: 属性值;

A:属性值表示方法：
颜色值，例：red、green
#十六进制色值，例：#ccc
rgb(r,g,b)，例：rgb(30,0,0)
rgb(r%,g%,b%)

B:border-color综合属性:
border-color:#f00; /四边均为红色/
border-color:#f00 #00f ; /上下红色、左右蓝色/
border-color:#f00 #00f #0f0; /红色、左右蓝色、下绿色/

举例如下:

<!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>003</title>
</head> 
<style>
  .a1 {
   
   
     border-style: dotted;
     border-width: 5px;
     border-color:#f00; 
  }
  .a2 {
   
   
     border-style: dotted double;
     border-width: 30px 9px;
     border-color:#f00 #00f ;
  }
  .a3 {
   
   
     border-style: dashed solid dotted;
     border-width: 3px 9px 20px;
     border-color:#f00 #00f #0f0; 
  }
</style>
<body>
    <div class="a1">勇气</div><br/>
    <div class="a2">暖暖</div><br/>
    <div class="a3">告白气球</div>
</body>
</html>

在这里插入图片描述

（4）边框综合属性

border:宽度,样式,颜色;

border-top:上边框宽度 样式 颜色;

border-right:右边框宽度 样

最低0.47元/天解锁文章