background-origin设置元素背景图片的原始起始位置。语法：background-origin ： border-box | padding-box | content-box;参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。效果如下：需要注意的是，如果背景不...
分类：
Web程序 时间：
2015-04-23 15:17:25
阅读次数：
161
今天就以不规则布局来学习，之前做这个我花了很多时间还没达到很完美的效果！这次用这个来box-sizing:border-box布局，发现效果还差一点点，所以多多指教了！ 盒子模型 ...
分类：
Web程序 时间：
2015-04-23 12:54:47
阅读次数：
318
#main{ max-width:600px; margin:0 auto;}用max-width替代width，可以使屏幕比600px窄时自动调整内容宽度，而不是出现滚轮。所有主流浏览器包括IE7都支持。*{ -webkit-box-sizing:border-box; ...
分类：
Web程序 时间：
2015-04-14 21:28:38
阅读次数：
114
div{
box-sizing:border-box;
width:200px;
padding:20px;
border:1px solid red;
}
这段css的意思是说，div宽度为200px,边框为1px，左右空白边距是20px,时间内容宽度自适应，是200-2-20*2=158px;
如果box-sizing的值为content-box,说明设置的是内容区...
分类：
Web程序 时间：
2015-04-05 23:35:14
阅读次数：
598
BFC布局规则：内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触。即使存在浮动也是如此。BFC的区域不会与float box重叠B...
分类：
其他好文 时间：
2015-03-13 18:12:13
阅读次数：
127
今天讲讲上下两栏布局的应用场景，在此之前稍微提一下box-sizing这个属性。该属性有三个值分别为content-box|border-box|inherit。box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。通常我们设置的高宽度其实是指内容的高宽度，是没有将边框的高宽度算在...
分类：
Web程序 时间：
2015-03-03 23:29:39
阅读次数：
808
描述：我要实现一个 fluid layout, 左右结构（左定宽、右100%填充；右边子容器是上下结构，上结构定高，下结构100%填充）。思路：用 table-cell 实现左右（没有用 float），右边的上下结构采用 box-sizing: border-box;（即 padding-top +...
分类：
其他好文 时间：
2015-02-26 16:34:05
阅读次数：
172
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}有时候在某些项目中会发现这些css。box-sizing究竟有什么用还得重头说起...我们一般计算一个块状元素的宽度的时候会将左...
分类：
Web程序 时间：
2015-02-15 17:54:04
阅读次数：
461
定义和用法box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。默认值：content-box继承性：no版...
分类：
Web程序 时间：
2015-02-09 18:14:35
阅读次数：
1242
background-origin和background-clip是CSS3内新增加的属性，其实一个是对背景图片的放置，另一个是对背景图片的剪裁。background-origin和background-clip的选择都一样：content- box,padding-box,border-box(要...
分类：
其他好文 时间：
2015-01-26 18:54:17
阅读次数：
370
