---------------------------------------------------------------------------------------------------------------------------------------------
<引入css的方式：
1.内联样式(样式就在标签内)
例：
这是一个标签
像其他标签也可以这样去写，给谁写就给谁加，但是容易产生代码冗余
2.内部样式（样式与标签分离）
例：head部分
body部分
........
适用于代码较少
3.外部样式（通过链接）
例：在head标签里引入
适用于代码体系较大
css选择器
优先级：!important（直接在属性后面加，但是一般不用）>内联（style）> id
> class （对于在同一个class内部的，后面的优先级更高，覆盖问题）> 标签选择器 > * (通配符)
> 元素自带的 body-->8px
*通配符选择器：
网页会自带一些 可以在style里面设置：
*{
margin：0px;
padding:0px;
}
对于优先级的问题遇到多个时可以做加法：（同级）
style 1000； ID 100 ； class和伪类（hover等）10 ； 标签 1；
1.标签选择器 例如div
fqwudywvefhw
2.id选择器----#....(通过设置唯一的id，
因为一个页面中只允许有一个叫这个的ID)
例：
1234567
3.class选择器 .class名(代表一类)
例：
- 11111
- 22222
- 33333
4.后代选择器（派生选择器）
空格表示找里面的，选的是所有后代元素
例：
111111
2222222
111111
5.子代选择器 >（在低版本浏览器下不好使）
（不同于4，只想找亲儿子）
例：div>span {
background: #2dff3e;
}
6.分组选择器（群组选择器）用逗号分隔
例：.qq,p{（选中所有class是qq的和所有p标签）
color: #ff0883;
}
7.兄弟选择器 + 选择紧邻的
#div1 +p{（选中ID是div1和其紧邻的p标签）
.....
}
8.伪类选择器 （用于链接）
：hover
(鼠标滑过时改变为其规定的样式)
例：
click me
还有active（正在点）
visited（点过的）,
link(未做任何操作，正常进入时的样式），
focus（获取焦点时的样式）
9.伪元素设置器 :first-letter、
:first-line
<指的是就好像设置了一个别的标签
实际没有>
(设置对象内第一个字符的样式;另外，还可以设置
width和height)
例：
.......
safw dxfhfdhm gfhmgkm
tjgjnf hbegsd ugf shdjvb
skj vsjv hsk
重要！！！！！！通常情况下，为了区分伪元素和伪类，通常给伪类加一个冒号，
伪元素加两个冒号，其实加一个冒号也是好使的
10.虚拟伪元素
相当于在元素内部后面又加了一个元素
相当于个行元素
#div6::after{
content:'哈'；
color:....;
}
#div6::before{
content:'呵'；
......
}
---------------------------------------------------------------------------------------------------------------------------------------------
css语法：（CSS样式）
1.CSS背景：
aytfsauydfw
2.CSS文本：
qjwkre wkfhxnc vdlvhevs qjwkre wkfhxnc vdlvhevs qjwkre wkfhxnc vdlvhevs qjwkre wkfhxnc vdlvhevs qjwkre wkfhxnc vdlvhevs qjwkre wkfhxnc vdlvhevs
wygb efgwj
ysg
baidu
/*思考：如何设置多行文字垂直居中*/
大段文字
- 列表去小点
CSS中的行级元素和块级元素：
行级元素：水平分布 不能设置宽高 宽由内容支撑（字多就宽）
sdsdf
块级元素：垂直分布 可以设置宽高
（自己占据一整行）
dfvdf
sdgvd
sdfdg
- asdfdd
注意：行块如果想相互转化
比如想给span设置宽高
可以在style标签里这样写：
div{
display:inline
}-----行级元素
inline是一个行元素
而block是一个块元素
span{
display:block
}----块级元素
行级块元素：水平分布 可以设置宽高
display:inline-block
（又占行又占块）
display:none 隐藏
注意：如果页面中的两个块级元素中间有小空隙，去掉两个块元素中间的回车即可，或者注释也行
CSS盒模型:
标准盒模型
怪异盒模型：
1.没写DOCTYPE，并且IE6以下
（比如写padding没有撑大而是向内缩）
2.在普通的加属性 box-sizing: border-box;()
实现二者相互转化 box-sizing: content-box;(normal)
外边距合并：
默认选择较大值
margin-top: 30px;
margin-bottom: 60px;
解决方式：
float: left;（浮动）<子父元素都可以>
position: absolute;（定位）
父子间外边距合并：
border：1px solid transparency（透明边框）<仅父元素可以>
overflow: hidden ;
/*溢出隐藏*/
padding-top: 50px;
定位：
position:
static(默认)
relative(相对定位,相对于自身原来的位置，空间不被释放)
absolute（绝对定位,相对于最近已经定位的祖先元素，如果没有就相对于body，
脱离原来文档流，空间释放）
注意：不要在页面中使用较多定位，不易修改
div1
div2
div3
----------------------------------------------------------------------------
固定一个小框
div1
--------------------------------------------------------
浮动：
float:脱离文档流，空间释放，后边元素上去
塌陷：子元素浮动，父元素没有高度
解决：1.手动给父元素加高
2.给父元素加overflow: hidden;
3.clear:both
Title
div1
sdvds
div2
div3
uashfsdv
----------------------------------------------------------------------------------------------------------------
css小箭头：
---------------------------------------------------------------------------------------------------------
css旋转:
详细见手册
transform:rotate等
transform-orign：px px 旋转轴点
transition(动画) 可以指定时速 风格 transition:过渡属性（all） 过渡时速 动画类型 延时
平移 translateX（px） translateY（px） 向X向Y变换
缩放 scale() 旋转rotate(deg) 扭曲skew
------------------------------------------------------------------------
搜索蓝框 去掉：outline:none;
透明度：opacity：xxx；（0.5表示一半，范围0-1）
如果要兼容IE6：filter:alpha(opacity=xxx)
XXX取0--100
关于溢出隐藏的设置：
多个浮动的设置容易造成塌陷，处理方法是设置溢出隐藏
overflow属性：
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit
规定应该从父元素继承 overflow 属性的值。
通写：style里面
*{
margin 0;
padding 0;
}
ul{
list-style: none;
}