日期:2014-05-17  浏览次数:20523 次

Css学习纪要

1、超链接顺序:love hate(link、visited、hover、active)

2、块级:div p form ul ol li,行内:span(内联元素) strong em  ;块级:独占一行、可以设置width、height;行级:不独占一行,不可以设置width、height;

3、display: inline-block非常有用,position:relative,absolutre;float   z-index(由relative、absolutre激活) 

      absolute和float会隐式改变display的类型成inline-block(display:none除外)。

4、水平居中:文本、图片、等行内元素使用text-align:center

       确定宽度的块级元素使用:margin-left:auto;margin-right:auto;

       不确定宽度的块级元素使用:

           1:table不是块级元素,如果不给他设置宽度,他的宽度会由内部撑起来,margin-left:auto;margin-right:auto可以设置table居中

           2:设置成display:inline即可,缺点是不可以设置宽度等相关属性了。

           3:设置父元素float:left,position:relative,left:50%就好了。

5、竖直居中

        父元素不确定高度,文本、图片、块级元素:设置父元素的padding-top、padding-bottom设置成相同值。

        父元素高度确定,单行文本居中:设置height、line-height高度一样,即可。

        父元素高度确定,多行文本、图片、块级元素:

              1:vertical-align只有在父元素是td、th才有效果,其他块级元素(div、p等)无效。在某些浏览器可以设置块级元素的display:table-cell,再用vertical-align可行。

                    

              2:


开发中遇到的问题:

      1、标签之间换行,会形成空格。