前端入门part14盒子模型

在HTML中所有的标签都可以设置宽度、高度、内边距、外边距、边框；所以HTML中所有标签都是盒子。

内容的宽度和高度

• 通过标签的width和height属性设置的宽度和高度；

元素的宽度和高度

• 宽度=左边框+左内边距+width+右内边距+右边框

元素空间的宽度和高度

• 宽度=左外边距+元素的宽度+右外边距

css中新增了box-sizing：border-box；可以保证给盒子新增padding和 border之后，盒子的宽度和高度没变

• 如果两个盒子是嵌套关系，设置了一个盒子的顶部的外边距；外面的盒子也会被顶下来；如果不想外面的盒子被顶下来，可以给外面的盒子添加一个边框属性；

在嵌套关系的盒子中，我们可以利用margin:0 auto; 的方式让里面的盒子水平居中，不是垂直！！！！

那么text-align: center;和margin:0 auto; 有什么区别吗？

• text-align设置文字和图片水平居中，
• margin:0 auto设置div这种盒子居中；

为了更加精确的定位到某个标签，需要去掉css默认给你添加的属性；

• 通配符是遍历所有标签，所以性能不好；
• 企业开发中，如果高效去掉呢？
• http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css的网址中（大牛写好的，抄就完事了）
• body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}