CSS盒子模型

最新推荐文章于 2023-04-01 19:20:54 发布

小花fafa

最新推荐文章于 2023-04-01 19:20:54 发布

阅读量315

点赞数 1

分类专栏： css学习文章标签： css 前端

本文链接：https://blog.csdn.net/laisy334514/article/details/119426252

版权

css学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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;
 }

4.CSS3盒子模型

box-sizing (用于指定模型）

: content-box （默认） （盒子大小 = width + padding + border )

: border-box （盒子大小 = width ) (前提是border + padding ≤ width）

=>在给盒子设置内边距或者边框之后发现盒子变大了就是这个原因，可以将宽度设置为原来的减去padding和border的值，或者添加

box-sizing:border-box;

小花fafa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

1.边框 1.border-width ---- 粗细 2.border-style ---- 样式 1.none 2.solid ---- 实线 3.double ---- 双实线 4.dashed ---- 虚线 5.dotted ---- 点线 ...
复制链接

扫一扫