盒⼦模型的内边距属性外边距属性盒⼦的宽与⾼学习笔记
盒⼦模型的内边距属性/外边距属性/计算盒⼦的宽与⾼
⼀、内边距属性：
为调整内容在盒⼦中的显⽰位置，可为元素栓之内边距（内填充），即为元素内容与边框之间的距离
1、内边距取值
设置⽅式与div的边框类似
padding-top：上边距;
padding-right：右边距;
padding-bottom：下边距;
padding-left：设置四周边距:
2、内边距其它的取值
内边距是复合属性⽰例代码：padding:5px 3px 4px/*设置上内边距为5px，左右内内边距为3px*，下内边距为4px*/
auto:⾃动（默认值）
相对于⽗元素或浏览加宽度的百分⽐
pdding:5%;/*段落内边距为⽗元素边框宽度的5%*/
注意：如果设置内外边界的属性为百分⽐，宽度岁⽗元素的wigdt变化，和⾼度height⽆关
⼆、外边距属性
margin属性值可以为百分比
通畅⽹页由多个盒⼦排列⽽成，可以通过外边距属性设置盒⼦与盒⼦之间的距离，外边距就是元素边框与相邻元素之间的距离注意：和内边距不同，外边距margin允许取值为负数
1、定义外边距
margin-top；上外边距；
margin-right；右外边距；
margin-bottom：下外边距;
margin-left：左外边距；
margin：上下左右外边距；
2、块级元素⽔平居中：
当我们对块级元素设置width宽度，同时将左右的外边距设置为auto时，可以使其居中
margin:0 auto; /*实现⽔平居中*/
margin:5px auto /*实现⽔平居中，且上下拉开5px外边距*/
3、内外边距的清除的重要性
为了⽅便控制⽹页中的元素，制作⽹页是通常先清除元素的默认内外边距
*{
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}
三、盒⼦的宽与⾼
每个盒⼦都有固定的⼤⼩wigth(宽度)height(⾼度)
Box{
width:300px;/*设置盒⼦的宽度*/
height:300px;/*设置盒⼦的⾼度*/
}
1、盒⼦宽度的解析
⼀个盒⼦的整体宽度``是由盒⼦的width和+左外边距+右外边距总和共同决定的。
⼀个盒⼦的整体⾼度``是由盒⼦的height和+上外边距+下外边距+上下边框宽度总和共同决定的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。