6 day06 CSS
6.1 显示与隐藏
6.1.1 display
none : 表示隐藏，元素不再占领页面空间常用。
block : 表示块级元素的效果。
Inline : 表示内联元素的效果。
Inline-block : 表示内联块级元素——块级元素可以水平排列。
6.1.2 visibility
hidden : 表示隐藏——元素依然占据页面空间位置。
Visible : 默认值——表示显示。
6.2 内容溢出
概念 - 子元素的范围超出父元素，显示在父元素之外。
6.2.1 解决溢出——overflow
* hidden - 表示超出部分隐藏 - 超出部分查看不了
* scroll - 表示提供显示滚动条 - 不超出也有滚动条
* auto - 表示自动
* 如果有超出部分，提供显示滚动条
* 如果没有超出部分，不提供滚动条
6.2.2 浮动
1. 文档流 - 页面中元素的默认排列规则
* 块级元素 - 垂直排列
* 内联元素 - 水平排列，自动换行
2. 浮动 - float
* none - 默认值，表示不浮动
* left - 表示左浮动
* right - 表示右浮动
3. 特点
* 兄弟元素
* 后一个元素设置浮动，不能超过前一个元素
* 父子元素
* 子元素设置浮动，不能超出父元素
6.3 补充页面布局常规知识
6.3.1 套路（规律）
* 将表格中的行和列的概念引入页面布局
* 将盒子模型的概念引入页面布局
* 默认盒子模型 - content-box
* 怪异盒子模型 - border-box常用
* 实际宽度 = width
* 实际高度 = height
6.3.2 高度塌陷（浮动的问题BFC（面试题））
* 高度塌陷的效果
* 定义两个元素是父子结构，为子元素设置浮动(父元素不设置高度)
* 注意
* 高度塌陷的效果是符合父子结构的浮动效果
* 在实际开发中，不希望出现这种效果
* 解决方案 – BFC（面试题）
* 什么是 BFC
* BFC 的开启方式
* overflow:hidden/auto解决溢出
* clear:both/left/right - 必须新增一个子元素(最后)
* BFC 的问题
6.3.3 position定位
一、概念
1 CSS 定位 - 表示的是某个元素在当前页面中的位置
* 定位一定会有坐标轴的概念出现
* 一个元素在当前页面的位置，其实就是一个坐标值(x,y)
* CSS 定位就是将坐标值(x,y)转换成 CSS 中某个具体的属性使用
2 定位的值
* static - 默认值，表示静态定位
* 注意 - 并没有坐标值的概念，按照文档流规则进行定位
* absolute - 表示绝对定位
* fixed - 表示固定定位
* relative - 表示相对定位
3 开启定位
* HTML 页面中所有的元素，默认都是不开启定位
* position:static - 没有坐标值
* 通过 CSS 的 position 属性开启定位
* position 的值设置为非 static 的值
4 偏移量
* 概念
* 偏移量 - 某个元素相对于初始位置的移动的距离
* 一个元素在页面中只有两种移动效果
* 垂直方向
* 水平方向
* 提供四种偏移量
* top - 表示距离顶部的空间
* right - 表示距离右边的空间
* bottom - 表示距离下边的空间
* left - 表示距离左边的空间
* 偏移量的作用
* 同时使用 top 和 left 时 - 常用方式
* top和left就是坐标轴中的坐标值的概念 - (x,y) = (left,top)
* 如果使用 bottom 或 right 时
* 当前元素定位在页面的底部时 - 使用 bottom
* 当前元素定位在页面的右边时 - 使用 right
* 至少可以使用 left 进行替换
6.3.4 static 默认（不开启定位）
看上文。
6.3.5 绝对定位
* 特点
* 绝对定位的元素脱离文档流
* 绝对定位的元素呈现块级效果
* 只是开启绝对定位，而不设置坐标值的话 - 位置不会发生变化
* 定位效果
* 绝对定位的元素的父元素是<body>，相对于页面定位
* 绝对定位的元素的父元素不是<body>
* 如果父元素没有开启定位，相对于页面定位
* 如果父元素开启了定位，相对于父元素定位
6.3.6 固定定位 - fixed
* 固定定位是绝对定位的一种特殊定位
* 固定定位只相对于浏览器窗口定位
6.3.7相对定位 - relative
* 注意
* 开启相对定位的元素并没有脱离文档流
* top 和 left 的值为 0 时，相对定位的元素位置没有发生任何变化
* 父元素是否开启定位，并不会影响当前子元素开启定位的效果
* 定位参考
* 相对于当前元素在文档流中的位置
6.3.8 实际开发中的定位 - 父子元素
* 父元素设置绝对定位，子元素设置绝对定位
* 父元素设置绝对定位，子元素设置相对定位
* 父元素设置相对定位，子元素设置相对定位
* 父元素设置相对定位，子元素设置绝对定位
父亲相对——不脱离文档流；
儿子绝对——脱离文档流。
TODO 讨论定位的四种情况
TODO 1. 父元素设置绝对定位，子元素设置绝对定位
TODO * 父元素的绝对定位相对于当前页面
TODO * 设置偏移量时，父元素和子元素同时移动
TODO * 可以使用 overflow 解决内容溢出问题
TODO * 子元素的绝对定位相对于父元素
TODO * 设置偏移量时，只有子元素移动，而父元素不移动
TODO * 设置的偏移量超出父元素的范围，出现内容溢出
TODO 2. 父元素设置绝对定位，子元素设置相对定位
TODO * 父元素的绝对定位相对于当前页面
TODO * 设置偏移量时，父元素和子元素同时移动
TODO * 实际上，子元素相对定位没有发生变化
TODO * 可以使用 overflow 解决内容溢出问题
TODO * 子元素的相对定位相对于初始文档流的位置
TODO * 设置偏移量时，只有子元素移动，而父元素不移动
TODO * 设置的偏移量超出父元素的范围，出现内容溢出
TODO 3. 父元素设置相对定位，子元素设置相对定位
TODO * 父或子元素都是相对于初始文档流的位置
TODO 4. 父元素设置相对定位，子元素设置绝对定位
TODO * 父元素的相对定位相对于初始文档流的位置
TODO * 子元素的绝对定位相对于父元素
TODO 在实际开发中
TODO * 作为父元素的定位，一般都使用相对定位
TODO * 不将父元素脱离文档流 - 不会出现覆盖现象
TODO * 作为子元素的定位，一般都使用绝对定位
TODO * 我们对子元素的位置的判断更容易一些
*/