009 HTML+CSS(Class078 - 111)
[A] float属性
文档流的概念：文档流是指文档中可现实对象在排列时所占用的排列位置
如 块 默认为独占一行，上下排列；内联默认为左右排列
float特性：加浮动的元素，会脱离默认的文档流，，会沿着父容器靠左或者靠右排列，如果之前有浮动的元素，则会紧挨着浮动元素进行左右排列，当行满时会自动换行。
可选值：left，right，none
【注意点】1. 含有浮动的元素只会影响其后的元素，不影响它之前的元素
如 三个上下排列的div，第二个浮动，则结果是，第一第二个div上下排列，第三个在第二个下面，紧挨着第一个div
2. 浮动的内容默认提升半层，文字部分提升一个半层，这样就可以实现图片和文字的混排
3. 浮动元素的宽度默认由其内容(如文字)决定
4. 主要给块添加浮动，耶尔可以给部分内联添加
清除 float 属性方法：
1. clear 属性清除浮动
可选值：left，right，both，分别清楚左浮动，清楚右浮动，清楚左右浮动
2. 当存在嵌套排列时，浮动的子元素无法撑开父元素，导致后续的排版出问题，此时由若干方法解决
1. 给父元素设定固定宽高
不推荐，固定宽高不适用于实现自适应效果
2. 父元素也浮动，使得父元素和子元素在同一层
不推荐，父元素浮动，会影响后面的排布
3. overflow：hidden(BFC规范)，将超出父元素的内容隐藏掉
不推荐，因为子元素溢出时无法显示
4. display：inline-bolck(BFC规范)，将父元素设置为内联块的显示模式
不推荐，父元素会影响面的排版
5. 设置空标签，在子元素后面设置一个空标签，该空标签添加清楚浮动属性
不推荐，因为要多添加一个空标签
6. after伪类方法，将子元素后面的内容通过after伪类添加
【实现方式】.elem: after{ content: ""; clear: both; display: block} 注：clear只能清除块标签，不能清楚内联，故这里先转换成块标签，再清楚float属性
[B] position定位属性
语法：position：relative；left：100px；top：200px； 相对定位，左侧空出100px(等同于向右偏移100px)，上方空出200px(等同于向下偏移200px).
可选值：static 默认值
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
relative相对定位相关说明：
1. 如果没有定位偏移量，即：只有position：relative；则对元素本身没有任何影响
2. 不使元素脱离文档流，即若元素向下偏移100px，则其后的所有元素均同等的向下偏移100px
3. 不影响其他布局，虽然不使元素脱离文档流，造成其后的元素偏移，但是不会改变他们的布局
4. left，right，topbottom时相对于当前元素自身进行偏移的
absolute绝对定位相关说明：
1. 使元素完全脱离文档流
2. 使内联元素支持宽高(即让内联元素具备块特性)，默认的内联元素是不支持宽高的
【强调】若内联元素包含有宽高属性，则该属性设置默认是无效的，但是若该内联元素同时有宽高属性，还有position: absolute属性，则宽高设置有效
3. 使块元素默认宽由内容决定(让块具备内联的特性)，默认块元素的宽是占满整行的
【强调】若块元素包含有position: absolute属性，则块元素的宽是由内容决定的，效果如同把块元素转换成了内联
4. 如果有定位祖先元素，则相对于定位祖先元素发生偏移，没有定位祖先元素，则相对于整个html文档发生偏移(绝对，相对，固定)
【解释】定位祖先元素：即某个元素的父元素，或者父元素的父元素......若有position属性(relative，absolute，fixed均可)，则该父元素，父元素的父元素...都是该元素的定位祖先元素。
若某元素的存在一个定位祖先元素，则相对于该定位祖先元素进行偏移，若无则相对于整个html文档进行偏移
fixed固定定位相关说明：
1. 使元素完全脱离文档流
2. 使内联元素支持宽高(即让内联元素具备块特性)，默认的内联元素是不支持宽高的
【强调】若内联元素包含有宽高属性，则该属性设置默认是无效的，但是若该内联元素同时有宽高属性，还有position: absolute属性，则宽高设置有效
3. 使块元素默认宽由内容决定(让块具备内联的特性)，默认块元素的宽是占满整行的
【强调】若块元素包含有position: fixed属性，则块元素的宽是由内容决定的，效果如同把块元素转换成了内联
4. 相对于整个浏览器窗口进行定位的，不受浏览器滚动条的限制
【注】该属性不受父元素的限制，可做窗口弹窗，页面底部设置返回顶部等等
sticky粘性定位相关说明：
在指定的位置进行粘性操作
如 position：sticky；top：100px；使得当前元素黏在离可视窗口顶部100px的位置，当华东滚动条时，元素在离可视窗口顶部100px到可视窗口底部的区间内滚动
z-index定位层级相关说明：
1. 元素的默认定位层级为0
两个同一层级的元素，定位层级都为0，若有重叠，后写的会覆盖前面的，可以通过position：absolute；z-index：正整数/负整数；提高/降低某个元素的层级
2. 嵌套时的层级问题
一个嵌套结构的层级与父元素的层级相同，及时子元素的层级高于父元素，层级以父元素为准，若父元素没有 position：absolute属性，则由外向内的第一个有定位属性的内层元素决定
[C] 定位实现下拉菜单
练习
[D] 定位实现元素居中
【实现方法】给父元素添加定位属性，然后通过绝对定位，使子元素的左上角相对于父元素居中，然后再根据子元素的实际大小，向右向上偏移
【具体实现】
/* 元素2包含在元素1中 */
<style>
#d1{ width: 300px; height: 300px; background-color: cornsilk; position: relative;}
#d2{ width: 100px; height: 100px;background-color: crimson; position: absolute;
left: 50%; top: 50%; margin: -50px 0 0 -50px;
}
</style>
此外，利用定位也可以实现装饰点。
[E] CSS中添加省略号
【实现效果】当一段我呢子内容比较多的情况下，希望多余的部分以省略号代替。
若要实现添加省略号，需满足：
1. width：100px
必须要有一个固定的宽
2. white-space：nowrap
不让内容折行
3. overflow：hidden
溢出部分隐藏
4. text-overflow：ellipsis
添加省略号
[F] CSS Sprite
待议
[G] CSS border-radius圆角设置
可选值： 10px 一个数，四个角均为半径10px的圆角
10px / 20px 椭圆角
10px 20px 30px 40px 四个数，分别为左上，右上，右下，左下四个方位的圆角半径
【注】合理的圆角半径可以画出半圆，圆等效果
[H] PC端布局练习：企业类型页面设计
通栏：自适应浏览器的高度
版心：固定一个高度，并且让容器居中
[ I ] PC端游戏类型整页制作
练习
