一、选择器优先级进阶
计算方式：
行间样式 1000
id 100
class 10
标签选择器 1
让每一个选择器对应的值相加，谁的值大谁的优先级就高。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器优先级进阶</title><style type="text/css">*{margin: 0px;padding: 0px;}#box p{color: green;}/*.wrap .item p{color: red;}*/#el .item p{color: #520;}</style></head><body><div class="wrap" id="el"><div class="item" id="box"><p>优先级</p></div></div></body></html>
二、文本属性
1.text-indent：设置首行缩进
2.text-align：文本的水平对齐方式
3.text-decoration：去除下划线
4.line-height：设置行高
设置行与行之间的间距，一般用于单行文本的垂直居中。
5.vertical-align：垂直对齐方式（一般用于有图片）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>text</title><style type="text/css">*{margin: 0px;padding:0px;}.item{width: 400px;height: 400px;border: 1px solid red;/*设置首行缩进，字体16px，缩进两个字的位置*/text-indent: 32px;/*设置行高*/line-height: 30px;}.item1{width: 400px;height: 400px;border: 1px solid red;/*对齐方式，默认靠左（一般用于单行文本）*/text-align: center;/*添加下划线*//*text-decoration: underline;*//*添加上划线*//*text-decoration: overline;*//*添加删除线*/text-decoration: line-through;/*设置垂直居中*/line-height: 400px;}a{/*去除下划线*/text-decoration: none;}.item2 img{/*让文本和图片的中间对齐*//*vertical-align: middle;*//*让文本和图片的顶部对齐*//*vertical-align:top;*//*让文本和图片的底部对齐（默认）*/vertical-align:bottom;}</style></head><body><div class="item">帝高阳之苗裔兮，朕皇考曰伯庸。摄提贞于孟陬兮，惟庚寅吾以降。皇览揆余初度兮，肇锡余以嘉名：名余曰正则兮，字余曰灵均。纷吾既有此内美兮，又重之以修能。扈江离与辟芷兮，纫秋兰以为佩。汨余若将不及兮，恐年岁之不吾与。朝搴阰之木兰兮，夕揽洲之宿莽。日月忽其不淹兮，春与秋其代序。</div><div class="item1">帝高阳之苗裔兮，朕皇考曰伯庸。</div><a href="http//">百度</a><div class="item2">摄提贞于孟陬兮，惟庚寅吾以降。<img src="https://pic./ugc/baikepic2/11621/0721222709-978979_jpeg_448_600_67482.jpg/0" alt=""></div></body></html>
文本属性练习
<!DOCTYPE html><html><head><meta charset="utf-8"><title>文本属性练习</title><style type="text/css">*{margin: 0px;padding: 0px;}.box{width: 400px;height: 50px;border-top: 1px solid #f00;border-bottom: 3px solid #666;color: #333;font-size: 20px;font-family: 雅黑;font-weight: bold;line-height: 50px;text-indent: 20px;}</style></head><body><div class="box">新闻列表</div></body></html>
三、元素类型和类型转换
（一）元素类型
1.块元素
独占一行
宽度默认是父元素的100%，默认高度由内容决定
支持所有的样式
就算设置了宽度，也会独占一行
2.行内元素
不会独占一行，元素排在一行显示
默认宽度是0，默认高度由内容决定
不支持宽高属性，不支持margin的上下属性
3.行内块
不会独占一行，可以设置宽高
默认宽度是0，默认高度由内容决定
支持所有的样式
（二）类型转换
1.display：规定元素以哪种元素类型显示
none 隐藏
block 以块元素显示
inline-block 以行内块元素显示，此属性已经被废弃，但还能使用
inline 以行内元素显示
一般情况下，我们都是将行内元素转变为行内块或块元素，不会将块元素转成行内元素
2.overflow
visible:默认值
hidden:超出部分隐藏
scroll:添加滚动条
auto:自动监测并添加滚动条（清除当前元素内部对外部的影响）
display
<!DOCTYPE html><html><head><meta charset="utf-8"><title>元素类型</title><style type="text/css">*{margin: 0px;padding: 0px;}.wrap{width: 500px;height: 500px;border: 1px solid red;}.inner{height: 200px;width: 200px;background-color: pink;/*将div以行内元素显示*//*display: inline;*//*将div转换为行内块*//*display: inline-block;*/}span{width: 200px;height: 200px;background-color:red;/*margin: 10px;*//*将span转为块*//*display:block;*//*将span转换为行内块*/display: inline-block;}img{width: 80px;margin: 20px;}</style></head><body><div class="wrap"><div class="inner">div</div><span>1</span><span>2</span><img src="https://pic./ugc/baikepic2/11621/0721222709-978979_jpeg_448_600_67482.jpg/0" alt=""><span>3</span></div></body></html>
display练习
<!DOCTYPE html><html><head><meta charset="utf-8"><title>display练习</title><style type="text/css">/*list-style: none;取消列表样式*/*{margin: 0;padding: 0px;list-style: none;}ul{width: 300px;border: 1px solid white;}ul li{width: 100px;height: 50px;border:1px solid pink;text-align: center;line-height: 50px;display: inline-block;box-sizing: border-box;}.item{/*取消行内块自带空白*/margin-left: -6px;}ul li:hover{background-color: pink;}.inner{height: 200px;background-color: yellow;display: none;}/*鼠标移入li标签时，对.inner的动作*//*这里.innner必须是li的直接子元素*/ul li:hover .inner{display: block;}</style></head><body><ul><li>国内<div class="inner"></div></li><li class="item">欧美<div class="inner"></div></li><li class="item">日韩<div class="inner"></div></li></ul></body></html>
overflow
<!DOCTYPE html><html><head><meta charset="utf-8"><title>overflow</title><style type="text/css">*{margin: o;padding: 0}.item{width: 200px;height: 200px;border: 1px solid red;/*超出部分隐藏*//*overflow:hidden;*//*添加滚动条*//*overflow: scroll;*//*自动监测内容是否超出，如果超出自动添加滚动条*/overflow: auto;}</style></head><body><div class="item"><img src="https://pic./ugc/baikepic2/11621/0721222709-978979_jpeg_448_600_67482.jpg/0" alt=""></div>哈哈哈哈哈哈</body></html>
四、浮动（前能覆盖后，后不能覆盖前）
文档流：元素以从上到下，从左向右的排列方式，就是文档流。
浮动特点：
a.浮动会脱离文档流，会将后面没有浮动的元素覆盖，但不会覆盖文字。
b.浮动只有两个方向，左浮动或右浮动
c.当浮动元素碰到父元素的边界时，会停止浮动。
碰到前面浮动的元素时，会停止浮动，且排在一排显示。如果浮动的元素宽度大于父元素的宽度，会另起一行。
d.碰到前面未浮动的元素时，会另起一行进行浮动。
浮动遇到的问题：
当父元素没有设置固定高度时，子元素全部浮动，会导致父元素高度无法撑开。
解决方法：
a.给父元素设置固定高度
b.给父元素添加overflow:hidden
c.给父元素的最后加上一个空标签设置clear:both（这种方式会添加无意义的空标签，影响页面结构，不推荐使用）
d.使用伪元素选择器，给父元素添加伪类 after
（推荐使用）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>浮动</title><style type="text/css">.wrap{width: 250px;border: 2px solid red;/*清除浮动对外部元素的影响*//*overflow: hidden;*/}/*解决父元素无法撑开*//*.wrap:after{content: '';display: table;clear:both;}*/.item1{width: 100px;height: 100px;background-color: green;/*添加左浮动*/float: left;/*添加右浮动*//*float: right;*/}.item2{width: 105px;height: 105px;background-color: blue;/*添加左浮动*/float: left;}.item3{width: 90px;height: 90px;background-color: #f39;float: left;}.clear{/*清除前面浮动元素对当前元素的影响clear:both 清除两边元素浮动产生的影响left 清除前面元素左浮动带来的影响right 清除前面元素右浮动带来的影响*/clear: both;}</style></head><body><div class="wrap"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="clear"></div></div></body></html>
五、定位
（一）相对定位
relative
相对于元素原来的位置，进行偏移，参考点是原来位置的起始点（左上角）。
定位后原位置不会脱离文档流，定位后的是脱离文档流的，会覆盖。（像灵魂出窍）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>相对定位</title><style type="text/css">*{margin: 0;padding: 0}.wrap{width: 600px;height: 600px;border:1px solid red;margin-left: 100px;}.item1{width: 200px;height: 200px;background-color: #f33;/*相对定位*/position: relative;top: 200px;/*left: 200px;*/}.item2{width: 200px;height: 210px;background-color: blue;}</style></head><body><div class="wrap"><div class="item1"></div><div class="item2"></div></div></body></html>
（二）绝对定位和定位的层级
absolute
默认以body的左上角为参考点。
如果父元素有定位属性，那么绝对定位就以父元素的参考点进行偏移。
如果父元素没有定位属性，就再往上找一层，依次如此，若一直没有，就找到body为止。
定位后原位置会脱离文档流，定位后的是脱离文档流的，会覆盖。
定位的层级：z-index
只能给有定位属性的元素设置
<!DOCTYPE html><html><head><meta charset="utf-8"><title>绝对定位</title><style type="text/css">*{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-color: yellow;/*绝对定位*/position: absolute;top: 100px;left: 100px;z-index: 1;}.item2{background-color: 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>
（三）固定定位
fixed（又叫绑定定位）
脱离文档流。
相对于浏览器窗口进行定位。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>固定定位</title><style type="text/css">*{margin: 0;padding:0;}body{height: 2000px;}.top{width: 100px;height: 50px;background: blue;text-align: center;line-height: 50px;/*固定定位*/position: fixed;right: 20px;bottom: 20px;}</style></head><body><div class="top">返回顶部</div></body></html>
应用
侧边栏导航
<!DOCTYPE html><html><head><meta charset="utf-8"><title>demo</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}ul{width: 150px;background: rgba(0,0,0,0.15);/*给一个定位属性，确定内部元素定位的参考点*/position: relative;}li{padding-left:20px; padding-top: 10px;padding-bottom: 10px;}ul li:hover{background: #ff6700;}.inner{width: 600px;height: 600px;background: pink;/*绝对定位*/position: absolute;top: 0px;left: 150px;/*默认隐藏*/display: none;}ul li:hover .inner{display: block;}</style></head><body><ul><li>手机 电话卡<div class="inner">1</div></li><li>电视盒子<div class="inner">2</div></li><li>笔记本<div class="inner">3</div></li></ul></body></html>
