两者的差异:盒子宽度是否包含边框和内边距
content-box:不包含边框(142)
border-box(box-sizing:border-box):包含边框(100)
设置width:100px height:100px的正方形,结果如下:
盒模型注意事项:
一 :
嵌套块级元素时,子元素margin,padding的参考标准是 父级的content-box 的宽度。
二:
overflow:hidden隐藏的是超出哪里的部分 padding-box部分
#box1{width:100px;height:100px;margin:20px;padding:20px;border:20px solid;background-color:#ccc;overflow:hidden; }#box1_1{width:200px;height:200px;background-color:#f00; }
三:
position:absolute 定位参考点是什么?
当给一个元素应用position:absolute绝对定位后,会以最近拥有定位属性的父元素为定位参考。同时可以通过left和top指定相对父元素左上角的偏移位置,