替换元素与非替换元素
- 替换元素:是指浏览器根据元素的标签和属性来决定元素的具体内容。
例如"<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版本中已经移除了,可以不用关注该属性了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。