2015-03-14 21:43:11 閱讀：
0 收藏：
0[點我收藏+]
標籤：這兩天在準備實習的面試和筆試，準備複習一下這些基礎的概念，避免自己處於一種僅腦袋理解嘴巴不能表述出來的狀態。
塊狀元素和行內元素的概念是在css頁面布局這個地方出現。主要是將html標籤按照一定的特性分成2類：塊狀元素和行內元素（內聯元素）。
首先概念上理解一下：
塊狀元素：
塊狀元素（block element），字面理解就是乙個方塊嘛，它一般是其它元素的容器元素，可以容納塊狀元素和行內元素，它預設是不會和其它元素同一行的，即相當於兩個塊狀元素寫一塊是垂直布局的。最常用塊狀元素是div和p。
css樣式只是設計了div的寬度和高度以及背景顏色。效果如下：行內元素（inline element）又稱內聯元素，個人覺得行內元素能讓人更通俗一些去理解。行內元素一般基於語義元素，它只能夠容納文字以及其它的行內元素。常見的行內元素有 超連結a、span、元素img（記得是行內元素，我剛開始總會將img記成塊狀元素，可能是因為一大塊的這樣會讓我混淆，但是img是屬於行內替換元素(replace inline element)，屬於inline element類的。
行內元素跟塊狀元素的差異基本是，行內元素並不從新的一行開始，水平方向會乙個個接著。每個塊狀元素會從新的一行開始。
效果如下：你們快看哪！它們真的沒有換行！
強調一下：當css對內聯元素定義這兩屬性中的一種之後，這些行內元素會具有塊狀元素屬性！例如會重新的一行開始，就像後面跟了乙個換行符一樣。
1、display：block;
2、float:left/right;
小例子：
當我對img還有a新增display: block;之後，它們就像塊狀元素一樣，從新的一行開始了，而且具有了width,heigh屬性！自己去試試，如果僅僅是行內元素，你不去設定它為display: block; 是沒有辦法設定它的寬高的，它顯示的寬度和告訴就是被儲存的高度和寬度，就像對於img來說是比較不方便的。所以，這是個很好用的屬性。
行內元素 塊狀元素 行內塊狀元素
頁面元素主要分為三類 塊元素 行內元素，行內塊元素。三者可以通過display進行相互轉換 display block 塊元素 display inline 行內元素 display inline block 行內塊元素 1 塊元素 塊狀元素代表性的就是div，其他如p h1 h6 ul ol dl...
行內元素 塊狀元素 內聯塊狀元素
行內元素 div,h1 h6,p,pre,ul,ol,li,form,table等 常見的行內元素 無法自動換行，無法設定寬高 有 a,img,span，i 斜體 em 強調 sub 下標 sup 上標 label等。常見的內聯塊狀元素 擁有內在尺寸，可設定高寬，不會自動換行 有 button,in...
塊狀元素和行內元素
1.塊級元素 2.行內元素 3.塊級元素與行內元素的區別 1 塊級元素會獨佔一行，其寬度自動填滿其父元素寬度 行內元素不會獨佔一行，相鄰的行內元素會排列在同一行，直至一行排不下才會換行，其寬度隨元素的內容而變化。2 塊級元素可以包含行內元素和塊級元素 行內元素不能包含塊級元素。3 行內元素設定wid...