您的位置: 首页  >  文章  >  CSS盒模型简介

CSS盒模型简介

分类: 文章 • 2024-06-24 18:03:04

CSS盒模型

CSS盒模型简介

两种盒模型

  1. content-box 内容盒： 宽度只是内容的宽度
  2. 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>

CSS盒模型简介

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

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

CSS盒模型简介

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

CSS盒模型简介

 

border-box更好用

 

请简述 CSS 盒模型是什么

参考答案

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

Margin合并

兄弟合并

CSS盒模型简介

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

父子合并

CSS盒模型简介

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

 

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

取消Margin 合并

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

对于父子合并：

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

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

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

 

 

 

 

基本单位

  • 长度单位
    • px
    • em 相对自身font-size的倍数

 

 

 

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

相关推荐