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*/}