我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

css4-门帅2022111

[复制链接]
I1220 发表于 2022-11-15 23:01:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
今日学习内容
一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属性

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

回复

使用道具 举报

关注0

粉丝0

帖子33

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026