2-3.CSS-盒模型

最新推荐文章于 2024-07-25 08:14:42 发布

一生注定学霸命

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量66

点赞数

分类专栏： HTML与CSS基础文章标签： css

本文链接：https://blog.csdn.net/qq_40282016/article/details/115426934

版权

HTML与CSS基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

两种盒模型

1.示意图

content box：宽度包含内容区，叫内容盒模型
border boxcontent：宽度包含border，则叫border盒模型
外边距、边框、内边距、内容区
一般border box更好用

2.实例

<body>
  <div class="content-box">content box</div>
  <div class="border-box">border box</div>
</body>

.content-box{
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: content-box;
  width: 100px;/*实际可见宽度为：100+15*2+5*2*/
}

.border-box{
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: border-box;
  width: 100px;/*实际可见宽度为：100*/
}

在这里插入图片描述

3.margin合并

实例：两个孩子之间的距离依旧是30px，margin-bottom和margin-top会合并

<body>
  <div class="parent">
    <div class="child1">第一个孩子</div>
    <div class="child2">第二个孩子</div>
  </div>
</body>

.parent{
  border: 2px solid red;
}

.child1{
  border: 2px solid blue;
  margin-bottom:30px;/*下边距*/
}
.child2{
  border: 2px solid green;
  margin-top: 30px;/*上边距*/
}

取消合并添加：

.child1{
  border: 2px solid blue;
  margin-bottom:30px;
  width: 100%;/*inline-block宽度为元素宽度*/
  display: inline-block;/*不合并*/
}

哪些情况会合并
父子margin合并：第一个孩子的上边距、最后一个孩子的下边距均和父级的内边距合并
兄弟margin合并
只有上下合并，左右不会合并
如何取消合并：父子之间有padding/border挡住、或者overflow: hidden
加个外边距：

.parent{
  border: 2px solid red;
  background: red;
  border-top: 10px solid green;/*加个帽子，则孩子的上边距和父级不合并*/
}

加个内边距：

.parent{
  border: 2px solid red;
  background: red;
  padding-top: 1px;/*内边距是透明的*/
}

4.基本单位
长度单位

px 像素
em 相对于自身 font-size的倍数（如：3em=3*font-size）
百分数
整数
rem
vw和vh

颜色

十六进制：#FF6600 或者 #F60
RGB颜色：rgb(0,0,0) 或者 rgba(0,0,0,1)
其中a表示透明度，0是全透明，1是不透明，0.5半透明
hsl颜色：hsl(色值,饱和度,明度)

一生注定学霸命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-3.CSS-盒模型

两种盒模型1.示意图content box：宽度包含内容区，叫内容盒模型border boxcontent：宽度包含border，则叫border盒模型外边距、边框、内边距、内容区一般border box更好用2.实例<body> <div class="content-box">content box</div> <div class="border-box">border box</div></body&gt
复制链接

扫一扫

专栏目录