css盒子模型
css盒子模型
css盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距)- 清除边框区域。Margin没有背景颜色,它是完全透明
- Border(边框)- 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding(内边距)- 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content(内容)- 盒子的内容,显示文本和图像
元素的宽度与高度
重要:当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。
例子:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
总宽度=250px(宽)+20px(左填充+右填充)+10px(左边框+右边框)+20px(左边距+右边距)=300px
最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
盒子模型的5个必要属性
width
盒子里面内容的宽度。
height
盒子里面内容的高度。
padding
内边距,盒子内容距离边框的距离。上下左右四个方位的padding属性:
- padding-top
- padding-bottom
- padding-left
- padding-right
准则:在使用css的时候,能够使用简写就使用简写
padding:10px 20px;
第一个值表示上下的padding 第二个值表示左右的padding padding:10px 20px 30px;
上 左右 下 padding:10px 20px 30px 40px;
上 右 下 左 padding:20px 15px 30px;
上为20px 下为30px 左右为15px; padding:20px;
上下左右 padding-left:30px;
左 30px
border
边框。
border: 1px solid red;
1px:边框的宽度为1px solid:边框线型为实体 red:边框的颜色为红色(可以用八进制 十六进制 英文单词表示)
margin
外边距。使用方法与padding相似,上下左右四个方位的margin属性:
- margin-top
- margin-bottom
- margin-left
- margin-right
在使用margin时需要注意的点: 1.塌陷 margin塌陷存在于块级元素之间 如果元素变成了行内块元素或者行内元素则不会塌陷 如果元素脱离了标准文档流则也不会塌陷
2.通过margin让盒子居中。
让盒子左右居中margin:0 auto;
使用margin:0 auto;
让盒子居中需要注意的点:
- 盒子必须要有明确的width
- 盒子必须处于标准文档流中
- 是让盒子居中,而不是让盒子里面的 文字居中。
- 如果让文字居中用
text-align:center;
text-align:center / left /right;
Tip:如果想要移动子元素的位置,非必要情况下推荐使用父元素 的padding,而不是子元素的margin,如果必须使用margin,父元素就必须要有border。
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE 8及更早IE版本不支持填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。