怎样才算一个盒子?
页面上的每个元素都可以看做一个盒子,但display为inline的内联元素,宽高由内容决定,无法设置宽和高。
盒子最重要的5个属性
- width:内容的宽度(不是盒子的宽度)
- height: 内容的高度(不是盒子的高度)
- padding:内边距。
- border:边框。
- margin:外边距。
浏览器给<body>
默认的外边距margin大小是8个像素
上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
CSS 盒模型 (标准盒模型)默认
标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width。
background-color将填充所有border以内的区域。
一些元素,默认带有padding
,比如ul标签,不加任何样式的ul,也是有40px的padding-left。
将标准盒模型修改为IE盒模型的方法: 给元素添加样式
box-sizing:border-box;
IE 盒模型
IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。
将IE盒模型修改为标准盒模型的方法: 给元素添加样式
box-sizing:content-box;
盒子占据的空间大小
宽度/高度 = content+padding+border+margin