LanceT Blog

Category: CSS (page 1 of 2)

不固定宽度水平居中

效果: 水平居中代码: //html部分 <div class="container"> <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a> <div style="clear:both"></div></div> //css部分 .ce...

flex兼容性

写在前面 flex布局早在2009年就有了,使用最新的flex语法会发现支持程度并不好,即使是在“高端”浏览器上也是如此,比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同 网上现有的代码中充斥着各种版本,在Chrome下运行一般都没有问题,Firefox一般...

(转)position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?

这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点。后来我觉得这个题目应该能拆成几个点来回答:1、’display’、’position’ 和 ‘float’ 的相互关系;2、position...

link 和 @import 区别

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。   1. 老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 ...

去除inline-block元素间间距的N种方法

一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题: .space a { display: inline-block; paddin...

img 下方空白(理解baseline)

要理解这个问题,首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline,这是一个西文排版才有的概念: 可以看到,出现在baseline下面的是 p 啊,q 啊, g 啊这些字母下面的那个尾巴。可以看到,出现在bas...

margin 问题汇总

1.父元素与子元素之间的margin-top问题

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。
2013319162033660

Meyerweb css reset初始化

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,...

布局注意事项

1. 更好的清除浮动 /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (triggers hasLayout) */ .cf { *zoom:1; } 2. 块元素注意事项 默认宽度占全行 宽度、行高都可控,宽度也可...

兼容性

linear-gradient background: -moz-linear-gradient(#9e4926, #652712); /* FF 3.6+ */ background: -ms-linear-gradient(#9e4926, #652712); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9e4926), color-stop(100...
Olderposts