在css中，大多数标签都是默认属性，需要对其进行初始化，比如
＊｛padding:0;margin:0;｝
在移动端布局时要采用响应式，响应式布局通常有两种方法，一是通过百分比控制，二十使用使用弹性盒子（flex）
一、写法，分组和嵌套
对于有相同属性的元素，可以使用分组的形式
h1{color:#ff9900}
h2{color:#ff9900}
h3{color:#ff9900}
-----------------
h1,h2,h3{color:#ff9900}
嵌套：
p {color:#ff9900;}
.demo {font-size:12px;}
.demo p { color:#ff6600;}
id选择器
#id
类选择器
.class
属性选择器
[title="text"]{}
input[type="text"]{}
派生选择器（也就是选择标签）
div{}
CSS 后代选择器 h1 em {color:red;}
CSS 子元素选择器 h1 > strong {color:red;}
CSS 相邻兄弟选择器 h1 + p {color:red;} 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
二、布局类
1、float（浮动）
CSS 的 Float（浮动），会使元素水平方向向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。代码：clear:both
2、定位（position）
Static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
Fixed 定位
元素的位置相对于窗口是固定位置。
即使窗口是滚动的它也不会移动
Relative 定位
相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>Absolute定位使元素的位置与文档流无关，因此不占据空间。Absolute定位的元素和其他元素重叠。使用z-index可以控制层叠次序
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序
3、边距／填充
margin 外边距
常用写法：
margin-top:100px;
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
margin:100px; (上下左右全部)
margin: 100px 200px; (上下／左右)
margin:25px 50px 75px;(上边距为25px 左右边距为50px 下边距为75px)
margin:0 auto; 在已知当前元素宽度时可以控制当前元素水平剧中
Padding（填充）
定义元素边框与元素内容之间的空间。
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
4、display／visibility 显示／隐藏
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display常用属性
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
inherit 规定应该从父元素继承 display 属性的值。
5、对齐类
margin: 0 auto;
position
text-align
二、样式类
1、background 背景
background-color 背景颜色
background-image 背景图像
background-repeat 背景图像 - 水平或垂直平铺
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 scroll(默认跟随滚动) fixed（固定）
background-position 设置背景图像的起始位置。
background-size 背景尺寸
background: transparent; 背景透明
2、color 颜色
color:色值
3、透明类
opacity:0.4;
只让背景色透明 background:rgba(0,0,0,0.5)
4、border边框
border: 1px solid #000000;
根据位置控制
border-left
border-right
border-top
border-bottom
border-color颜色
border-style样式 dotted点状 solid实线 double双线 dashed虚线
border-width粗细
5、字体
font-family:"Times New Roman", Times, serif; 字体
font-size 控制字体大小，常用值有px，em
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
三、伪类是用来添加一些选择器的特殊效果。
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
CSS伪类
:first-child 伪类来选择元素的第一个子元素
:last-child 伪类来选择元素的最后一个子元素
:first-line 伪元素 用于向文本的首行设置特殊样式。
:before伪元素可以在元素的内容前面插入新内容。
:after" 伪元素可以在元素的内容之后插入新内容。
:first-letter 伪元素用于向文本的首字母设置特殊样式：
