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版本中已經移除了，能夠不用關注該屬性了。