宽高自适应

pc端自适应

  pc端自适应: 元素的大小能够跟随这窗口或者子元素的大小自动调整

   宽高自适应:
    宽度:块级元素默认宽度100%
        或者width:auto; 
        或者宽度不写,默认跟随浏览器窗口或跟随父元素宽度
    高度: html,body{height:100%;}
        或者height:auto;
        或者不写,有子元素撑起来
			

浮动元素的高度自适应:

    高度塌陷:父元素未设置高度,子元素进行了浮动,那父元素的高度将会塌陷
    解决方法: 
方法1: 父元素设置overflow:hidde;
    缺点: 超出父元素的内容会被隐藏

方法2: 给父元素设置具体的高度
    缺点: 不灵活

方法3: 在浮动子元素下方添加一个块级兄弟元素并设置clear:both;
    缺点: 代码冗余

方法4： 万能清除法
     .clearFix:after{
            content:".";
            display:block;
            width:0;
            height:0;
            clear:both;
            overflow:hidden;
            visibility:hidden;
        }

伪元素选择器:

    :after{content:"";} 在...之后
    :before{content:"";} 在...之后

    :first-letter{} 第一个字的样式
    :first-line{} 第一行字的样式
    【注】只针对块级元素有效
	

显示隐藏:

    visibility:;
        visible 显示,默认值
        hidden 隐藏
        【注】隐藏后占据文档流

关于多种隐藏方式:

    1: display:none; 脱离文档流

    2: visibility:hidden; 占据文档流

    3: opacity:0; 以透明的方式来隐藏 占据文档流

    4: height:0; 不占据文档流
      【注】如果有文字内容，需要结合font-size:0;overflow:hidden; visibility:hidden;

    5: transform:scale(0); 采用缩放的方式来隐藏,占据文档流
	

关于透明:

    transparent 背景透明

    rgba(0,0,0,0) a--alpha 透明度 0-1

    opacity:0; 0-1 透明度
    兼容写法: filter:alpha(opacity=0);

最小最大宽高:

    min-width:最小宽度;
    max-width:最大宽度;

    min-height:最小高度;
    max-height:最大高度;
    【注】低版本浏览器不支持

iframe框架:

iframe框架:在网页中插入第三方页面

calc(100% - 200px): 计算模式，进行不同单位之间的运算
    【注】运算符前后需要添加空格
    应用:
        两栏布局
        三栏布局