重温基础之-css盒模型

所有html元素都可以看作盒子。

css盒模型本质上是一个盒子,封装周围的html元素,它包括:外边距,边框,内边距和实际内容。

重温基础之-css盒模型

默认情况下,一个元素的总宽度计算方式:

总宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距。

div{

width:300px;

padding:10px;

border:1px solid #eee;

margin:10px;

}

该div的宽度是300px,但它在页面上所占据的总宽度是:10+1+10+300+10+1+10=342px;

这实际上是css中设置box-sizing:content-box的效果,也就是说css盒子模型默认是box-sizing的content-box值。

box-sizing还有一个常用属性是border-box。其效果导致元素总宽度计算为:

总宽度=左外边距+宽度+右外边距。

宽度=左边框+左内边距+实际内容宽度+右内边距+右边框。

拿上述例子:div的总占宽度为10+300+10=320px;   div的实际内容宽度为:300-10-10-1-1=278px

上一篇:回味Python2.7——笔记4


下一篇:notepad++ remove duplicate line