asp.net 网页做一个浮动层_【CSS】7 页面布局:浮动
传统网页的3种布局方式:
- 普通流(标准流):标签按规定好的默认方式排列
- 浮动
- 定位
1、为什么需要浮动
浮动:很多网页布局标准流不能实现的,可以用浮动来做,因为浮动可以改变元素标签的默认排列方式i。
浮动最典型应用,可以让多个块元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,横向排列找浮动。
2、什么是浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器
3、浮动特性
(1)浮动元素会脱离标准(脱标)
- 脱离标准流的控制(浮)移动到指定位置(动),(俗称脱标)
- 浮动的盒子不再保留原先的位置,会被其他的标准流的盒子所占有
(2)浮动的元素会一行内显示并且元素顶部对齐
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。
注意浮动的元素相互靠在一起,没有缝隙,如果父级元素装不下这些浮动的盒子,会自动换行。
(3)浮动元素会具有行内块元素的特性
任何元素添加浮动后都具有行内块元素相似的特性。
- 如果块元素没有设置宽度,默认和父级相同,添加浮动后,大小由内容决定。
- 浮动的盒子中间是没有缝隙的,紧挨着的
- 行内元素同理
4、浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则。
- 浮动如果一个元素浮动了。理论上来讲其余的兄弟元素也要浮动。
- 浮动的盒子只会影响它后面的标准流,不会影响前面的标准流。
5、清除浮动
由于父盒子不方便给高度时,子盒子浮动不占位置,导致父盒子高度为零,会影响下面的标准流盒子。所以要清除浮动。
清除浮动的本质:
- 清除浮动元素造成的影响
- 如果父元素有高度是不需要清除浮动的
- 清除浮动后,父元素会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
语法:
选择器
清除浮动的策略:闭合浮动,只在父盒子内部影响,不影响外面的其他盒子。
6、清除浮动的方法:
(1)额外标签法(W3C推荐)
也称隔墙法,在浮动标签末尾加一个空标签(必须是块元素)。例如
<
- 优点:书写简单
- 缺点:添加了许多无意义标签
(2)给父级添加overflow
overflow
- 优点:代码简洁
- 缺点:无法显示溢出部分
(3):after 伪元素
:after伪元素时额外标签法的升级,也是给父元素添加
.
- 优点:没有增加标签,结构更简单
- 缺点:要照顾一些低版本浏览器(4)双伪元素清除浮动
也是给父级元素添加
.
- 优点:代码更简洁
- 缺点:照顾低版本浏览器
方法(3)(4)许多大厂都在用
应评论区小可爱的建议,添加:
仲夏微:flex布局zhuanlan.zhihu.com
asp.net 网页做一个浮动层_【CSS】7 页面布局:浮动相关推荐
- asp.net 网页做一个浮动层_你们要的HTML、CSS布局技巧:如何规范搭建网页架构?
白天有知友邀请回答"如何规范布局网页结构"的问题,知乎上这类问题还挺多,我认为单就深入了解布局规范都足够说上一个月的,今天我就不论大范围,挑选小米网站首页的部分区块布局来讲解吧! ...
- 现学现卖做一个炫酷的动态背景页面
很喜欢酷炫的页面,自从看了抖音的主页之后(如下)(链接),就决定要也做一个牛逼的动态背景页面 对...背景是视频,而且还有音效,太牛逼了 然后决定自己做一个,废话不说,先弄代码: 这里为了设计简便,用 ...
- 前端的小玩意(9.5)——做一个仿360工具箱的web页面(完结篇,可以跑起来的工具箱)
前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小 ...
- 前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)
前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小 ...
- 做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱 做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
- html送女朋友的网页,做一个网页送给心动女孩子生日礼物(表白也合适)
如何做一个网页送给女朋友做生日礼物 本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架做的一个小型网站,里面可以实现跳转功能,怎么配置fla ...
- 怎么用java做一个立体相册_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
- 用HTML➕CSS做一个漂亮的个人博客页面
用html+css设计个人博客网页,纯静态页面 前几周我们让做了一个个人博客页面,怎么说,刚接触前端不久,第一次做页面刚开始选择的都是大红大紫的颜色,导致整合页面很low,后来看了些抽象绘画,决定用上 ...
- 小白入门之HTML--第六章 流动,浮动模型,菜单和页面布局
1.本章面试题 1.1 什么是流动模型 1.2 网页中基本的布局方式有哪些 2.知识点 2.1 上一章内容回顾 上一章我们学习了网页元素的基本分类和盒子模型. 2.2 本章内容重点 本章主要学 ...
最新文章
- java 表现层:jsp、freemarker、velocity
- IT业爆发“新人”争夺战
- mongodb之 复制集维护小结
- eclipse jrebel插件
- python扫地机器人开发学校_扫地机器人源码及解释
- 微软拟禁用JIT提高Edge浏览器安全性
- 【空间分析】6 空间关系
- android获取手机联系人信息(电话,邮箱,姓名,头像)
- extjs6整合到web项目中
- ricequant量化交易文件如何保存和读取
- Word排版技巧数模论文必备
- 前端性能优化:前端接口缓存方案
- 国产CAD_谁说国产系统没有CAD软件可以用?
- C语言二级操作题满分班(2015年9月方法篇)-叶冬冬-专题视频课程
- JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范
- 初识hellow world
- [附源码]JAVA+ssm计算机毕业设计房屋租赁系统(程序+Lw)
- 配置软件仓库 Yum/dnf
- 关于合著《区块链实战》的 3 组关键词 | ArcBlock 博客
- 数据结构(十六)——左高树(含合并过程详细图解)