css盒子模型

css盒子模型

1.在html所有的标签都可以设置

宽度高度， 指定存放内容的

内边距，

外边距，

边框

增加padding和border，元素的宽高会增加，想要保持原有的宽高必须保证内容的宽高

2.内容的宽度和高度

通过标签的width/height属性的宽度和高度

3.元素的宽度和高度

宽度=左边框+左内边距+width+右边边距+右边边框

4.元素空间的宽度和高度

宽度=左边外边距+左边框+左内边距+width+右边边距+右边边框+右边的外边距

5.盒子的box-sizing

1）box-sizing:border-box;

可以保证给盒子增加padding，border盒子的宽度和高度不变

2.）原理就是减去了内容的宽度和高度

3）content-box 元素宽高=边框+内边距+内容的宽搞

border-box=width 元素的宽高就等于内容的宽高