题外话
前端开发接触最多的就是浏览器，那么主流的浏览器都有哪些呢？
有人可能会说搜狐、百度、UC这些比较常见的浏览器，但是主流浏览器的评判标准不仅仅是市场占有率，还要有自己独立的内核，以上这些都没有。
一个浏览器最重要的是两个东西，一个是shell,浏览器外壳，这个基本都能写，重点就是内核，浏览器运转的快不快，识别代码的路径问题，优化问题都是内核来干的。
主流浏览器 内核
IE trident
Opera presto
Safari Webkit
Google chrome Webkit/blink
Firefox Gecko
这个会不会都不影响开发工作，但是了解自己常打交道的浏览器，应该算是基础吧。
一、写布局的三种方式
第一种是在div的style里面写，第二种是在head里面用<style></style>双标签，第三种是引用外部css文件，用<link>标签
二、布局优先级：！important>行间样式>id>class|[id]属性通配符>*页面通配符
权重比（上面数字每一位是256进制，不是一百一千）
组合选择器
除了上图几个单个选择器，还可以多个选择器组合，根据权重值决定谁的优先级，优先级一样的，后来居上
父子（后代）选择器：不一定都是标签、也不一定有直接的父子关系 div .box em{}都行,从右向左找，中间用空格隔开
直接子元素选择器：div>em{}
并列选择器(交集)：div.demo{}，中间无空格，多个限制条件,选中某一个元素，标签必须在前面
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
分组（并集）选择器em, strong, span{} 逗号隔开
兄弟选择器：用加号链接,会选中符合所有条件的最后一个选择器的所有标签（选择器之间紧跟着，隔开的不算）
div+a{
}
通用兄弟选择器：用～链接（符合先后顺序的所有标签）
属性选择器
/*设置有id属性的p标签*/
p[id]{
}
/*设置id=cc的p标签*/
p[id=cc]{
}
区别
共同点
css3新增
<!--选中同级别的第一个标签，不区分类型-->
p:first-child{
color: red;
}
/*选中同级别同类型的第一个*/
p:first-of-type{
}
/*选中同级别的第几个标签，不区分类型，只要同级别第几个是p标签，就会变，
n可以是数字，也可以是odd所有奇数，even所有偶数
xn+y:x\y随便写，n从0开始*/
p:nth-child(2){
}
/*选中同级别同类型的第几个标签，区分类型，只有同级别第几个是p标签，才会变*/
p:nth-of-type(2)
{
}
/*选中父级只有一个子元素的那个p标签*/
p:only-child{
}
/*选中同级别只有一个p标签的那个p标签*/
p:only-of-type{
}
/*选中alt属性值以abc开头的p标签*/
p[alt^=abc]
{
}
/*选中alt属性值以abc结尾的p标签*/
p[alt$=abc]
{
}
/*选中alt属性值包含abc的p标签*/
p[alt*=abc]
{
}
三、布局
1em=1font-size,2em就是空两格
div{
text-align:center;/*水平居中*/
height:200px;
line-height:200px;/*跟标签高度一样,可实现单行文本垂直居中*/
text-indent:2em；/*首行缩进，实现段落缩进*/
}
span{
text-decoration:line-through;/*可实现价格删除线效果*/
cursor: help;/*光标挪到上面时的鼠标样式，有多个，根据自己需要*/
}
/*伪类：实现鼠标挪上去时标签的改变*/
a:hover{
background-color:red;
}
css元素分类
凡是带有inline的元素，都有文字特性，多张图片放一起时会有间隔，是因为代码换行了
. 行级元素 inline
feature:内容决定元素所占位置，不可以通过css改变宽高
span strong em a del 等
. 块级元素 block
feature:独占一行，可以通过css改变宽高
div p ul li form address
. 行级块元素 inline-block
feature:内容决定大小，可以改宽高
/*斜体*/
font-style: italic;
/*粗细*/
font-weight: bold;
/*字体样式 字体如果不存在会使用系统默认字体，逗号后面可以有备选方案
如果想单独设置中文、英文的字体，可以设置两种字体，英文在前，中文在后
英文字体只包含英文，中文字体包含英文，可以处理英文
*/
font-family: "楷体","微软雅黑";
/*跟上面代码效果一样 style\weight可以省略，size\family不可以省略,并且位置不能换*/
font: italic bold 10px "楷体";
