專題：
行內元素與塊狀元素
塊狀元素
|-特點：默認占一整行、可以自動換行、可以設置大小
|-常見塊狀元素：div、li
行內元素
|-特點：不能設置寬高，內容有多大，我就有多大；
?　　??? ?對margin僅設置左右方向有效，上下無效；
??　　??? 對padding設置上下左右都有效，即會撐大空間
?　 ??? ?? 不會自動進行換行
|-常見的行內元素：span、input
行內塊狀元素
|-特點：不自動換行，能夠識別寬高，默認排列方式為從左到右

#kuaizhuang1{width: 200px;height: 100px;background-color: red;float: left; } #kuaizhuang2{width: 300px;height: 100px;background-color: gold;float: left; } #kuaizhuang3{width: 300px;height: 100px;background-color: green;float: left; } #kuaizhuang4{width: 300px;height: 100px;background-color: blue;float: left; } #hangneiyuansu{background-color: cyan;width: 1000px;height: 1000px;color: orange; } <!--塊狀元素--> <div id="kuaizhuang1"></div> <div id="kuaizhuang2"></div> <div id="kuaizhuang3"></div> <div class="qcfd"></div> <div id="kuaizhuang4">這是塊狀元素</div> <div class="qcfd"></div> <!--行內元素--> <span id="hangneiyuansu">這是行內元素</span>

?

塊狀元素與行內元素的相互轉換 display
|-轉行內 inline
|-轉塊狀 block（塊）
|-轉行內塊狀 在HTML5中，程序員可以自定義標簽，在任意定義標簽中，加入display:block;即可，當然也可以是行內或行內塊狀。-block

<!--相互轉換--> <div style="display: inline; width: 100px; height: 100px; ">這是塊狀元素轉行內元素測試</div><br /> <div style="display: inline-block; height: 100px; ">這是塊狀元素轉行內塊狀元素測試</div> <div style="width: 100px; height: 100px; ">這是塊狀元素這是塊狀元素</div> <span style="display: block; width: 200px; height: 200px; ">這是行內元素轉塊狀元素測試</span> <span style="display: inline-block; height: 200px; ">這是行內元素轉行內塊狀元素測試</span>

元素屬性
|-間距
|-margin 外邊距
|-padding 內間距
|-浮動
|--float：漂流
|--clear-both：清除漂流

#daohang{width: 510px;height: 50px;border: 1px solid blue; } .dh{width: 100px;height: 48px;background-color: burlywood;color: red;float: left;line-height: 48px;text-align: center;border: 1px solid red; } <div id="daohang"><div class="dh">語文</div><div class="dh">數學</div><div class="dh">英語</div><div class="dh">物理</div><div class="dh">化學</div> </div>

轉載于:https://www.cnblogs.com/mjwwzy/p/9033677.html

總結

以上是生活随笔為你收集整理的0428专题：行内元素与块状元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。