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值变为 16px62.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*/}