文档流

文档流是指HTML元素的流动方向

inline 元素从左到右，到最右边会换行，如果最右边长度不够一个Inline元素，会自动切割为两半，一半在这一行，一半在下一行, 即会跨越两行
Block元素的流动方向是从上到下，每一个都另起一行
inline-block元素从左到右，但不会跨越两行

宽度

1、inline元素的宽度是内部inline元素宽度的和，不能用width指定
2、 block元素默认自动计算宽度(width: auto)，即能占多宽就占多宽，可用width指定

block元素的默认宽度不是100%，不是100%，不是100%
永远不要对Block元素写 width: 100% 3、inline-block默认宽度是内部inline元素宽度之和，可以用width指定宽度

inline元素是尽可能窄，block元素是尽可能宽

高度

inline元素的高度是由line-height间接确定(大部分情况下，Inline元素和Line-height一样，但如果字体不一样，会有细微的区别，比如差1-2px)，和height无关
block元素的高度是由内部文档流元素决定的，可以设Height
inline-block元素和Block元素一样 inline高度：

block和inline-block高度：

溢出

一个空的div的高度是0
一个空的span元素的高度不是0，因为span元素的高度是line-height决定的问题是，如果我设置的高度小于内容元素的高度怎么办？
这就是溢出：

overflow: hidden: 隐藏溢出内容
overflow: scroll: 显示滚动条，但问题是，如果内容宽度和高度没有溢出，也会有滚动条
Overflow: auto: 灵活地显示滚动条，只有在需要的时候才会出现滚动条

脱离文档流

回忆一下div的高度：
block元素的高度是由内部文档流元素决定的，这就意味着，如果元素脱离了文档流，block元素就不会计算它的高度。

有两种方式可以脱离文档流：

position: absolute/fixed
float: left

盒模型

什么是盒模型

分别是 content-box 内容盒 - 内容就是盒子的边界 border-box 边框盒 - 边框才是盒子的边界
公式 content-box width = 内容宽度
border-box width = 内容宽度 + padding + border
哪个好用 border-box 好用同时指定padding、width、border就知道为什么了

图片了解盒模型

代码举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="content-box">内容盒</div>
  <div class="border-box">边框盒</div>
</body>
</html>

.content-box{
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: content-box;
  width: 100px;
}

.border-box{
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: border-box;
  width: 100px;
}

显示效果：js.jirengu.com/xoyasowuku/…

注意

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

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

请简述 CSS 盒模型是什么

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

Margin合并

哪些情况会合并

父子margin 合并
兄弟margin 合并

如何阻止合并

父子合并用 padding/border 挡住
父子合并用 overflow:hidden 挡住
父子合并用 display:flex,不知道为什么
兄弟合并是符合预期的
兄弟合并可以用 inline-block 消除
一条条死记，每年CSS属性都可能增多，更新

兄弟合并

或者通常：

第一个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（字体像素）的倍数

颜色：

十六进制 #FF6600 或者 #F60
RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)-最后的1是代表透明度
hsl 颜色 hsl(360,100%,100%)

练习：画个彩虹

作品见我的GitHub:jiangwenxu.github.io/rainbow.css…

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="rainbow">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

* {
  box-sizing: border-box;
  padding: 0;
  margin:0;
}
body {
  background: white;                               **body变白，外面自动填充背景色**
}

.rainbow {
  height: 200px;
  overflow: hidden;                                **隐藏溢出内容，变半圆**
}

.rainbow div {                                     **父元素下的所有子元素**
  overflow: hidden;                                **取消子元素的margin合并**
}

.rainbow > div {                                   **父元素下的第一个子元素**
  height:400px;
  width:400px;
  background:red;
  border-radius: 50%;                              **方块变圆**
}


.rainbow > div > div {
  height:380px;
  width:380px;
  margin: 10px;
  background: hsl(60, 80%, 50%);
  border-radius: 50%;
}

.rainbow > div> div > div {
  background: hsl(120, 80%, 50%);
  height: 360px;
  margin: 10px;
  border-radius: 50%;
}
.rainbow > div> div > div > div {
  background: hsl(180, 80%, 50%);
  height: 340px;
  margin: 10px;
  border-radius: 50%;
}
.rainbow > div> div > div > div >div {
  background: hsl(240, 80%, 50%);
  height: 320px;
  margin: 10px;
  border-radius: 50%;
}
.rainbow > div> div > div > div >div > div {
  background: hsl(300, 80%, 50%);
  height: 300px;
  margin: 10px;
  border-radius: 50%;
}
.rainbow > div> div > div > div >div > div > div {
  background: hsl(330, 80%, 50%);
  height: 280px;
  margin: 10px;
  border-radius: 50%;
}
.rainbow > div> div > div > div >div > div > div > div {
  background: hsl(330, 80%, 100%);
  height: 260px;
  margin: 10px;
  border-radius: 50%;
}

效果如下：js.jirengu.com/bobosomego/…

总结：

用overflow:hidden取消margin合并，隐藏溢出内容
parent div 表示parent下的所有div
parent > div parent下的第一个div
border-radius: 50% 让方块背景变圆

【CSS全解】CSS基础 — 文档流、盒模型（含画彩虹）

文档流

宽度

高度

溢出