关于css中盒状模型的宽度(box

2024-07-09 11:41| 来源: 网络整理| 查看: 265

1.在正常情况下设置一个盒状模型的width时，不包括内外边距和边框，它的宽度就是它本身

html

css

.div1 { height: 200px; width: 200px; background: red; }

设置了内外边距和边框后

css

.div1 { height: 200px; width: 200px; background: red; border: 50px solid black; margin: 50px; padding: 50px; }

减去内边距和边框，它本身的宽度还是200，加上后是400

2.去掉边距和边框，当给盒状模型的属性加上box-sizing后

css

.div1 { box-sizing: border-box; height: 200px; width: 200px; background: red; }

和原来没有什么差别

但是当给这个盒状模型加上边距和边框后

它的宽度还是200，并且包括了它的内边距和边框，并没有包括外边框

综上

当定义一个盒装模型的宽度时，只包含它本身的宽度，不包含边框和边距

当box-sizing的值为border-box的时候

定义一个盒状模型的宽度就已经把它的内边距和边框算在内了，扩大边框和内边距会缩小它本身的大小

【本文地址】

今日新闻