构建静态页面 之 [ 浮动 ]
2024-06-11 21:40:36
浮动
描述
- 是对页面布局的一种表现方式
- 设置浮动的元素会脱离文档流
- 设置浮动的元素会改变后面元素的显示位置
float属性
表示设置元素浮动
- left属性值 - 表示设置元素左浮动
- right属性值 - 表示设置元素右浮动
- 设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显示效果
<head><meta charset="UTF-8"><title>浮动</title><style>/*float属性 - 表示设置元素浮动* left属性值 - 表示设置元素左浮动* right属性值 - 表示设置元素右浮动* 设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显示效果*/div {width: 200px;height: 200px;}#d1 {background-color: red;float: left;}#d2 {background-color: green;width: 300px;height: 300px;}#d3 {background-color: blue;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
元素类型的浮动
块级元素浮动
- 垂直方向排列改为水平方向排列
- 显示宽度由父级宽度的 100% 变为 0（在没设宽的情况下）
<head><meta charset="UTF-8"><title>元素类型的浮动</title><style>/*块级元素浮动* 垂直方向排列改为水平方向排列* 显示宽度由父级宽度的 100% 变为 0（在没设宽的情况下）*/div {width: 200px;height: 200px;/* 设置浮动 */float: left;/* 块级元素 */display: block;}#d1 {background-color: red;}#d2 {background-color: green;}#d3 {background-color: blue;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
内联元素浮动
- 允许设置宽度和高度
<head><meta charset="UTF-8"><title>元素类型的浮动</title><style>/*内联元素浮动* 允许设置宽度和高度*/div {width: 200px;height: 200px;/* 设置浮动 */float: left;/* 内联元素 */display: inline;}#d1 {background-color: red;}#d2 {background-color: green;}#d3 {background-color: blue;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
行内块级元素浮动
- 去掉了元素之间的间隙
<head><meta charset="UTF-8"><title>元素类型的浮动</title><style>/*行内块级元素浮动* 去掉了元素之间的间隙*/div {width: 200px;height: 200px;/* 设置浮动 */float: left;/* 行内块级元素 */display: inline-block;}#d1 {background-color: red;}#d2 {background-color: green;}#d3 {background-color: blue;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
父子关系的浮动
- 子级元素的浮动范围，不能超出父级元素的所在区域范围
- 父级元素浮动，子级元素也会跟随父级一同浮动
<head><meta charset="UTF-8"><title>父子关系的浮动</title><style>/*父子关系的浮动* 子级元素的浮动范围，不能超出父级元素的所在区域范围* 父级元素浮动，子级元素也会跟随父级一同浮动*/#d1 {width: 300px;height: 300px;background-color: red;float: right;}#d2 {width: 100px;height: 100px;background-color: green;float: right;}</style>
</head>
<body>
<div id="d1"><div id="d2"></div>
</div>
</body>
兄弟关系的浮动
- 如果下一个兄弟元素浮动，下一个兄弟元素不会超过上一个兄弟元素所占的区域位置
<head><meta charset="UTF-8"><title>兄弟关系的浮动</title><style>/*兄弟关系的浮动* 如果下一个兄弟元素浮动，下一个兄弟元素不会超过上一个兄弟元素所占的区域位置*/div {width: 200px;height: 200px;}#d1 {background-color: red;}#d2 {background-color: green;float: right;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
高度塌陷
- 父级元素没设高度，子级元素设置浮动 - 父级元素会高度塌陷
- 高度塌陷 - 仅存在父子关系中
解决方法
- 为父级元素设置高度
开启BFC环境
- 浮动可以开启 - 脱离文档流
- 将元素类型改为行内块级元素可以开启 - 行内块级元素的本身问题
- overflow属性 属性值为hidden时可以开启 - 解决内容溢出
- 设置绝对定位可以开启 - 脱离文档流
- 注意：开启BFC方法所带来的副作用
<head><meta charset="UTF-8"><title>高度塌陷</title><style>/*高度塌陷 - 仅存在父子关系中* 父级元素没设高度，子级元素设置浮动 - 父级元素会高度塌陷解决方法：* 为父级元素设置高度* 开启BFC环境* 浮动可以开启 - 脱离文档流* 将元素类型改为行内块级元素可以开启 - 行内块级元素的本身问题* overflow属性 属性值为hidden时可以开启 - 解决内容溢出* 设置绝对定位可以开启 - 脱离文档流* 注意：开启BFC方法所带来的副作用*/#d1 {border: 10px solid black;/* 父级元素没有设置高度 *//* 为父级元素设置高度 */height: 200px;/* 开启BFC环境 - 解决高度塌陷 *//* 设置浮动 */float: left;/* 改变元素的类型为行内块级元素 */display: inline-block;/* 设置overflow属性 */overflow: hidden;}#d2 {width: 300px;height: 200px;background-color: #2196f3;/* 子级元素设置为浮动 */float: left;}</style>
</head>
<body>
<div id="d1"><div id="d2"></div>
</div>
</body>
构建静态页面 之 [ 浮动 ]相关推荐
- nuxt.js踩坑：构建静态页面时报错：nuxt.config.js is not in cwd
nuxt.js使用nuxt generate构建静态项目时产生了以下错误: 解决方案:在node_modules找到@nuxt对应目录下的cwd: rootDir, 把它替换为 cwd: upath ...
- html表格设置静态数据,构建静态页面 之 [ 表格 ]
表格 描述 以网格的形式来呈现数据,并且以二维数据表(有行有列)来显示数据内容 表格元素 元素 - 表示定义表格中的标题 元素 - 表示定义表格中的表头 元素 - 表示定义表格中的单元格 元素 - 表 ...
- gulp+PC前端静态页面项目开发
前言: 现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地 gulp构建前言: 如今我们开发web网页的方式主要有几种,使用vue-cli.create-react- ...
- vue如何写静态页面
Vue.js 是一个 JavaScript 框架,用于构建用户界面.它可以帮助您快速构建动态的单页应用程序,但也可以用于构建静态页面. 要在 Vue.js 中构建静态页面,请按照以下步骤操作: 创建一 ...
- 构建多页面应用——静态资源的处理
在之前的系列文章中,我已经介绍了如何用webpack实现多页面应用的js,html,css的处理.今天就主要介绍如何处理静态资源,在web开发中最常见的静态资源就是图片. 图片的引用方式 而因为在we ...
- github创建静态页面_如何在10分钟内使用GitHub Pages创建免费的静态站点
github创建静态页面 Static sites have become all the rage, and with good reason – they are blazingly fast a ...
- 构建静态服务器_为静态网站构建无服务器联系表
构建静态服务器 介绍 (Introduction) A few years ago AWS launched static hosting service S3, which was a paradi ...
- npm 安装less插件_Gulp 开发 HTML 静态页面和 Less 实时更新
•之前一直在用 Vue 或者 React 在写 SPA 项目的时候,因为使用了 Less 感觉很不错,现在转回来写纯 css 的时候,感觉很难受(特别是写很长的选择器时).•然后就分享一下在 HTML ...
- C# 网站静态页面生成器 for 多线程版
摘要:该生成器是用于放置于服务器上的一个小程序,用于生成站点中需要静态化的页面生成.我写c/s程序不多,所以本程序可能会有些小的bug.还望高手多多指教! 内容: 首先让大家看看该程序的几个流程界面 ...
最新文章
- 使用 PHP 在站点上构建类似 Twitter 的系统
- cisco交换机堆叠
- mysql 导出dmp文件_一文带你了解MySQL主从复制（Master-Slave）
- 在MaxCompute中利用bitmap进行数据处理
- mllib协同过滤 java实现_协同过滤(ALS)算法介绍及Spark MLlib调用实例(Scala/Java/Python)...
- ActiveMQ 的独占消费模式
- 拳王虚拟项目公社：虚拟资源知识付费怎么玩？如何做知识付费？知识付费如何赚钱？
- 计算机怎么不用鼠标,技巧：如何仅用键盘而不用鼠标（包括任何指针触摸设备）优雅地使用计算机？...
- 怎么用Android做一个信息管理系统,从零开始设计一个管理系统
- 【Python】随机种子 random/numpy/pytorch/pytorch.cuda
- 《中国人工智能学会通讯》——7.10 总结和展望
- 2017锤子科技发布会
- 双物块弹簧阻尼系统模型，李雅普诺夫稳定性分析，matlab仿真验证
- yyuc php,YYUC框架与YYUC手册资料下载 | 无名
- 紫猫插件php,简易中控紫猫插件版(3)压缩包使用说明
- 论文记录-2017-A review of affective computing: From unimodal analysis to multimodal fusion
- 阿里巴巴国际站全屏代码装修贸店铺装修平台国际站平台全屏代码装修方法教程视频教程
- 如果你在it院校学习累了，你能干什么？
- 学习Java应该关注哪些网站？
- 凡子谷机器人创客教育_创客机器人教育基地