h5 day09笔记 2021.08.26

宽度自适应：

--1）块级元素，设置宽度为100%或不设置，会占满全屏；

--2）块级元素不设置宽度时，会和父级等宽；

--3）当块级元素脱离文档流时，宽度随自身内容决定（盒子一定要加宽高）

高度自适应：

--1）高度不设置时，元素不显示；（浏览器高度默认为0，宽度默认100%）

--2）高度不设置或为auto时，为自适应，高度由自身内容撑开；

--3）子级元素适应父级元素的情况：

html,body{width:100%;height:100%}   ----全屏案例和移动端布局的必要前提条件

img{width:100%;height:100%}   ----拉伸变形

最小高度：min-height

--无内容时保持最小固定高度

--有内容时随内容本身撑开高度

兼容问题：只能在高版本浏览器中使用

应用场景：

最大宽度 max-width： 设计图标准宽度是1920px，用户电脑分辨率是2880px（max-width：1920px  表示外围结构100%自适应的最大值是1920px）

最大高度 max-height：门户网站

最小宽度 min-width：后台布局

最小高度 min-height

最大宽度和最小宽度的使用：移动端布局 媒体查询

高度坍塌：网页布局的bug

原因：父级没有设置高度ziji（为了自适应），子级元素含有浮动性（脱离文档流的属性）

解决方法：

1）给父级添加高度；---优点：简单，从根本上解决问题；----缺点：无法做到自适应；

2）给父级添加overflow:hidden；---优点：好用好理解；----缺点：当子集元素有超出时会被隐藏； 

--原理：触发了BFC（块级格式化上下文）中的布局规则：浮动元素也会参与高度计算；

3）在当前最后一个元素后添加任一标签（如div） div{clear：both}；---优点：清除方便；----缺点：代码冗余，结构混乱；

--原理：清除上方预留出的空间；        clear（清除浮动）：left/right/both

4）万能清除法：

clear-fix::after{

content:'';

width:100%;

height:0;

display:block;

overflow:hidden;

clear:both;

visibility:hidden}

--原理：结合2/3两种方法，清除浮动且触发BFC，只需给父级元素添加类名clear-fix，结合伪对象实现；

伪类选择器: link、active、hover、visited

伪对象选择器:

::after{content:''} 表示在xx之后添加...

::before{content:''} 表示在xx之前添加...

::first-line 第一行

::first-letter 第一个字符

伪类和伪对象的区别：1）写法上： css2中两者都是一个冒号，css3中为了区别，伪对象有两个毛冒号；2）作用上：伪类 hover只能改变元素状态，如大小颜色等，伪对象可添加新的结构（虚拟结构）；

常见的隐藏方式：

display:none 删除结构

visibility:hidden 删除显示内容 结构还存在于浏览器中

overflow:hidden 文本溢出隐藏

rgba(,,,0)  透明度

opacity