day09

1.垂直对齐：在垂直方式设置元素的位置
  应用场景：log垂直居中，下拉菜单垂直居中，控制文本与图片的位置
  语法：vertical-align
  属性值：middle/top/text-top/bottom/text-bottom/baseline
        middle【实现垂直居中】/te'xtext-top【重要】/text-bottom【文字的最下放】/top【line-height的最上方】
        /bottom【line-height的最下方】
2.实现不同大小logo垂直居中
  1.搭建骨架的结构
  2.清除浏览器自带的内外边距，以及li自带的样式
  3.设置ul的宽度高度，并且让他水平居中
  4.让所有的li显示在一行中，并且给她设置宽度，高度，水平居中，line-height
  5.设置图片的样式：转化为行内块，设置行高，让内容垂直居中
  6.设置鼠标滑过之后背景图片的变化
3.wrap-space
  white【白色】 space空白  空白区域的设置 
  white-space: nowrap; 
  强制内容在一行中显示出来 
  white-space: pre; 
  white-space: pre-line;
  white-space: pre-wrap; 
  pre:保留所有的空白区域，并且强制在一行中显示出来
  pre-wrap: 没有完全保留空白区域，不让他强制在一行中显示
  pre-line:保留部分空白区域【在文本中的换行显示】
6. overflow:设置超出盒子模型部分内容的显示状态
            hidden:溢出隐藏
            scroll:显示滚动条【一直有】
            auto:在文本溢出时显示滚动条
            visible:默认值【了解】
   text-overflow：ellipsis单行文本溢出时显示“...”
                  clip默认情况【加完overflow:hidden之后】
7 .wrap{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* display:flex */
            /* 转化为老版的盒子模型
             */
            display: -webkit-box;
            /* 设置对齐方式 */
            -webkit-box-orient: vertical;
            /* 设置行数：在第几行中显示。。。 */
            -webkit-line-clamp: 3;
            /* 溢出隐藏 */
            overflow: hidden;
            text-overflow: clip;
        }
8.宽度自适应
   1.width设置百分比
   2.不设置宽度，默认继承父元素的宽度
     float之后宽度无法继承来自父元素的宽度
     min-width:作用当页面显示的区域大于这个宽度是，会根据宽度百分比缩放，如果小于等于这个宽度时，会被覆盖住
     参考案例：小米官网放大缩小
9.高度自适应
  1.不设置高度，靠自身元素撑起来
  2.如果子元素浮动，父元素高度会塌陷
  3.高度的单位不用px，用相对单位比如%，默认情况下，height用%不生效，需要给body，html{height：100%}
  4.用min-height、max-height设置
10.高度塌陷
   产生原因：所有的子元素浮动，父元素没有设置高度，最近的父元素会高度塌陷
   解决方法1：给产生高度塌陷的元素加overflow：hidden
   实现原理：触发bfc,bfc在计算高度时会把浮动的元素的高度计算在内
   缺点：如果有定位的元素时，则会隐藏【切记！！】
   解决方法2：给产生高度塌陷的元素最后面加一个div，并且给它设置高度为0，clear:both【清除浮动对添加的div的影响】
   实现原理：清除浮动带来的影响
   缺点：代码的冗余
   解决方法3：万能方法：   ：after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden}
    .wrap:after{
            /* 给他加一个小。 */
            content: '