CSS盒模型简介

最新推荐文章于 2024-06-13 06:20:33 发布

sunwan19941023

最新推荐文章于 2024-06-13 06:20:33 发布

阅读量115

点赞数

分类专栏： CSS3 文章标签： css html5

本文链接：https://blog.csdn.net/m0_49210479/article/details/108176088

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS盒模型

两种盒模型

content-box 内容盒：宽度只是内容的宽度
border-box 边框盒：宽度包括内容+ padding + border的宽度

举例来说，如果写以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .content-box {
  margin:25px;
  border: 5px solid red;
  padding: 10px;
  box-sizing: content-box;
  width: 100px;
}

.border-box {
  margin:25px;
  border: 5px solid red;
  padding: 10px;
  box-sizing: border-box;
  width:100px;
}
  </style>
</head>
<body>
  <div class="content-box">
    内容盒
  </div>
  <div class="border-box">
    边框盒
  </div>

</body>
</html>

虽然都设置了相同的宽度为100Px，但可以看到两种盒模型的宽度是不同的

内容盒的盒模型：只有内容宽度是100px,

边框盒的盒模型：padding + border + content = 100px

border-box更好用

请简述 CSS 盒模型是什么

参考答案

CSS 盒模型有两种，一种是 content-box 一种是 border-box。
content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border；
border-box 的宽度 width 表示内容区 + padding + border 的总和。
一般优先使用后者。

Margin合并

兄弟合并

第一个div的Margin-bottom （下外边距）会和第二个div的margin-top（上外边距）合并

父子合并

parent的上边距会和第一个孩子的上边距重合，parent的下边距会和最后一个孩子的下边距重合

这种margin合并只存在与上下外边距，左右外边距不会合并

取消Margin 合并

对于兄弟合并：用display:inline-block

对于父子合并：

第一种方法是给parent加Border，
第二种方法是给parent加Padding

margin能合并就是因为父子的Margin之间没有其他的东西，如果加了border或者Padding就等于在父子的Margin中间加了东西，因此就无法合并margin了

第三种方式是给parent加overflow:hidden

基本单位

长度单位

- px
- em 相对自身font-size的倍数

用overflow:hidden解决margin合并
parent div 表示parent下的所有div
parent>div parent下的第一个div

sunwan19941023

关注

0
点赞
踩
0

收藏

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

CSS盒模型两种盒模型content-box 内容盒：宽度只是内容的宽度 border-box 边框盒：宽度包括内容+ padding + border的宽度举例来说，如果写以下代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> .content-box {
复制链接

扫一扫