今日学习内容

一、优先级
1、当选择器的权重值一致时，他会按照顺序执行，后面的样式会覆盖前面的样式（操作同一个元素时）
2、各个选择器之间的权重：标签0001，class0010，id0100，important最高
3、！important可以提高权重/优先级
4、样式覆盖：相同属性设置操作了相同的元素
5、what：当制作网页的过程中不知道哪个优先显示的时候
6、继承：在父元素上设置的某些属性在子元素上可以起作用
7、为什么要学习继承：知道为什么元素没有设置样式，但是样式发生改变（解决问题）
哪些属性可以继承（了解）
8、字体的继承：font-size都可以继承/color 除了超链接以外的都可以继承...
注意：继承优先级最低，只要在元素自身上设置相同的属性，就可以把继承的样式给覆盖掉
二、css元素类型之间的相互转化
1、什么是元素类型之间的相互转化：元素类型之间的相互变化
2、为什么要进行元素类型之间的相互转化：优化用户的体验（例如、a标签转化为可以设置宽度高度的元素；、解决浮动的能解决的一部分问题）
3、怎么进行转化：（块元素和行内元素）dispaly：inline行内元素    block块元素      inline-block行内块元素
4、元素的分类
（1）块元素：h标签，段落标签，div，ul li，ol li，dl dt dd，
、独自占据一行
、可以设置宽度和高度
、可以设置text-align
（2）行内元素：a标签，span，文本格式化标签【加粗b、strong、倾斜i、em】
、不能独自占据一行，
、除了img之外都不能设置宽度和高度
、不能用text-align（有争议）
（3）行内块元素：input（不继承父元素宽度）
、可以设置宽度和高度
、不能独自占据一行
、可以用text-align
注意：不能把行内块元素转化为行内元素
5、元素如果想转化为块元素需要在head中加display：block
      元素如果想转化为行内元素需要在head中加display：inline
      元素如果想转化为行内块元素需要在head中加display：inline-block
三、链接伪类选择器
1、a：link未访问的链接
2、a：visited已访问的链接
3、a：hover鼠标悬停时链接的变化 
、鼠标悬停时内容的隐藏与显示     选择器：hover 要显示的元素【要显示的元素必须在选择器里面】 {}a标签可以切换成其他的选择器
4、a：active鼠标点击时发生的变化 a标签也可以切换为其他的选择器
5、display：none隐藏元素
四、导航栏带滑动下拉的制作
先把ul下的隐藏，然后加上代码，滑动到ul的时候隐藏的li就会显示
        li{
            display: none;


        ul:hover li{
            display: block;
        }

王雅彬 22:03:45
一、vertical-align属性 文字与图片的位置
1、垂直对齐：在垂直方向设置元素的位置
2、应用场景：log垂直居中、下拉菜单垂直居中、控制文本与图片的位置
3、语法：verticla-align（必须转化为行内块）
4、文字与图片的位置
只有元素类型是行内或者行内块元素才支持vertical-align属性
vertical-align：baseline；默认值   baseline基线
vertical-align：middle；垂直在line-height范围居中对齐（就是图片外面字体的位置）
vertical-align：top；垂直方向上在line-height的顶端对齐
vertical-align：bottom；垂直方向上在line-height的底端对齐
vertical-align：text-top；垂直方向上在文字的顶线对齐
vertical-align：text-bottom；垂直方向上在文字的底线对齐

二、White-space属性 空白区域的设置
white-space：normal；默认值
white-space：nowrap；文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
white-space：pre；空白符会被保留，就是说浏览器可以识别空格。
white-space：pre-line；合并空白符序列，但是保留换行符。
white-space：pre-wrap；保留一部分空白符序列，但是正常的进行换行
区别【pre：保留所有的空白区域并且强制在一行中显示
   pre-wrap：没有完全保留空白区域，不让他强制在一行中显示
   pre-line：保留部分空白区域（在文本中的换行显示）】
三、Overflow属性（设置超出盒子模型部分内容的显示状态）
overflow:visible;visible:默认值，内容不会被修剪，会呈现在元素框之外；
overflow:hidden;hidden：内容会被修剪，并且其余内容是不可见的；
overflow:auto;auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;（字体超出才会有条）
overflow:scroll;scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;（字体不超出也会有条但是不能滚动）
四、Text-overflow属性 对文本溢出的处理
text-overflow：clip；默认情况（加完overflow：hidden之后效果一样），不显示省略号（...），而是简单的裁切;
text-overflow：ellipsis；当单行文本溢出时显示省略标记
注意：要加下面三个值才能实现

五、多行文本溢出（不咋用这个是老版盒子模型的）
display: -webkit-box; （转化为老版盒子模型）  将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;   设置或检索伸缩盒对象的子元素的排列方式 
-webkit-line-clamp: 3;   用来限制在一个块元素显示的文本的行数（在第几行中显示。。。）
texe-overflow：ellipsis
overflow: hidden;
六、宽高自适应
1、定义：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
      元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
、不设置宽度   一般给的是最大的盒子（float之后宽度无法继承来自父元素的宽度）
、宽度的单位不用px，用相对单位比如%；  一般都是里面的容器
、用min-width、max-width设置。 用在响应式布局上
 
宽度自适应：当页面显示的区域大于这个宽度时会根据宽度百分比缩放，
如果小于等于这个宽度时会被覆盖住   参考案例：小米放大缩小  

高度自适应
、高度不写，
  存在问题：如果子元素浮动，父元素会高度塌陷。(高度塌陷)
、高度的单位不用px，用相对单位比如%；
  默认情况下，height用%是不生效的，需要给  body,html{height:100%;}
、用min-height、max-height设置。
  min-height对于IE6不兼容，需要调试。
七、伪对象选择器（权重值是1）

八、
visibility:hidden和display:none;的区别？
visibility:hidden/visible;隐藏/可见
visibility:hidden;和display:none;相同点都是隐藏显示的区域
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。
九、清除高度塌陷的四种解决方法
1、给产生高度塌陷的父亲元素加overflow：hidden
实现原理；触发bfc，bfc在计算高度时会把浮动的元素的高度计算在内
缺点：如果有定位的元素时则会隐藏！！！！！！！


2、额外标签法：给产生高度塌陷的元素最后面添加一个div（必须添加一个块元素行内内元素不行），并且给他设置高度为0，clear：both（清除浮动对添加div的影响）
实现原理：清除浮动带来的影响
缺点：代码的冗余




3、after伪元素（堵住后面打儿子）：after{content"."；display：block；vlear：both；height：0；overflow：hidden；visibility：hidden}
好处：a、如果一个界面中有多个高度塌陷的存在，减少重复代码的使用量
    b、避免了定位元素被隐藏



4、双伪元素（堵前门后门打儿子）
和上面的第三种一样唯一不一样的地方就是display转换的元素不一样