最终元素的总宽度计算公式是这样的:
总元素的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=内容高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
宽度 宽度=宽度+左右内边距+左右边框
高度 高度=高度+上下内边距+上下边框
盒子与盒子之间的距离
cssdiv {
/*上外边距*/
margin-top: 20px;
/*下外边距*/
margin-bottom: 20px;
/*左外边距*/
margin-left: 20px;
/*右外边距*/
margin-right: 20px;
}
cssdiv {
margin: 20px 10px;
}
cssdiv {
margin: 20px 20px 10px 10px;
}
同级垂直方向上的元素,设置相邻margin时会取最大值
box1和box2分别设置下外边距10px、上外边距10px;按常规理解box1和box2中间应该隔开20px,但是实际上只有10px。
代码
![[盒子模型-间距合并.jpg]]
![[盒子模型-间距合并-result.jpg]]
当box1的下外边距取值较大时,二者之间的距离按照较大者合并
代码
![[盒子模型-间距合并2.jpg]]
Result
![[盒子模型-间距合并-result2.jpg]]
由此验证了
同级垂直方向上的元素,设置相邻margin时会取最大值
父子级关系中,对子级添加margin-top依次实现隔开距离效果时,会发生magrin塌陷问题。造成margin值施加到父级上,造成元素整体下移
若元素(父级或子级)添加浮动则不会发生外边距塌陷
box2设置上外边距,按理应该和父级box1隔开,但是没有隔开而是施加到父级,导致元素整体向下偏移
代码
![[margin塌陷.jpg]]
Result ![[margin塌陷Result.jpg]]
border会影响盒子的可见框大小
不指定宽度会有一个默认宽度,一般为3px
可以通过该属性分别指定四个边框的大小
css.div {
/*以顺时针顺序指定,上右下左*/
border-width: 10px 20px 10px 20px;
/*三个值,上 左右 下*/
border-width: 10px 20px 10px;
/*两个字,上下 左右*/
border-width: 10px 20px;
}
border-color: 边框颜色
不指定颜色会默认使用字体颜色
可以通过该属性分别指定四个边框的颜色 border-color在简写中特殊值可为:transparent 边框颜色为透明
css.div {
/*以顺时针顺序指定,上右下左*/
border-color: blue gray blue gray;
/*三个值,上 左右 下*/
border-color: red blue red;
/*两个字,上下 左右*/
border-color: blue gray;
}
border-style: 边框样式
css.div {
/*以顺时针顺序指定,上右下左*/
border-style:solid none dotted solid;
/*三个值,上 左右 下*/
border-style: solid none solid;
/*两个字,上下 左右*/
border-style: solid none;
}
div{border: border-weigth border-style border-color
边框到内容区域之间的距离
设置padding后会改变盒子可见大小
css.div {
/*以顺时针顺序指定,上右下左*/
padding: 10px 20px 10px 20px;
/*三个值,上 左右 下*/
padding: 10px 20px 10px;
/*两个字,上下 左右*/
padding: 10px 20px;
/*一个值,四边*/
padding: 10px;
}
padding会导致元素宽高发生变化,需要减去对应的宽高
子元素在父元素的水平布局,必须满足:
margin-left+bodder-left+padding-left+width++padding-right+border-right+margin-right=父元素的width
若七个值相加之和不等于父元素的宽度,则属于过度约束,则浏览器会自动调整相应的外边距的值
尽量避免margin-right为负值
margin-top+border-top+padding-top+width+padding-top+border-top+margin-bottom=父元素高度
可以不等于,用来参考
可以使用box-sizing属性来改变盒子大小的计算方式,默认为content-box即width应用到内容区
border-box:则width和height值包括内边距和边框
本文作者:RKLS
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!