Css中的框模型怎么設置

這篇“Css中的框模型怎么設置”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Css中的框模型怎么設置”文章吧。

框模型別名:方框屬性、盒子屬性、盒子模型

框模型主要設置了元素的 外邊距、內邊距、邊框、寬度、高度

元素實際寬度 = 左外邊距 + 左邊框 + 左內邊距 + 寬度 + 右內邊距 + 右邊框+ 右外邊距;

什么是外邊距？即圍繞在元素邊框周圍的空白區域，頁面會為元素增加額外的空白距離，外邊距是透明的，位置在邊框外

屬性：margin

統一設置四個方向的外邊距

margin : value，如 margin:10px;

單方向設置

margin-left/right/top/bottom : value;

margin 簡寫

margin:value ; (四個方向)

margin:value(上下) value(左右);

margin:value(上) value(左右) value(下);

margin:value(上) value(右) value(下) value(左);

margin取值(單位) px,%;

auto : 如果左右外邊距設置為 auto的話，那么當前元素在它外層容器中就會水平居中顯示,多數使用在塊級元素在其外層容器內的水平居中

取值為負:

外邊距合并

當兩個垂直外邊距相遇時，他們將形成1個外邊距。稱為外邊距合并。外邊距的值，以大值為主。

問題

內外嵌套的div元素，如果設置內層div的margin-top，默認會作用于外層div的margin-top上，而內層沒有任何效果。

解決方案:

1、外層元素添加邊框

2、通過外層元素的上內邊距來實現

3、內邊距

什么是內邊距，即內容區域與邊框之間的控件

特點：元素一單設置了內邊距后，會擴大整個元素區域

屬性

padding : value; 上下左右

padding : value(上下) value(左右);

padding : value value value;

padding : value value value value;

padding-top:

padding-bottom:

padding-left:

padding-right:

css重寫 / 重置

取消了一些元素(ul,p,h2 ....)自帶的樣式

*{

margin:0px;

padding:0px;

}

ul{

padding:20px;

}

以上就是關于“Css中的框模型怎么設置”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。