day12-宽高自适应

<!--

    宽度自适应的使用

    1.属性:width

    2.属性值:常规属性值(数值单位) 像素(px) 百分比(%)

    3.特点

        - 浏览器HTML+BODY是块级元素,宽度默认是100%,高度是0 ( 设置全屏效果或者移动端需要宽高百分百 )

        - 当"块级元素"设置宽度是100%或者不写宽度的时候默认会占满浏览器全屏 ( 通栏效果 )

        - 子级元素是块级元素的时候,不设置宽度也会和父级等宽 ( 宽度有继承性吗?没有 只是布局规范 )

        - 当块级元素没有设置宽度的时候会占满全屏,但是当其脱离文档流的时候宽度会由内容决定

        - 【总结】元素设置浮动或者定位一定切记要加宽高大小

 -->

<!--

    高度自适应的使用

    1.属性:height

    2.属性值:数值单位

    3.特点

        - 浏览器高度默认为0,通常需要设置html,body{height:100%}

        - 高度常见的设置的情况

            - 第一种情况:height为0      当前盒子就不显示了

            - 第二种情况:height为auto   自适应

            - 第三种情况:height直接不写  自适应

        - 常见的设置宽高为百分比的情况

            - 设置浏览器 html,body{height:100%}

            - 设置子级元素和父级元素大小一样 img{  }

    4.需求:在网页中有三个盒子

        - 第一个第三个盒子是固定的宽高大小

        - 第二个盒子要求

            - 如果没有子级内容的时候保持最小高度

            - 如果有自己内容的时候会被内容撑开做到自适应

 -->

<!--

    根据需求引出新的属性:最小高度的使用

    1.属性:min-height

    2.作用:

        - 当元素设置最小高度可以保持固定高度 height:固定值

        - 当内容较多的时候可以做到自适应效果 height:auto

    3.兼容:最小高度只能在高版本浏览器中使用

    4.解决:过滤器 _属性:属性值;

        - 高版本中使用:min-height

        - 低版本中使用:_height (height在低版本中效果和min-height是一样的)

 -->

<!--

    最大值

        - 最大宽度 max-width

            - max-width:1920px;标准的设计图宽度是1920px,版心宽度在1200px左右

        - 最大高度 max-height

            - b站,留言评论,当评论区的高度达到一直的值的时候可以做翻页功能

    最小值

        - 最小宽度 min-width

            - 第一个作用:学习移动端 判断当前设备的最大宽度和最小宽度

            - 第二个作用:

        - 最小高度 min-height ~

 -->

<!--

    高度塌陷/高度坍塌

    一.造成bug的原因:子级不占位置了就不会把父级的高度给撑开

        - 父级没有设置高度 => 自适应

        - 子级元素脱离文档流 => 浮动和定位

   

    二:解决高度塌陷的方法(bug/hack)

    1.在父级元素上设置overflow:hidden即可

        - 原理:设置了overflow可以触发BFC,在BFC中有一条规范:浮动元素也参与高度计算

        - 最简单的方法处理高度塌陷

    2.在最后一个子级元素后面添加任意标签,给这个标签设置属性

        - 属性: .clear-fix{clear:both}

        - 原理:清除上方预留出来的空间

        - clear表示清除浮动,属性值有left、right、both(两者)

        - 缺点:添加多余的标签会使布局混乱,代码冗余

   

    3.万能清除法(只要求会用不要求理解)

        - 代码:需要在父级元素上添加以下代码

        .clear-fix::after{

            content:"";

            display:block;

            width:100%;

            height:0;

            overflow:hidden;

            clear:both;

            visibility:hidden;

        }

 -->

<!--

    伪类选择器:hover 表示鼠标移入时候改变元素的状态样式

    一:伪对象/伪元素选择器

    1.::after{content:""} 表示在xx之后添加,必须要结合content一起使用(可以什么都不写,只是搭配而已)

    2.::before{content:""} 表示在xx之后添加,必须要结合content一起使用(可以什么都不写,只是搭配而已)

    3.选择器::first-letter{} 选择到第一个字符

    4.选择器::first-line{} 选择到第一行文本

    5.选择器::selection 鼠标选择文本时候状态改变

    二:css中常见的隐藏元素的用法

    1.display:none 表示将元素显示和结构完全给删除掉

    2.visibility:hidden 表示隐藏了内容,但是占位置

    3.透明度:opacity/rgba/transparent

    三:伪类和伪对象有什么区别?

    1.写法:在css2中伪类和伪对象都是一个冒号,在css3中区别给伪对象规定设置两个冒号

    2.作用:伪类可以改变元素的样式,伪对象不仅可以改变元素样式还可以添加结构(虚拟的/假的)

 -->