css记录

学习小记录(笔记1)

css垂直水平的居中

学之所获，记以忆之。

<div class="box">
    <div class="content"></div>
</div>
.box{
    width:500px;
    height:500px;
    background-color:pink;
    position:relative;
}
.content{
    width:200px;
    height:200px;
    background-color:green;
    position:absolute;
    top:50%;
    margin-top:-100px;
    left:50%;
    margin-left:-100px;
}

先将内容元素设置相对定位，然后设置子元素绝对定位，top:50%; margin-top:-100px;这两个语句能够实现垂直方向的居中，将子元素左上角定位于父元素的一半位置，再设置margin-top为自身高度的一半，实现垂直居中，同理，left:50%; margin-left:-100px;是设置水平居中。

注意：
margin-top为负值不会增加高度，只会产生向上位移
margin-bottom为负值不会产生位移，会减少自身的供css读取的高度

绝对定位(absolute)的元素想相对于最近的设置定位的元素左上角的设置定位的。
相对定位(relative)的元素是相对于自身的左上角设置定位。
固定定位(fixed)的元素是相对于body标签可视区域设置定位。

元素定位用的比较多的是:子绝(子元素设置position:absolute)父相(父元素设置position:relative)。

清除浮动常用方法

    //伪类元素清除浮动
    .clearfix:after{
         content: "";
         display: block;
         width: 0;
         height: 0;
         visibility: hidden;
         clear:both;
    }
    .clearfix{
        *zoom: 1; //为了兼容IE浏览器
    }

 visibility:hidden 允许浏览器渲染它而不显示出来，从而实现清除浮动。

清除浮动满足条件：父元素没有设置高度，所有子元素设置了浮动。

精灵图使用

  background: url(img.jpg) x y no-repeat;
  //x表示水平位置， y表示垂直位置。获取图片在精灵图中位置，设置-x，-y将图片左上角移动到精灵图左上角。

css制作三角

通过设置width:0和height:0,还有border-radius来制作三角形。

nth-of-type和nth-child的区别

<div class="box">
        <p>这是</p>
        <p>这是</p>
        <p>这是</p>
        <p>这是</p>
        <p>这是</p>
</div>

对于p:nth-child(2)表示这个元素要是p标签，且是第二个子元素，是两个必须满足的条件。
而p:nth-of-type(2)表示父标签下的第二个p元素，显然，无论在div标签后面再插入个span标签，还是h1标签，都是第二个p标签选中。

设置文本无法选择

<div unselectable="on" onselectstart="return false;">

设置这两个属性就可以使文本无法选择 。

但是前面再加一个普通div就有问题了

<div>普通DIV<div>  
<div unselectable="on" onselectstart="return false;">从前面一个div开始选，就可以选中本部分内容，只有从该DIV结束部分才能不选中</div>  

要么在body里用onselectstart=”return false;”，但是那会导致整个页面都无法选中；或者在所有div或者类似DIV的容器里都要设置onselectstart=”return false;”，才能彻底解决。
下面两个浏览器可以在元素样式里设置：
Firefox下的解决方案：
style=”-moz-user-select:none;”
Chrme下的解决方案：
style=”-webkit-user-select:none;”

CSS属性中容易混淆点

font:14px/26px ......;
//表示 
//font-size: 14px;
//line-height: 26px;

.5em .5px表示简写0.5px;

css的单位

px是相对单位，是相对与屏幕分辨率的单位

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size:62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位。

em值=（1 ÷ 父元素的font-size × 需要转换的像素值）

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，可以做到修改根元素文字大小从而修改整体大小。、

//实例
            html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
            body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
            h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}