我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

康利-20221017-css4

[复制链接]
智商不在服务区 发表于 2022-10-17 23:43:35 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、学习内容:
1.传统网页布局的三种方式
标准流、css浮动、定位
标准流:标签按照规定好的默认顺序方式排列
块级元素会独占一行,从上到下顺序排列
行内元素会按照顺序,从左到右进行排列,如果碰到父元素的边缘会自动换行
css浮动:有很多情况是标准流不好完成或者无法完成的布局,此时使用浮动会更加方便,浮动可以改变元素标签默认的排列方式
浮动的典型应用:可以让多个块级元素一行内排列显示
网页布局的准则:多个块级纵向排列找标准流,多个块级元素横向排列找浮动
浮动的语法:float属性可以创建浮动
浮动的特性:浮动的元素会一行内显示并且元素顶部对齐;
浮动的元素会脱离标准流(脱标);
浮动元素会具有行内块元素的特性;
浮动的元素不会压住自己下面的盒子的文字内容,因为浮动的特性就是为了做到文字环绕的效果;
浮动的元素之间默认是没有空隙的。
注意:浮动和标准流父盒子的搭配---先用标准流的父元素排列上下位置,之后内部的子元素采用浮动排列左右位置;
一个元素浮动了,其它兄弟元素理论上也要跟着浮动---浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
清除浮动:额外标签法(隔墙法)、给父元素添加overflow属性、给父级添加after伪元素、父级添加双伪元素
定位:当我们滚动屏幕时,定位可以将盒子固定到屏幕的某个位置;某个元素可以自由的在盒子内移动位置,标签会压住盒子
定位的使用:定位=定位模式+边偏移
定位模式用于指定一个元素在盒子内的定位方式,边偏移决定了元素的最终位置
模式有静态定位、相对定位、绝对定位、固定定位等
2.字体图标
回复

使用道具 举报

关注0

粉丝0

帖子68

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

客服电话:18009298968

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

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

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