美文网首页
CSS小技巧

CSS小技巧

作者: Ms_Apple | 来源:发表于2016-01-19 17:52 被阅读26次

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

相关文章

  • 笔记1

    1、浮动的小技巧 HTML: CSS:

  • CSS小技巧

    左右布局 左中右布局 水平居中 行内元素水平居中,在其父元素上写text-align: center;。 宽度确定...

  • css小技巧

    利用border实现三角形和平行四边形 效果如图: 三角形的实现利用了上面的方法。 效果如图: 效果如图: 效果如图:

  • css小技巧

    div高度是由什么决定的:div高度是由内部文档流中元素的高度的总和决定的 文字对齐代码: 效果图 单词中断显示:...

  • css小技巧

    最近开始写小程序然后又开始写vue真的是一个头两个大 然后慢慢记录平时的一些前端技巧不定时更新 让子元素在父控件里...

  • CSS小技巧

    1.为div[contenteditable]添加仿placeholder效果div部分 CSS部分 完事儿~

  • CSS小技巧

    1.文字超过两行,隐藏并显示省略号 overflow:hidden; text-overflow:ellips...

  • css小技巧

    1、不要写heightdiv高度 -> 文档流内容的高度和让内容撑开外面的高度 2、(1)css垂直居中table...

  • CSS小技巧

    .清除图片下方出现几像素的空白间隙方法1: 复制代码代码如下:img{display:block;}方法2: 复制...

  • CSS小技巧

    1.元素水平居中 内联元素水平居中text-align:center; 块元素水平据居中margin:0 auto...

网友评论

      本文标题:CSS小技巧

      本文链接:https://www.haomeiwen.com/subject/bkzkkttx.html