css基础教程-盒子模型详解(二)

爱敲代码的小蒋

已于 2024-07-31 17:58:31 修改

阅读量227

点赞数 5

文章标签： css 前端

于 2024-07-31 17:57:21 首次发布

本文链接：https://blog.csdn.net/iamjiangxiaoqian/article/details/140828856

版权

1.盒子模型介绍

所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型结构图:

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.内容

作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小
属性值:width和height
取值:数字+px

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
           width: 200px;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

在浏览器中按F12进行检查,就可以看到盒子的内容区域正是设置的 width: 200px; width: 200px;

3.边框

属性名:border (这是一个复合属性)
属性值:数字+px 线条的种类 颜色(不分先后顺序)

线条的种类有两个最常用的: solid(实线) dashed(虚线)
示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border: 10px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

border也可以给指定的方向设置边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border-left: 3px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

4.内边距

属性名:padding
取值:数字+px

padding可以当作复合属性来使用,可以给单独的方向设置内边距,最多取4个值(上下左右)

5.外边距

外边距和内边距的写法一样,可以给四个方向都设置外边距,也可以给单独的方向设置外间距
取值的个数效果都是一样的.掌握内边距的写法,外边距就很容易了

接下来说外边距的两个问题:外边距的合并和外边距的塌陷

外边距的合并
垂直布局的块元素,上下的margin会合并

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
    }
    
    .one{
      margin-bottom: 20px;
    }
    .two{
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是一个div</div>
</body>
</html>