CSS元素的盒類型
阿新 • • 發佈：2018-01-14
內部 css盒模型 換行符 img css簡介 自己 技術 post 自己的
一、css簡介
CSS是Cascading Style Sheet的縮寫，中文稱層疊樣式表。HTML中的元素都有著自己的屬性和默認樣式，CSS控制HTML內標簽顯示不同布局樣式。控制對應html標簽顏色、字體大小、字體、寬度、高度、浮動等樣式。
HTML猶如一個人，而CSS則是服飾。通過不同服飾打扮出不同風格人。HTML元素可以通過style屬性來使用CSS樣式。
<a href="HTTP://WWW.BAIDU.COM" style="background:red">百度</a>
二、css的盒模型
可見元素會在頁面中占據一個矩形區域，該區域就是元素的盒子，由四部分組成；
三、三種常見的元素的盒類型
1、塊級元素
將css的display屬性設置為block時會創建一個塊級元素。塊級元素會在垂直方向跟周圍元素有所區別，通常在元素的前後放置換行符也可以達到同樣的效果，display屬性的block值可以應用在任何元素上。
1 <body>
2 塊級標簽
3 <a href="HTTP://WWW.BAIDU.COM" style="display:block">百度</a>
4 塊級標簽
5 </body>
顯示效果
2、行內元素
將display屬性的值設置為inline值會創建一個行內元素，視覺上和周圍元素沒有區別。使用inline值時，瀏覽器會忽略某些屬性，如width、height、margin等。
1 <body>
2 塊級標簽
3 <a href="HTTP://WWW.BAIDU.COM" style="display:inline">百度</a>
4 塊級標簽
5 </body>
顯示效果
3、行內-塊級元素
將display屬性設置為inline-block值會創建一個其盒子混合了塊和行內特征的元素，盒子整體上作為行內元素顯示，這意味著垂直方向上該元素和周圍的元素並排顯示，沒有區別。但盒子內部作為塊級元素顯示，這樣，width、height、margin屬性都可以用在盒子上。
1 <body>
2 塊級標簽
3 <p style="display:inline-block;height:70px;border:solid 2px black" >hello world</p>
4 塊級標簽
5 </body>
顯示效果
CSS元素的盒類型