CSS相关知识点记录

1.display 属性

        display 属性规定元素应该生成的框的类型。可能的值。比如设置为block的时候，它就单独成为一行；设置为inline的时候，它就与前后的元素保持在一行内；设置为inline-block的时候，它与前后元素保持在一行内，而且是最底部是保持整齐。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

网页虽然看起来是平面的二维结构，但它其实是有z轴的，z轴的大小由z-index 控制，默认情况下，
所有元素都是在z-index: 0 这一层的，这就是文档流。
设置position: relative 或 position: absolute会让元素浮起来（就像游戏中的概念-多层图层），
也就是z-index大于0，它会改变正常情况下的文档流。
不同的是position: relative 会保留自己在z-index:0 层的位置，
但是它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位置，
但对其他仍然在z-index:0层的元素位置不会造成影响。
而position: absolute会完全脱离文档流，不再在z-index:0层保留占位符，
其left、top、right、bottom 值是相对于自己最近的一个位置–设置了position: relative 或 position: absolute的祖先元素的，
如果祖先元素都没有设置position: relative 或 position: absolute，那么就相对于body元素。

不论之前什么类型的元素（display:none除外），
只要设置了position: absolute 或 float中任意一个，
都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。
就算我们显式地设置 display:inline或者display:block，也仍然无效
值得注意的是，position: relative却不改变display的类型。

比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；
而span元素的默认display属性值为“inline”，称为“行内”元素。

2.-webkit-相关

        ”WebKit” 即指代使用Webkit内核的浏览器(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代采用Gecko内核的浏览器(Firefox等)。

-webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。

-webkit-text-stroke可以为文字添加边框。

-webkit-tap-highlight-color这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

3.伪元素

：before 伪元素在元素之前添加内容。

：after 伪元素 元素之后添加内容。

::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。这两个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

4.content 属性

content 属性设置文本或图像出现（浮动）在另一个元素中的什么地方。

使用自定义字体图标
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?yrquyl');
	src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'),
		url('../fonts/icomoon.woff?yrquyl') format('woff'),
		url('../fonts/icomoon.ttf?yrquyl') format('truetype'),
		url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
    content: "\e600";
}

5.font-familiy属性

        font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。        

        有两种类型的字体系列名称：

        指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
        通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

6.position 属性

        position属性有三个参数：static absolute relative 

        static : 　无特殊定位，对象遵循HTML定位规则
        absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
        relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

所以，当你发现某些元素层叠在一起了，可能就是用错了relative定位了。

.pt-triggers {
	position: absolute;
	width: 300px;
	z-index: 999999;
	top: 12%;
	left: 50%;
	margin-top: 130px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%); 
	transform: translateX(-50%);
}
.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

7.RGBA属性

        RGB即红绿蓝，它们的范围为0到255之间的整数或者0%到100%之间的百分数，描述了红绿蓝三原色在预期色彩中的量。第四个值，Alpha值，制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。        

rgba(255, 255, 255, 0)      //完全透明的白色
rgba(0, 0, 0,1 )            //完全不透明度的黑色
rgba(144, 238 ,144, 0.5)    //半透明的青苹果绿
rgba(255,252,153,0.5)       //暖黄色

8.border属性

        border是边框的意思。border: none代表无边框。

9.margin 属性

        该属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度
        该属性可以有 1 到 4 个值,分别是上、右、下、左

margin:10px 5px 15px 20px;

10.padding 属性

        该属性在一个声明中设置所有内边距属性
        该属性可以有 1 到 4 个值,分别是上、右、下、左

padding:10px 5px 15px 20px;

margin 和padding的区别：

        margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

        padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

11.cursor 属性

        该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

值	描述
url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

12.animation（动画）和transition（过渡）属性

        animation（动画）、transition（过渡）是CSS3中的两种动画属性。
        animation强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用；

        transform(变形)是CSS3中的元素的属性，translate（移动）是transform的一个属性值；transform是transition（过渡动画）的transition-property的一个属性值。
        transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。可以认为它有两个关键帧（Transition ＋ Transform ＝ 两个关键帧的Animation）。

13.rem单位

        rem是CSS3里面的内容，rem（font size of the root element）是指相对于根元素的字体大小的单位，它就是一个相对单位。
        另外，还有一个em单位，em（font size of the element）是指相对于父元素的字体大小的单位。
        它们之间很相似，rem计算的规则是依赖根元素，em是依赖父元素计算。

        根元素就是html标签，如下所示：

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

html的font-size是20px，那么.btn的width=6*20=120px

14.box-size属性

        设置CSS的box-sizing属性值为“border-box”，这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

       一般设置为：box-sizing: border-box;那么，这个div不会因为border: 2px solid black; 有了2px的border而变大。对外看来，div还是一个固定的大小。

15.clear 属性

        clear属性定元素的哪一侧不允许其他浮动元素

clear:left;    ---左边不允许有浮动元素
clear:right;   ---右边不允许有浮动元素
clear:both;    ---左右两边不允许有浮动元素