CSS02
CSS的浮动
传统网页布局的方式
标准流
所以的标准流就是标签按照规定好默认方式进行排列
块元素单独占一行，行内元素和行内块元素可以一行显示多个。
浮动
浮动的属性 float
属性值
right 右浮动
left 左浮动
none（默认值，没有浮动）
为什么需要浮动
有很多布局方式使用标准流无法完成，但是浮动可以解决，浮动可以改变元素默认的排列方式。
网页布局准则：多个块元素纵向排列找标准流，多个元素要横向排列找浮动。
浮动的特性
浮动的盒子具有行内块元素的特点（一行可以显示多个，可以设置宽高）
浮动的元素会脱离标准流（脱标）
浮动的盒子不再占有原来标准流的位置
浮动的盒子无法压住图片和文字
网页布局的方式
先用标准流的盒子进行上下排列，内部的子元素采用浮动的方式进行左右排列。
浮动的元素只会影响后面的标准流，对前面的标准流没有影响
理论上来说，只要一个盒子浮动了，那么其他的兄弟元素也需要浮动。
清除浮动
为什么要清除浮动
由于父盒子在很多情况下不方便给高度，但是子盒子浮动起来又不占位置，最后父元素的高度会变成0，会影响后面的标准流。
清除浮动的方法
1、额外标签法
额外标签法会在浮动的元素末尾添加一个空标签，要求这个标签必须是块级元素
优点：书写简单
缺点：会添加很多没有意义的标签，结构比较差
2、给父级添加overflow:hidden;
3、给父级添加单伪元素
4、给父级添加双伪元素
CSS的定位
为什么需要定位
浮动是可以让多个盒子在一行上个没有缝隙的排列
定位可以让盒子自由的在某个盒子内部进行位置移动，或者固定在屏幕中的某个位置，并且它可以压住其他盒子。
定位的组成
定位 = 定位的模式 + 边偏移
定位模式：就是来指定这个元素在html文档中的定位方式，指定定位模式的属性是position
static（静态定位）
静态定位其实就是元素的默认定位方式，也就是无定位（标准流）
语法：
选择器 {position:static;}
注意点：静态定位没有边偏移，基本不用。
relative （相对定位）
相对定位是元素在移动位置的时候，是相对于他自己原来的位置来说的。
选择器 {position:relative;}
特点
它是相对于自己原来的位置进行移动的
原来在标准流的位置继续占有，后面的盒子还是按照标准流去对待它（没有脱标）
absolute（绝对定位）
绝对定位是元素在移动的时候参照它的祖先元素来说的
语法
选择器 {position:absolute;}
特点
1、如果祖先元素没有定位，那么就以浏览器为标准进行偏移
2、如果没有祖先元素，那么就以浏览器为标准进行偏移
3、如果祖先元素有定位（相对、绝对、固定）, 则以最近的一级有定位的父级元素为标准进行边偏移。
4、绝对定位的盒子不再占有原来的位置（脱标）
5、子绝父相，子元素是绝对定位，父元素就是相对定位（相对定位更多是为了限制绝对定位的子盒子在父元素内部）
fixed（固定定位）
固定定位是元素固定于浏览器的可视区域的位置
语法
选择器 {position:fixed}
特点
1、以浏览器的可视窗口为参照点移动元素位置
2、不随滚动条滚动，而且和它的父元素没有关系
3、固定定位的盒子不再占有原先的位置（脱标的）
边偏移：决定该元素的具体的偏移量，以及最终的位置。
left 距离左侧的偏移量、right 距离右侧的偏移量、top 距离顶部的偏移量、bottom 距离底部的偏移量
字体图标的使用
使用方法
1、登录阿里巴巴的字体图标库https://www.iconfont.cn/
2、寻找字体图标
3、将相应的图标添加进购物车
4、在购物车中将字体图标的代码下载下来
5、解压到项目文件夹中
6、在demo_index.html文件中查看字体图标的类名
7、引入字体图标，字体图标的类名不要复制自带的"."
|
