1、多列布局 columns:column-width||column-count 2、列间距 column-gap 3、列表边框 column-rule 4、跨列设置 column-span:all /*跨过所有列*/ 5、盒子模型 box-sizing:border-box|content-bo
分类:
Web程序 时间:
2016-03-22 00:43:57
阅读次数:
179
一、理论:
1.CSS盒模型
a.外盒尺寸计算--高度
element空间高度=内容高度+内距+边框+边距
b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距
c.内盒尺寸计算--高度
element高度=内容高度+内距+边框
d.内盒尺寸计算--宽度
element宽度=内容宽度+内距+边框
2.box-sizing
a.content-box 默认...
分类:
Web程序 时间:
2016-03-18 01:55:47
阅读次数:
218
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。看了有些晕啊,看一下以下几个属性应该就懂了:1.conten
分类:
Web程序 时间:
2016-03-15 14:49:31
阅读次数:
215
box-sizing兼容性参考这里: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing box-sizing说明: box-sizing属性的三个值:content-box(default)、border-box、paddin
分类:
Web程序 时间:
2016-03-14 18:51:59
阅读次数:
233
0.5px 的像素在移动端的要求还是需要的。 在网上找了一个具体的实现办法,核心就是css3的缩放功能。 加box-sizing:border-box;是为了边框可以一起缩放。 .border:after{ content: ""; position: absolute; border: 1px s
分类:
Web程序 时间:
2016-03-11 15:27:05
阅读次数:
564
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起cal
分类:
Web程序 时间:
2016-03-01 11:02:44
阅读次数:
415
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱
分类:
Web程序 时间:
2016-02-26 11:53:30
阅读次数:
232
box-sizing?定义和用法?box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。?语法?box-sizing: content-box|border-box|inherit?值描述?content-box?宽度和高度分别应用到元素的内容框。?在宽度和高度之外绘制元素的内边距和
分类:
其他好文 时间:
2016-02-19 22:08:10
阅读次数:
354
box-sizing有三个属性,分别是:content-box,border-box,inherit (1)content-box:在宽度和高度之外绘制元素的内边距和边框(默认属性) (2)border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 (3)inherit:规定
分类:
其他好文 时间:
2016-01-29 20:35:20
阅读次数:
176
*,*:after,*:before{ -moz-box-sizing:border-box; box-sizing: border-box;}html,body,.st-container,.st-pusher,.st-content{ height: 100%;}.st-content{ ove
分类:
其他好文 时间:
2016-01-27 21:06:10
阅读次数:
141