1. 选择器优先级进阶
在我们设置选择器的时候通常会遇到一种情况，就是当多个选择器在一起的时候，怎么来确定优先级
下面是对于多个选择器在一起时优先级的计算
对于基本选择器，优先级数值大致为下所示：
Id 100
Class 10
标签选择器 1
行间优先级是 1000
计算方式 ： 让每一个选择器对应的值相加 谁的值大谁的优先级高
例如在下面代码中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style>
*{margin:0;padding:0;}
#box为id选择器，优先级数值为100
/*#box p{
color:green;
}*/
.wrap .item p 为类选择器，类选择器，标签选择器，优先级数值为10+10+1
/*.wrap .item p{
color:red;
}*/
#el .item p 为id选择器，类选择器，标签选择器，优先级数值为100+10+1
/*#el .item p{
color:#520;
}*/
</style>
</head>
<body>
<div class="wrap" id="el">
<div class="item" id="box">
而下面为行间样式，优先级数值为1000
<p <!-- style="color:blue -->">优先级</p>
</div>
</div>
</body>
</html>
从上面来看行间样式优先级最高，因此优先使用的是行间样式
2.文本属性
设置首行缩进(一般浏览器的默认字体大小是16px
谷歌浏览器最小只能设置到12px)
Text-indent: 32px;
文本的水平对其方式，其值有left，right，center，justify（两端对齐）
Text-align: center;
设置下划线
Text-decoration:
Text-decoration: overline 上划线
text-decoration:underline 下划线
text-decoration:line-through 中划线，删除线，穿过文本的线
去除下划线
text-decoration:none
设置行高
Line-height: 行高
设置行于行之间的间距
一般用于单行文本的垂直居中
单行文本的垂直居中: line-height:行高;
Vertical-align:垂直对齐方式,常用的值有top，bottom，middle，sub（下标）baseline（基线）super（上标）
vertical-align:middle;
文本对齐方式，水平和垂直居中
text-align: center;
line-height:行高;
或者：
text-align: center;
vertical-align:middle;
消除列表的项目标记，一般用于去除列表项前面的实心圆点
list-style:none
其一般配合用在css样式中,用来消除文本内外边距初始值和列表项标记
*{margin:0; padding:0; list-style:none;}
3.布局属性
块元素：
独占一行 宽度默认是父元素的100% 默认高度由内容决定，支持所有的样式，就算设置了宽度也会独占一行
行内元素：
不会独占一行 元素排在一行显示 ，默认宽度是0 高度由内容决定，不支持宽高属性和margin的上下属性
行内块：
不会独占一行 支持所有的样式 默认宽度0 默认高度由内容决定
Display： 规定元素以哪种元素类型显示
none 隐藏
block 以块元素显示
inline-block 以行内块元素显示 此属性已经被废弃 但是还能用
inline: 以行内元素显示
一般情况下 我们都是将行内元素转变成块元素或者行内快，不会将块元素转成行内元素
Overflow： 清除当前元素内部对外部元素的影响、
Visible: 默认值
hidden: 超出部分隐藏
Scroll: 添加滚动条
Auto: 自检测并添加滚动条
注意： diaplay:none 隐藏 但在元素中不占据位置
visibility:hidden 隐藏 但在元素中依然占据位置
4.浮动
css有三种基本的定位机制：文档流（普通流）、浮动和定位
文档流：
遵循元素本身的属性，除非专门指定，否则所有框都在普通流中定位。也就是说，普通流的中的元素的位置由元素在
html中的位置决定（通俗来说元素位置就是元素中有什么属性就按照属性的特点来决定；例如div为块元素，独占一行）
浮动关键字：Float:
其有两种浮动方向
Left
Right
文档流：元素以从上到下，从左向右的排列方式 这种排列规则就是文档流
A.浮动会脱离文档流 会将后面没有浮动的元素覆盖
浮动不会覆盖文字
B.浮动只有两个方向，左浮动或者右浮动
C.当浮动元素碰到父元素的边界时会停止浮动，碰到前面有浮动元素也会停止浮动，并排在一排显示
如果浮动元素的宽度超过父元素的宽度 会自动换行
D.如果前面有未浮动的元素 会另起一行进行浮动
浮动遇到的问题：当父元素没有设置固定高度时，子元素全部浮动，会导致父元素高度无法撑开
解决办法：（清除浮动）
1.给父元素设置固定高度
height:200px;
2.给父元素添加overflow：hidden
3.给父元素的最后添加一个空标签设置clear:both
这种方式会添加无意义的空标签 影响页面结构 所以不推荐
4.使用伪元素选择
给父元素添加伪类 after
.wrap:after{
content:'';
display: table;
clear:both;
}
5.定位
关键字：position
相对定位 relative
相对于元素原来的位置进行偏移 参考点是原来位置的起始点
不会脱离文档流
position:relative;
top:200px;
left:200px;
绝对定位 Absolute
会脱离文档流 默认以body的（0,0）点位参考点进行位移
如果父元素有定位属性，绝对定位就以父元素的（0,0）点位参考点进行偏移
如果父元素没有定位属性，就找爷爷元素，以此向上找，找到body为止
position:absolute;
top:100px;
left:100px;
固定定位(绑定定位)fixed
脱离文档流
相对于浏览器窗口进行定位，一直固定在浏览器窗口的某一个位置
position:fixed;
right:20px;
bottom:20px;
z-index:
定位的层级： 只能给有定位属性的元素设置
作用：可以改变定位元素的层级，越往后层级越高（通俗说就是看谁的数值大谁就生效） ，值大小跟元素顺序无关，默认值为0，值可以为负值
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位的层级</title>
<style>
*{margin:0;padding:0;}
.wrap{
width:400px;
height:400px;
border:1px solid red;
margin-left:100px;
position:relative;
}
.item1,.item2{
width:100px;
height:100px;
}
.item1{
background:yellow;
/*绝对定位*/
position:absolute;
top:100px;
left:100px;
z-index:1;
}
.item2{
background:blue;
position:absolute;
top:100px;
left:100px;
z-index:2;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
</html>
给z-index:1;和z-index:2;注释，其结果为：
给z-index:1;和z-index:2;取消注释：
给z-index:1;取消注释：
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
