盒子模型总结

什么是盒子模型？

• 网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具有这些属性。这些属性咱们能够用平常生活中的常见事物——盒子做一个比喻来理解，因此叫它盒子模式。CSS盒子模型就是在网页设计中常常用到的CSS技术所使用的一种思惟模型。
• 分别是margin，border,padding，widht，height，backgruong-color这六大属性。
• 标签分为块级元素和行内元素，咱们能够形象比喻其为男女元素。常见的男（块级）元素有div、p、h1~h6、ul、ol、dl、li、dd、table、hr等。常见的女（行内）元素有span、lable、input、big、textarea、select等等。
• 对于男盒子来讲，6大属性均可以设置并起到做用。对于女盒子来讲，widht，height是不起做用的。

如何计算盒子模型在网页上占据的大小？

• 在网页上占据的宽度：左右的margin+左右的border+左右的padding+width。
• 在网页上占据的高度：上下的margin+上下的border+上下的padding+height。

  

• 若是一个div没有设置widht，那么它会占据父元素的100%。若是它的父元素的宽度是1 000px，那么这个div的宽度也是1000px。
• 可是须要注意的是div的这个1000是指div所在页面上占据的宽度而不是它真实的宽度。 这里的1000px = 左右的margin+左右的border+左右的padding+真实的width 若是我把这个div又加了一个20px的边框。那么这个div的内容宽度width = 1000px-20px = 980px。
• 固然盒子模型也有很差的地方若是一个男盒子没有设置宽度，它的宽度是父元素的100% ，这里的100%是指这个盒子所占页面宽度。若是又增长了这个盒子的margin,padding,bo rder的值，那么这个盒子的内容宽度必定会减少，若是margin,padding,border不断地增 加，盒子的内容宽度不断地被压缩，若是压缩到极限，浏览器会强迫元素的宽度增长。