今日所学内容：
- 1.CSS的浮动
- 传统网页布局的方式
- 标准流
- 所以的标准流就是标签按照规定好默认方式进行排列
- 块元素单独占一行，行内元素和行内块元素可以一行显示多个。
- 浮动
- 浮动的属性 float
- 属性值
- right 右浮动
- left 左浮动
- none（默认值，没有浮动）
- 为什么需要浮动
- 有很多布局方式使用标准流无法完成，但是浮动可以解决，浮动可以改变元素默认的排列方式。
- 网页布局准则：多个块元素纵向排列找标准流，多个元素要横向排列找浮动。
- 浮动的特性
- 浮动的盒子具有行内块元素的特点（一行可以显示多个，可以设置宽高）
- 网页布局的方式
- 先用标准流的盒子进行上下排列，内部的子元素采用浮动的方式进行左右排列。
- 浮动的元素只会影响后面的标准流，对前面的标准流没有影响
- 理论上来说，只要一个盒子浮动了，那么其他的兄弟元素也需要浮动。
- 清除浮动
- 为什么要清除浮动
- 由于父盒子在很多情况下不方便给高度，但是子盒子浮动起来又不占位置，最后父元素的高度会变成0，会影响后面的标准流。
- 清除浮动的方法
- 1、额外标签法
- 额外标签法会在浮动的元素末尾添加一个空标签，要求这个标签必须是块级元素
- 优点：书写简单
- 缺点：会添加很多没有意义的标签，结构比较差
- 2、给父级添加overflow:hidden;
- 3、给父级添加单伪元素
- 2.CSS的定位
- 为什么需要定位
- 定位可以让盒子自由的在某个盒子内部进行位置移动，或者固定在屏幕中的某个位置，并且它可以压住其他盒子。
- 定位的组成
- 定位 = 定位的模式 + 边偏移
- 定位模式：就是来指定这个元素在html文档中的定位方式，指定定位模式的属性是position
- static（静态定位）
- 静态定位其实就是元素的默认定位方式，也就是无定位（标准流）
- 语法：
- 选择器 {position:static;}
- relative （相对定位）
- 相对定位是元素在移动位置的时候，是相对于他自己原来的位置来说的。
- 特点
- 它是相对于自己原来的位置进行移动的
- 原来在标准流的位置继续占有，后面的盒子还是按照标准流去对待它（没有脱标）
- 特点
- 1、如果祖先元素没有定位，那么就以浏览器为标准进行偏移
- 2、如果没有祖先元素，那么就以浏览器为标准进行偏移
- 3、如果祖先元素有定位（相对、绝对、固定）, 则以最近的一级有定位的父级元素为标准进行边偏移。
- 5、子绝父相，子元素是绝对定位，父元素就是相对定位（相对定位更多是为了限制绝对定位的子盒子在父元素内部）
- 边偏移：决定该元素的具体的偏移量，以及最终的位置。
- left 距离左侧的偏移量、right 距离右侧的偏移量、top 距离顶部的偏移量、bottom 距离底部的偏移量
今日遇到问题：无
解决问题的方法：无
|
