HTML5+CSS

一、自适应。
  1.概念：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口宽度
  或子元素多少自动调整宽度和高度，这就是自适应。
  2.宽度自适应：不写宽度，让元素的宽度随着浏览器窗口大小改变而改变。
    默认值：width:auto;
  3.高度自适应：不写高度，高度由子元素撑开，随着子元素多少，自动调整。（好处是不会溢出）
    height:auto;
  4.浮动元素的宽度自适应问题
    元素浮动后默认转为块元素，
    块元素如果不写宽度，默认独占一行，但是在浮动后，宽度由内容撑开。
  5.浮动元素的高度自适应问题
    高度塌陷：父元素不写高度，子元素浮动，会造成高度塌陷。
      解决：
        <1>给父元素添加高度。（父元素就不自适应了。）
        <2>给父元素添加overflow:hidden;(当我们需要元素超出盒子范围时，使用此属性不合适)
        <3>在父元素最后边添加一个子元素，使用clear:both解决高度塌陷。(弊端：页面中多了
          很多的空标签，影响页面结构)
        <4>万能清除浮动法。
          塌陷元素::after{
            content: "";
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
          }
      总结：能用overflow:hidden解决的就用它解决，不能解决再去考虑万能清除浮动法。
  6.BFC:块级格式化上下文。
    <1>作用：有些属性可以触发bfc，为自身创建一个作用域模块，以用来解决
    margin-top穿透问题、高度塌陷问题。
    <2>什么是matgin-top穿透问题：父元素下边的第一个子元素添加margin-top会出现在父元素身上。
    <3>哪些属性可以触发bfc:
      overflow:hidden，auto，scroll
      float:left/right;
      position:absolute、fixed;
      弹性盒
      inline-block
  7.clear    清除浮动影响
    left      清除左浮动造成影响
    right     清除右浮动造成影响
    both      清除两侧浮动造成影响
  8.伪元素选择器
    伪类选择器
    :hover{

    }
    伪元素选择器
    ::after{         在...之后（需要搭配content使用）
      content:'';
    }
    ::before{         在...之前（需要搭配content使用）
      content:'';
    }
    ::first-line{}    选中...的第一行
    ::first-letter{}  选中...的第一个字符
    区别：伪类选择器是单冒号，伪元素选择器是双冒号。
二、元素显示、元素隐藏和元素透明。
  1.元素隐藏
    <1>display:none;      元素隐藏和消失，元素不再占据页面空间
    <2>height:0px;搭配overflow:hidden;  元素高度和元素溢出
    <3>opacity:0;           元素透明，元素并未消失。
    <4>visibility:hidden;   元素隐藏和消失，元素仍占据页面空间。
        hidden           消失
        visible(默认值)   元素出现
    <5>transform:scale(0);  元素缩放，缩放为原本的0倍，达到元素消失。(下周讲)
  2.元素透明
    opacity       元素透明   0-1   0全透明——1不透明
    transparent   透明色
    rgba(0-255,0-255,-255,0-1)      透明色，前三个参数为红绿蓝三色域取值，第四个参数为透明度(0-1）
三、最小最大宽高
    max-width         最大宽度
    min-width         最小宽度
    max-height        最大高度
    min-height        最小高度
    元素在不去写宽高时
      <1>宽度按照最大宽度或者实际宽度显示(浏览器窗口小于最大宽度时)
      <2>高度按照内容高度去显示。如果没有内容或者小于min-height就按照min-height显示，
      如果内容大小超出max-height，按照max-height显示。
四、iframe     页面嵌套
  作用：iframe是用来在网页中插入第三方页面，可以把一些网站的公共部分摘离出来，通过iframe按需引入即可。
五、宽高满屏
    html,body{
      height:100%;
    }
    .xx{
      height:100%;
    }
六、calc计算函数
  作用：用于动态计算长度值，运算顺序和数学运算顺序一致。
  注意：运算符前后需要加空格。