菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: css4-门帅2022111 [打印本页]

作者: I1220 时间: 2022-11-15 23:01
标题: css4-门帅2022111
今日学习内容
一CSS的浮动
1.标准流
2.浮动：float
1）none：元素不浮动（默认值）
               left：左浮动
               right：右浮动
2）浮动的元素会脱离标准流
         浮动的元素会一行内显示并且沿元素顶部对齐，相邻的元素之间没有空白间隙，如果超过父级宽度会自动换行显示
         浮动的元素具有行内块元素的特性
         浮动研发之初就是为了实现文字环绕的，所以浮动的盒子并不会压住标准流盒子里面的文字
3.清除浮动
由于父盒子在一些情况下不方便给高度，但是子盒子浮动又不占位置，所以父盒子的高度就会变成0，会影响后面的标准流盒子
额外标签法
给父级添加overflow:hidden;
父级添加after伪元素
给父级添加双伪元素

二CSS的定位：定位=定位模式 + 边偏移
1.static：静态定位
静态定位是按照标准流的特性来摆放盒子的，没有边偏移
2.relative：相对定位
它是相对于自己原来的位置进行移动的
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待它（相对定位不脱标）
3.absolute：绝对定位
绝对定位是元素在移动的时候，是相对于它的祖先元素来说
   如果祖先元素没有定位、就以浏览器为标准进行定位，
   如果祖先元素有定位，就以有定位最近的一级祖先元素为标准
   绝对定位不会再占有原来的位置（脱离标准流）
   子绝父相：如果儿子是绝对定位，那么父亲就用相对定位来限制儿子的边偏移的边界。
   4.fixed：固定定位
固定定位是元素固定于浏览器可视区域的位置
以浏览器的可视窗口为参展点进行偏移，跟父元素没有关系
            固定定位不再占有原来的位置（脱标）

5.定位的叠放次序
在使用定位的时候会出现盒子重叠的情况，需要使用z-index来控制盒子的前后次序
注意点：
数值可以是正整数、负整数或者0，默认值是auto，数值越大，盒子越靠上
如果属性值相同，按照书写的顺序，后来者居上
数字后面不可以加单位
只有定位的盒子才有z-index属性

今日遇到的问题：无
已解决问题：无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)