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版本中已经移除了，能够不用关注该属性了。