尖刀出鞘的display常用属性及css盒模型深入研究
分类：
Web程序 时间：
2014-12-13 19:23:01
阅读次数：
339
在css中，width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有10个像素的外边距和5像素的内边距，如果希望这个框达到100像素就需要将内容的宽度设置为70像素 {margin:10px;padding:5p...
分类：
Web程序 时间：
2014-12-10 22:44:23
阅读次数：
145
1、IE6怪异解析之padding与border算入宽高原因：未加文档声明造成非盒模型解析解决方法：加入文档声明2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）解决方法：display:inline3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度...
分类：
其他好文 时间：
2014-12-09 22:59:05
阅读次数：
326
IE5.5及更早的版本使用的是IE盒模型，在在IE6及以上版本的浏览器中，浏览器支持一种解决了这种差异的可选的渲染模式，也开始遵循标准模式。IE盒模型和W3C盒模型的差异：IE盒模型，块元素的实际宽度=width（包含padding和border）；W3C盒模型，块元素的实际宽度=width+pad...
分类：
其他好文 时间：
2014-12-09 15:36:49
阅读次数：
127
HTML 默认的排版方式，不能够满足需求。所以我们要更高级的表现形式。这些是盒模型的变易之道。 ????还记得吗，盒模型有三个关键点，margin border padding 。这里讲述的变易的方法，还要从这个盒模型做起。为...
分类：
Web程序 时间：
2014-12-07 16:32:56
阅读次数：
207
给其父级加 display:-webkit-box;display:-moz-box;display:box;子集加-webkit-box-flex:1; -moz-box-flex:1;box-flex:1; 其中数字的大小 能控制子集盒模型的大小 父级宽度*子集数字/自己数字之和 就是子...
分类：
其他好文 时间：
2014-12-04 10:06:47
阅读次数：
129
页面布局常用的方式有两种，浮动（float）和定位（position），定位已经讲过了（关于position定位及z-index的理解），这篇主要讲浮动，而浮动和清理浮动是成对出现的，所以也一并讲了。理解浮动前，我们需要一些前置条件：1.盒模型；2.文档流；1.盒模型一个元素的width或者heig...
分类：
其他好文 时间：
2014-12-03 12:25:16
阅读次数：
304
元素与盒在HTML中常常使用的概念是元素，而在CSS中，布局的基本单位是盒，盒总是矩形的。元素与盒并非一一对应的关系，一个元素可能生成多个盒，CSS规则中的伪元素也可能生成盒，display属性为none的元素则不生成盒。除了元素之外，HTML中的文本节点也可能会生成盒。盒模型一个盒包括了内容(co...
分类：
Web程序 时间：
2014-11-28 19:45:53
阅读次数：
225
这几天在做移动端的web开发，遇到了一些问题，之前没有折腾过这方面的东西，这次好好吸收下css3的flexbox--弹性盒子模型，这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间。优点：可以很轻松的创建自适应的浏览器窗口的流动布局或自适应字体大小的弹性布局。1 2 13 ...
分类：
其他好文 时间：
2014-11-27 20:06:22
阅读次数：
187
CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗？ 你知道margin负值的秘密武器吗？我们一起看看吧！带竖线分隔的横向列表传统的分隔符是使用 “|” 来实现的，弊端显而易见，不利于表现与结构的分离，同时增加了后台输出时的判断工作。所以我们采用border-left 左边框来...
分类：
其他好文 时间：
2014-11-25 14:24:53
阅读次数：
250
