html5 基础学习（有错误欢迎探讨）

1.宽度自适应

宽度自适应

当盒子宽度未设置时，会自动跟随父级等宽（不设置或设置100%会粘满全屏）

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

2.高度自适应

高度自适应

高度设置为auto / 或者不设置的时候，可以做到高度自适应，也就是无内容时高度为0，有内容时会根据内容的

变化改变高度（重点 - 自己元素适应父级元素 ）

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

3.最小高度

最小高度: min-height

- 没有内容的时候可以保持一个最小的固定高度 => height:固定值

- 有内容的时候会随着内容的数量撑开高度 => height:auto

最小高度的兼容问题:只能在高版本浏览器中使用

4.最大最小值的应用场景 —

最大最小值的应用场景

最大值

最大宽度 — max-width 考虑用户电脑的分辨率

设计图标准宽度是1920px 用户电脑是2880px的时候 设置最大宽度 左右两边留出空白

max-width：1920px 表示外围结构100%时自适应的最大值时1920px

最大高度 — max-height

一些门户网站

最小值

最小宽度 — min-width

后台布局

最小高度 — min-height 重要:最大宽度和最小宽度的使用 移动端布局 媒体查询~

5.高度塌陷

高度塌陷——也就值当内容浮动时 盒子边框自适应没有高度

— - 造成原因:父级没有高度设置(为了自适应),子级元素含有浮动属性(脱离文档流的属性) —

方法一

直接给父级添加高度

有点：简单操作 根本上解决问题

缺点：无法做到自适应

方法二

给父级添加overflow：hidden

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

优点：好用好理解

缺点：当自己元素有超出的时候会被隐藏起来

方法三

在当前最后一个元素后添加个一任意标签（div） div{ clear：both}

clear：both — 清除浮动（left 、 right）

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

优点：清楚方便

缺点：代码冗余 清楚一些空间时会造成结构混乱

方法四

万能清除法

原理：结合 二 三 两种方法 需要清除浮动并且触发BFC

只需要给父级元素添加类名 clear-fix

结合伪对象实现 ：：after{} — 在XX之后

.clear-fix::after{

content:'';

width:100%;

height:0;

display:block;

overflow:hidden;

clear:both;

visibility:hidden}

总的来说就是——结合方法二的触发BFC后使浮动元素参与高度计算

以及方法三中的添加标签后清楚上方空间

最后使用伪对象清楚所占的空间

5.伪对象的使用

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

伪对象选择器：

：：after{content：‘’}标识 在什么之后添加

：：before{content：‘’} 表示在什么之前添加

：：first-line 第一行

：：first-letter 第一个字符

写法上的区别

伪类 一个冒号

为对象 两个冒号

作用上的区别

伪类：对当前元素的状态进行改变

伪对象：新增一个虚拟的元素（虚拟结构）

总结:常见的隐藏方式

display:none 删除结构

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

overflow:hidden

rgba(,,,0)

opacity