水平居中文本、图片等行内元素的水平居中给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中确定宽度的块级元素的水平居中通过设置margin-left:auto;和margin-right:auto来实现不确定宽度的块级元素的水平居中(以分页模块为例,ul li实现分页...
分类:
其他好文 时间:
2014-10-24 12:46:35
阅读次数:
177
1,图片垂直居中:
设置包含图片的div:height=20px;line-height=20px。设置图片vertical-align:middle 即可。
2,行内块元素有3px bug,可通过设置为块元素解决。典型元素:img input
行内元素:内容撑开宽高,宽高随内容变化而变化,不可控制宽高,用于控制字体、颜色。可设置line-height
块级元素:默认撑满行,可设置。
...
分类:
Web程序 时间:
2014-10-24 00:29:50
阅读次数:
195
DIV 垂直 居中让div居中对齐 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为: .style{margin:0 auto;} 数字0 表示...
分类:
其他好文 时间:
2014-10-22 12:18:45
阅读次数:
194
写css,你少不了与margin打交道。你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下marg...
分类:
其他好文 时间:
2014-10-22 08:42:14
阅读次数:
278
用到知识点:float,块元素居中,注意:(如何让浮动元素和块元素在同一行--display: inline-block失效)正确布局代码 正确CSS#left { height: 500px; width: 200px; border:2px solid red; float...
分类:
其他好文 时间:
2014-10-10 14:40:54
阅读次数:
164
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inl...
分类:
其他好文 时间:
2014-10-09 13:58:33
阅读次数:
140
display:block元素的特点是:总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度, , , , 和 是块元素的例子。display:inline元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,....
分类:
其他好文 时间:
2014-10-08 18:01:35
阅读次数:
139
inline-block的兼容性问题兼容性:IE6、IE7不识别inline-block但可以触发块元素。其它主流浏览器均支持inline-block。解决IE6、IE7兼容性的方法:1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元...
分类:
其他好文 时间:
2014-10-08 00:41:34
阅读次数:
272
原文:CSS 实现加载动画之三-钢琴按键今天做的这个动画实现也是非常简单,简单数几行代码就可以搞定。给这个动画取了个优雅的名字--钢琴按键,也实在是想不出什么更形象的名字了。废话不多说,直接上图。 1. 先看gif图 2. 代码实现思路 2.1 定义五个方块的元素。
2.2 对方块元素使用动画,延时...
分类:
Web程序 时间:
2014-09-29 00:30:37
阅读次数:
226
1 2 3 4 1 .searchBlock{width: 800px;height:120px;position: absolute;top:50%;left: 50%;margin-top: -97px;margin-left: -400px;padding: 15px ...
分类:
其他好文 时间:
2014-09-28 12:35:42
阅读次数:
182