替换元素与非替换元素
- 替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容。
例如"<img src="xx.jpg">浏览器会根据标签的src属性的值来读取图片信息并显示，<input type="radio">浏览器会根据input标签的type属性来决定是显示输入框还是单选按钮- 非替换元素:其内容直接显示在客户端的元素叫非替换元素
<h1>shizai</h1>
<div>shashi</div>包含块
在css中，有时一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称作包含块。包含块是一个相对的概念，比如子元素的初始化布局总是在父元素的左上角，这就是一个相对的概念。每个元素都会生成一个包含块，但这个包含块是虚无的，你看不到也摸不着，只是一个概念。包含块吧并不会限制它里面元素的大小，如果里面的元素比包含块大，那么超出的部分就会被溢出。一个元素的位置和尺寸与它的包含块息息相关，而元素会为它的子孙元素创建包含块，但这并不代表这个包含块就是它的父元素（不过这个父元素确实和包含块有着一些联系）。在某些情况下，我们可以将包含块理解为父元素。
包含块的创建
- 在HTMl中，根元素的包含块叫作初始包含块，具体创建由客户端决定
- 当定位置为fixed，则包含块由视口创建
- 当定位值为relative，static或没有设置定位属性，则包含块由最近的父元素或祖先元素创建
- 当定位值为absolute，则包含块由最近的定位值relative、absolute、fixed创建。如果没有定位的祖先元素，则包含块为初始包含块（具体由客户端决定）
- 当祖先元素时行内元素时，那么包含块取决于父元素或祖先元素的direction属性
当定位值为absolute，父元素没有设置定位时，包含块为初始包含块。而如果指定了其定位值，则包含块由其定位了的父元素或祖先元素创建
<style>
.box{
width: 100px;
height:100px;
border:1px solid red;
}
.box1{
position: absolute;
left:0;
top:0;
}
.box2{
position: relative;
left:100px;
}
.box2 .item,.box3,.box3 .item,.box4 .item{
position: absolute;
}
.box4{
position: fixed;
left: 200px;
}
</style>
<div class="box box1">父元素或祖先元素没有定位时</div>
<div class="box box2">
<div class="item">父元素或祖先元素定位值为relative</div>
</div>
<div class="box box3">
<div class="item">父元素或祖先元素定位值为absolute</div>
</div>
<div class="box box4">
<div class="item">父元素或祖先元素定位值为fixed</div>
</div>
当祖先元素时行内元素时，若direction值为ltr则右边补空白，若direction值为rtl则左边补空白
<style>
.box{
display: inline;
direction: ltr;
width: 100px;
height: 100px;
}
.box2{
display:inline;
direction: rtl;
width:100px;
height: 100px;
}
</style>
<div class="box">
<div class="item">direction:ltr</div>
</div>
<div class="box2">
<div class="item">direction:rtl</div>
</div>
控制框
控制框主要指display的属性所形成的框，包括块框，匿名块框，行内框，匿名行内框，插入框(run-in).
display的一些属性：
- block生成一个块框
- inline-block生成一个块框，元素内部按照块框格式化，但元素本身按照一个行内元素的形式来格式化（初始化）
- inline生成一个或多个行内框
- list-item生成一个块框和一个列表行内框
- none将不在结构中显示，不产生任何框，并且子孙元素也不产生任何框
- run-in将根据后一个元素来选择要生成的框
1.块级元素与块框
其中可以产生块元素的值为block，list-item，run-in，table。块级元素除了table外都会形成一个主块框，并且这个主块框只包含一个类型的框，就是说里面要么是块框，要么是行内框。主块框会为子孙元素建立包含块，生成内容。主块框参与块级格式化上下文。某些块级元素还会在主块框之外生成额外的框，比如当某个元素的display值为list-item时，它会生成一个额外的框用来放置那些标志，比如li元素前面的标志
2.匿名块框
<div>
这是一段<p>内容</p>
</div>div包括了一段文本和一个块框(p),此时div似乎既包括了行内框，又包括了一个块框，那么它会将所有的行内框都包含在一个匿名块框之中
3.行内框
可以产生行内元素的值为inline，inline-table，run-in
4.匿名行内框
<div>
这是一段<em>内容</em>
</div>div包括了一段文本和一个em元素，此时div似乎包含的都是一个行内框，那么它会为这段文本生成一个匿名行内框。在格式化table时，会形成更多的匿名行内框。
5.插入框(run-in)
如果一个元素的display值为run-in，那么它会根据后面的元素来确定它的类型应该是什么。这个属性在新的Chrome版本中已经移除了，可以不用关注该属性了。