margin是盒模型的外边距，padding是盒模型的内边距； 用margin时，最好给父级元素加上overflow：hidden；（溢出隐藏） 用padding时，最好给自身加上box-sizing：border-box；（固定边框） margin的bug： 1. IE6中浮动元素3px间隔Bug ...
分类：
其他好文 时间：
2018-01-03 22:44:27
阅读次数：
230
box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS3的B ...
分类：
其他好文 时间：
2017-12-25 00:44:50
阅读次数：
200
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, ...
分类：
移动开发 时间：
2017-12-22 18:33:09
阅读次数：
196
参照：1. "W3cplus" 2. "MDN" box model CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型。涉及到width, height, padding, border和margin。 1、W3C的标准Bo ...
分类：
Web程序 时间：
2017-12-15 14:05:32
阅读次数：
3983
1，padding与元素的尺寸， 1),对于block水平元素， 1，padding值暴走，一定会影响尺寸， 2，width非auto,padding影响尺寸， 3，width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。 2),对于in-line ...
分类：
其他好文 时间：
2017-12-09 12:00:30
阅读次数：
194
1. 标准盒模型： 因为 ，所以，同样宽度的内容因为 和`padding box sizing：border box content_box_width = width` 。 2. 弹性盒模型： 弹性布局相比传统的块布局要简洁很多，但是实现原理差别挺大的。首先，要想进行弹性布局，要设置 ，确定弹性容 ...
分类：
其他好文 时间：
2017-12-05 13:29:38
阅读次数：
79
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, ...
分类：
移动开发 时间：
2017-11-30 13:27:07
阅读次数：
190
*{ -webkit-box-sizing:border-box; /* 设置盒模型为内减模式 */ -moz-box-sizing:border-box; box-sizing:border-box;}html{ font-family:"microsoft yahei",Helvetica,Ar ...
分类：
Web程序 时间：
2017-11-07 13:20:35
阅读次数：
199
<!DOCMENT HTML> <html> <head> <meta charset="utf-8" /> <style> .gradient-block-diagonal { width:200px; height:40px; margin:50px; box-sizing:border-box ...
分类：
其他好文 时间：
2017-11-06 14:59:25
阅读次数：
191
起初是遇到这样一个问题：当盒模型设为box-sizing:border-box;(移动端上经常这么干)。子盒子的width：100%，子盒子的width等于父盒子contend的长度还是condend+padding+border的长度？ css和html: 结果： （second的width）=（ ...
分类：
其他好文 时间：
2017-11-01 20:32:34
阅读次数：
229
