CSS盒子模型（一）

2024-03-07 21:24:45

1.边框

1.border-width ---- 粗细

2.border-style ---- 样式

1.none

2.solid ---- 实线

3.double ---- 双实线

4.dashed ---- 虚线

5.dotted ---- 点线

6.groove ---- 3D凹槽

7.ridge ---- 菱形

8.inset ---- 3D凹边

9.outset ---- 3D凸边

3.border-color ---- 颜色

4.复合写法

 border:1px solid pink;

也可以拆开写 border-top | border-left | border-right | border-bottom

边框会影响盒子的实际大小

2.内边距

设置边框与内容之间的距离

padding-left | right | top | bottom

复合写法：

      padding:5px;

上下左右的内边距都是5px

      padding:5px 10px;

上下内边距是5px , 左右是10px

      padding:5px 10px 20px;

上=5px 左右=10px 下=20px

      padding:5px 10px 20px 30px;

按照上右下左的顺序分别对应

padding 会影响盒子的大小

3.外边距

控制盒子与盒子之间的距离

margin-left | right | top | bottom

简写和padding一样

1. 通过margin可以让块级盒子水平居中

条件：盒子必须指定了宽度，左右边距都设置为auto

<!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>Document</title>
  <style>
    .big {
      width: 200px;
      height: 100px;
      margin: 0 auto;
      background-color: blueviolet;
    }
    .little {
      width: 20px;
      height: 20px;
      margin: 0 auto;
      background-color: coral;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="little"></div>
  </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>Document</title>
  <style>
    .big {
      width: 200px;
      height: 100px;
      margin: 20px auto;
      background-color: blueviolet;
    }
    .little {
      width: 20px;
      height: 20px;
      margin: 50px auto;
      background-color: coral;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="little"></div>
  </div>
</body>
</html>

此时出来的效果就是大盒子距离上端50px，而小盒子距离父盒子上方没有距离效果

解决方案：

1.为父元素定义上边框

border-top: 1px solid transparent;

2.为父元素定义上内边距

padding-top: 1px;

3.为父元素添加overflow:hidden

overflow: hidden;

都能解决这一问题：

最后：网页元素很多都有默认的内外边距，一般在最开始会先清除

*{
    padding:0;
    margin:0;
 }

码农公寓