CSS小技巧

1.元素水平居中

内联元素水平居中text-align:center;

块元素水平据居中margin:0 auto;

2.单行文字垂直居中

height:n px;

line-height:n px;

3.文字相对图片、输入框垂直居中

vertical-align:middle;

4.元素自适应高度

父元素未指定高度,子元素有浮动,父元素不能自增。

overflow:hidden|auto;

5.background

元素背景覆盖范围:

IE7:content+padding

IE8+,FF:content+padding+border

body背景覆盖范围:content+padding+border+margin

6.margin

塌陷:竖直排列的块级元素之间的间隔是margin-bottom和margin-top两者中的较大值。

成父子关系的块级元素,子元素的margin以父元素的content为参考,倘若子元素的content+margin的高度超过了父元素高度值,IE会自动扩大,保持子元素的margin-bottom和父元素的padding-bottom,FF则保持父元素高度不变,子元素会超粗父元素范围。

成父子关系的块级元素,如果父元素和子元素之间没有其他元素,浏览器则会把子元素的margin-top作用于父元素。

可给父元素设置以下属性:

padding-top:n px;

overflow:hidden|auto;

position:absolute;

display:inline-block;

float:left|right;

7.position

absolute:使用绝对定位的元素以最近的已经定位的祖先元素为基准进行偏移,若没已经经定位的祖先元素则以浏览器窗口为基准进行偏移;绝对定位的元素从标准文档流中脱离,对其他元素的定位没有影响。设置绝对定位而不设置偏移的元素将脱离文档流且保持在原来的位置。

fixed:固定定位的元素以浏览器窗口为基准进行定位。

8.z-index

z-index属性取值为auto|number,作用于position属性设置为relative|absolute|fixed的元素。

同一个层叠上下文中,层叠级别大的显示在上,层叠级别小的显示在下;相同层叠级别时,遵循后来居上的原则;不同层叠上下文中,元素显示顺序以父级的层叠级别来决定显示的先后顺序,与自身的层叠级别无关。

9.border

单独设置border-left|right|top|bottom写出多样的三角形状。

{

border: n px solid color;

border-left|right|top|bottom-color: color|transprent;

}

10.伪类

(1)链接伪类出现的顺序必须遵循a:link a:visited a:hover a:active

(2):after和:before

element{position:relative;}

element:after,element:before{

position:absolute;

content:" ";

content: attr data-letter;

}

11.溢出省略

white-space: nowrap;//限制文本换行

overflow: hidden;//溢出隐藏

text-overflow: ellipsis;//显示省略标记

-o-text-overflow:ellipsis;//兼容Opera

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • .清除图片下方出现几像素的空白间隙方法1: 复制代码代码如下:img{display:block;}方法2: 复制...
    一直以来都很好阅读 270评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,812评论 0 2
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,645评论 32 459
  • 是通过柔荑花舌乳头和送人头黑死人他还是让他
    hyyuh阅读 166评论 0 0