往往你设置的元素宽度，是内容content的宽度，没有算上padding，border，margin的宽度的，如下
谷歌调试：
元素的总宽度就是margin+border+padding+content
所以如果两个元素设置一样的高度宽度，padding不一样，这两个元素的大小也是不同的。
举栗子：
粗问题了，那我想fancy的内容距离边框远一点，但是总宽度和simple的一样，又懒得算要设置多大，用到CSS3的box-sizing，效果如下：
新simple，新fancy设置的宽度为500，该宽度是内容+border的宽度+padding的宽度。
新simple
新fancy
有了box-sizing，就不用算啦。
我懒，所以以后的代码是
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
就不用再去重复写了，美滋滋。
1.css 盒子模型(css box model) 所有的html元素本质上都是盒子模型。在css 中，盒子模型常...
CSS盒子模型 **盒子模型解释 **元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来...
CSS盒子模型 **盒子模型解释 **元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来...
CSS盒子模型 盒子模型边框 CSS盒子模型的宽度和高度 CSS模型的填充 CSS盒子模型的边界 填充和边界的区别
HTML 和 CSS 面试题 盒子模型 CSS 中盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。W3C ...
CSS盒子模型 css中盒子模型来讲,都是由margin, border , padding, content四部...
基于CSS盒子模型及其CSS定位详解 CSS盒子模型 效果显示 盒子模型的简单应用 效果显示: CSS定位 效果显示
一、盒子模型 什么是css盒子模型 css中的盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子 在HTM...
介绍css的盒子模型 css的盒子模型有两种：IE盒子模型，W3C盒子模型盒子模型：内容(content),内边距...
1.css盒模型 简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型...
本文标题：总结css中的盒子模型
本文链接：https://www.haomeiwen.com/subject/gpdrsftx.html
网友评论