本篇文章給大家帶來的內容是關于css的盒子模型屬性有哪些？css盒子模型相關屬性的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1、盒子模型圖

2、一個簡單的盒子模型

box.html

盒子模型

標準文件流不能制作精美的網頁；只有脫離標準文檔流(脫標)，才可以制作我們想要的網頁。 脫標的方法：浮動，絕對定位，固定定位； 浮動(float)：可以讓元素并排顯示，并設置寬高； 屬性值：left(左浮動)；right(右浮動)； 浮動的元素會貼父盒子邊顯示,如果顯示不下，在下一行根據浮動方向(貼上一個相同浮動方向的盒子)顯示在父盒子中

浮動的性質： 1浮動的元素脫離標準流，不再區分塊級元素和行內元素 能夠讓浮動的元素并排在一行顯示，并設置寬和高。 2.浮動的元素沒有margin塌陷，盒子的距離是margin-top和margin-bottom之和 3.浮動的元素會貼邊顯示，有方向之分， 4.浮動的元素不會鉆盒子 5.浮動的元素會讓出標準流的位置(兩層) 6.字圍效果

3、css盒子模型相關屬性之width/height是指內容的寬度和高度

box.css.box1{ border:2px solid red; height:200px; width: 700px; }.box2{ border:2px solid #123456; height:150px; width:670px; }

4、css盒子模型相關屬性之邊框(寬度，樣式，顏色)

border: px style color;

border-top: px style color;

寬度：border-width;單個邊框：border-top-width;

box.css

.box1{ border:2px solid red; height:200px; width: 700px; border-top-width: 23px; }

樣式：border-style

屬性值：dotted(點)

dashed(虛線)

solid(實線)

double(雙線)

box.css.box1{ border:5px double red; height:200px; width: 700px; border-top-width: 11px; border-top-style: dashed; }.box2{ border:2px solid #123456; height:150px; width:670px; }

5、css盒子模型相關屬性之內邊距–padding

設置單個方向：padding-top/padding-bottom/padding-left/padding-right

box.css

.box2{ padding-top:22px; padding-left: 11px; padding-right: 22px; padding-right: 24px; border-bottom:2px solid #123456; height:150px; width:670px; }

6、css盒子模型相關屬性之外邊距-margin

設置單個方向：margin-top/margin-bottom/margin-left/margin-right

box.css.box2{ padding-top:22px; padding-left: 11px; padding-right: 22px; padding-right: 24px; border-bottom:2px solid #123456; height:150px; width:670px; margin-top: 23px; margin-bottom: 45px; margin-left: 45px; margin-right: 45px; }

7、css盒子模型相關屬性之輪廓:作用在border之外的樣式

outline-width

outline-style：

hidden(隱藏)

dotted(點)

dashed(虛線)

solid(實線)

double(雙線)

outline-color:

或者：

outline: px style color;

總結

以上是生活随笔為你收集整理的css中 盒模型的属性包括(),css的盒子模型属性有哪些？css盒子模型相关属性的介绍...的全部內容，希望文章能夠幫你解決所遇到的問題。

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