css中几个重要概念

替换元素与非替换元素

• 替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容。

 例如"<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版本中已经移除了，可以不用关注该属性了。

本文转载于猿2048:css中几个重要概念