1

1、盒子模型作用:
盒子模型就是一个盒子,封装周围的html元素。允许我们在其他元素和周围元素边框的空间放置元素。
2、组成:
外边距(margin):相邻的两个盒子margin,会发生折叠,可为负数
边框(border):
内边距(padding):
实际内容(content):百分比相对于父容器的content box 的宽度,只有包含块的高度不依赖该元素时,百分比宽度才生效

clipboard.png

*IE盒模型和W3C盒模型在计算总宽度中存在一些差异

W3C盒模型:width=content.width;heigth=content.heigth
IE盒模型:width =content.width+border +margin;height=content.height+margin+border

CSS3引入box-sizing属性,可允许改变默认的css盒模型对元素宽高的计算方式

content-box: 浏览器定义元素的屏幕宽度和高度的默认方法, 会将border宽度和padding厚度与width和height属性值相加,来确定该标签的屏幕高度和宽度
padding-box-: 当你在一个样式中设置了width和hight属性时,它应该包含padding作为该值的一部分
border-box: 包含了border宽度和padding厚度,将它们作为width和height的一部分.






husky0601
71 声望2 粉丝