CSS盒子的浮动与网页布局（重点，有电影页面案例）

浮动适用于那种盒子的并列布局

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：
 普通流（标准流）
 浮动
 定位

标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列.

1. 块级元素会独占一行，从上向下顺序排列。
 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
 常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。


注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。

为什么需要浮动？

提问1：我们用标准流能很方便的实现如下效果吗？

答案是：比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

提问2：我们用标准流能很方便的实现如下效果吗？

总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.


浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

如何实现浮动效果

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动特性（重难点）

加了浮动之后的元素,会具有很多特性,需要我们掌握的.
1. 浮动元素会脱离标准流(脱标)
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性.

简单总结：加了浮动属性之后，不占用标准流的空间，元素顶部对齐，具有行内块特性

 

1. 浮动元素会脱离标准流(脱标)

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内块元素的特性.

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
 浮动的盒子中间是没有缝隙的，是紧挨着一起的
 行内元素同理

浮动布局注意点

1. 浮动和标准流的父盒子搭配。


先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。


一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。


浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

 浮动元素和标准流父级搭配使用

常见网页布局

1

2

综合案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.top {height: 55px;background-color: #292838;margin-bottom: 40px;}.top1 {float: left;width: 150px;height: 55px;color: #ff9900;line-height: 55px;margin-left: 250px;}.top2 {margin-left: 80px ;text-align: center;}.top2 a {float: left;width: 120px;height: 55px;color: #fff;line-height: 55px;}.top2 a:hover {background-color: #155faa;}.top3 {float: right;margin-right: 250px;text-align: center;}.top3 input {width: 200px;height: 30px;margin-top: 10px;border-radius: 10px;}.nav {height: 40px;width: 1360px;padding: 10px;/* background-color: rgb(132, 126, 126); */margin: 0 auto;}.navleft {width: 1000px;height: 40px;float: left;/* background-color: aquamarine; */margin-right: 10px;border-bottom: 1px solid #999999;/* 添加背景图片 */background-image: url(images/icon_1.png);background-repeat: no-repeat;/* 背景图像垂直居中 */background-position: 0 center;/* 文字垂直居中 */line-height: 40px;}.navleft:hover {color: #ff9900;}.navright {width: 320px;height: 40px;/* background-color: #d78; */float: left;margin-left: 15px;border-bottom: 1px solid #999999;/* 添加背景图片 */background-image: url(images/icon_12.png);background-repeat: no-repeat;/* 背景图像垂直居中 */background-position: 0 center;/* 文字垂直居中 */line-height: 40px;}.navright span {display: inline-block;margin-left: 55px;font-size: 16px;}.navright span:hover {color: #ff9900;}.lastnew {display: inline-block;margin-left: 55px;font-size: 16px;}.type ul li {/* 去除标点样式 */list-style: none;display: inline-block;color: #999999;font-size: 16px;}.type ul li:hover {color: #ff9900;}.type {/* 向右浮动 */float: right;}.type em {font-style: normal;color: #eeeeee;margin: 0 10px;}.main {height: 780px;width: 1360px;/* background-color: #999999; *//* 水平居中 */margin: 0 auto;padding: 10px;}.mainleft {width: 1000px;height: 780px;float: left;/* background-color: aquamarine; */}.mainright {width: 320px;height: 780px;/* background-color: #d78; */float: left;margin-left: 15px;/* background-color: aqua; */}.mainli li {list-style: none;width: 320px;height: 20px;padding: 10px 0;font-size: 12px;border-bottom: 1px solid #999999;}.mainli li a:hover {color: #ff9900;}a {color: #333333;text-decoration: none;}.mainli .li1 {padding-top: 0;}.mainright_spanright {display: inline-block;float: right !important;}.mainright_spanleft {display: inline-block;width: 18PX;height: 18PX;background-color: #eeeeee;margin: 0 4px;line-height: 18px;text-align: center;}.mainleft .main_up {height: 560px;/* margin: 10px; *//* background-color: rgb(125, 141, 149); */}.mainleft .main_down {height: 190px;margin: 10px;margin-top: 20px;/* background-color: rgb(141, 231, 160); */}.div_image {height: 260px;width: 146px;/* background-color: #ff9900; */margin-left: 20px;float: left;margin: 10px;}.div_image img {height: 205px;width: 100%;}.div_image a {display: inline-block;height: 50px;/* 字体不加粗 */font-weight: 400;font-size: 14px;line-height: 50px;overflow: hidden;}.div_image a:hover{color: #ff9900;}.main_down ul li {list-style: none;display: inline-block;width: 192px;height: 20px;/* background-color: #ff9900; */margin-bottom: 20px;text-align: center;} .main_down ul li a:hover{color: #ff9900;}</style>
</head>
<body><div class="box"><div class="top"><div class="top1"><h2>蜂鸟影院</h2></div><div class="top2"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div><div class="top3"><input type="text" value="关键词"> </div></div><div class="nav"><div class="navleft"><div class="lastnew">最新电影</div><div class="type"><ul><li>战争片 <em>|</em></li></li><li>战争片 <em>|</em></li><li>战争片 <em>|</em></li><li>战争片 <em>|</em></li><li>战争片 <em>|</em></li><li>战争片 <em>|</em></li><li>战争片 <em>|</em></li><li>战争片 <em>|</em></li><li> 更多 <strong>&gt;</strong></li></ul></div></div><div class="navright"><span>电影周榜单</span></div></div><div class="main"><div class="mainleft"><div class="main_up"><div class="div_image"><img src="./images/a30948011546630ddb1a47784328f3cb.jpg"><a href="#">雉岳山</a></div><div class="div_image"><img src="./images/4fb827be8f3659e9484c4183cfae5108.jpg"><a href="#">公平竞争</a></div><div class="div_image"><img src="./images/e6389c603062be3917998dfa95aac76f.jpg"><a href="#">那些年，我们一起追的女孩</a></div><div class="div_image"><img src="./images/e6389c603062be3917998dfa95aac76f.jpg"><a href="#">那些年，我们一起追的女孩</a></div><div class="div_image"><img src="./images/e6389c603062be3917998dfa95aac76f.jpg"><a href="#">那些年，我们一起追的女孩</a></div><div class="div_image"><img src="./images/e6389c603062be3917998dfa95aac76f.jpg"><a href="#">那些年，我们一起追的女孩</a></div><div class="div_image"><img src="./images/e6389c603062be3917998dfa95aac76f.jpg"><a href="#">那些年，我们一起追的女孩</a></div><div class="div_image"><img src="./images/e6389c603062be3917998dfa95aac76f.jpg"><a href="#">那些年，我们一起追的女孩</a></div><div class="div_image"><img src="./images/a30948011546630ddb1a47784328f3cb.jpg"><a href="#">雉岳山</a></div><div class="div_image"><img src="./images/4fb827be8f3659e9484c4183cfae5108.jpg"><a href="#">公平竞争</a></div><div class="div_image"><img src="./images/a30948011546630ddb1a47784328f3cb.jpg"><a href="#">雉岳山</a></div><div class="div_image"><img src="./images/4fb827be8f3659e9484c4183cfae5108.jpg"><a href="#">公平竞争</a></div></div><div class="main_down"><ul><li><a href="#">幽灵鬼屋1</a></li><li><a href="#">幽灵鬼屋2</a></li><li><a href="#">幽灵鬼屋3</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋1</a></li><li><a href="#">幽灵鬼屋2</a></li><li><a href="#">幽灵鬼屋3</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋1</a></li><li><a href="#">幽灵鬼屋2</a></li><li><a href="#">幽灵鬼屋3</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋1</a></li><li><a href="#">幽灵鬼屋2</a></li><li><a href="#">幽灵鬼屋3</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋1</a></li><li><a href="#">幽灵鬼屋2</a></li><li><a href="#">幽灵鬼屋3</a></li><li><a href="#">幽灵鬼屋4</a></li><li><a href="#">幽灵鬼屋4</a></li></ul></div></div><div class="mainright"><ol class="mainli"><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li><li><a href="#"><span class=" mainright_spanleft">1</span>拉各斯黑帮 <span class=" mainright_spanright">HD</span></a></li></ol></div></div></div></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/225979.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

带下雪背景的登陆注册页面

带下雪背景的登陆注册页面

创建带有下雪背景的登录注册页面涉及HTML、CSS和JavaScript。以下是一个简单的示例&#xff0c;其中使用了HTML和CSS来设置基本的登录和注册表单&#xff0c;并使用JavaScript来创建下雪的效果。请注意&#xff0c;此示例中的雪花效果是通过CSS和JavaScript组合实现的。 HTML&…
阅读更多...
abap 如何debug 更新进程

abap 如何debug 更新进程

今天在测试环境做一个外向交货单过账的时候&#xff0c;每次都会dump ST22中看到报错如下&#xff1a;DBSQL_DUPLICATE_KEY_ERROR 接着我就去SM13去看下在哪个跟新里面失败了 双击错误条目可以看到 那么我就想说去debug看看当时的变量到底是啥&#xff0c;为啥会主键重复&…
阅读更多...
数据库的三大范式

数据库的三大范式

第一范式&#xff1a; 属性不可分割&#xff1a;每个属性都是不可分割的原子项&#xff08;实体的属性就是表中的列&#xff09; 在上表中contact应该分为phone和adress两列 第二范式&#xff1a; 在满足第一范式的情况下&#xff0c;表中不存在部分依赖&#xff0c;非主键列…
阅读更多...
2.91【random模块】

2.91【random模块】

random模块 模块导入 import random基本用法 【1】random.random()生成随机浮点数 a random.random() print(a) # 0.07785349807479613【2】uniform(a,b)用于返回a,b之间的随机浮点数 a random.uniform(10, 51) print(a) # 25.71555099886598【3】randint()返回a,b之间的…
阅读更多...
压缩包文件暴力破解 -Server2005（解析）

压缩包文件暴力破解 -Server2005（解析）

任务五十一： 压缩包文件暴力破解 任务环境说明：Server2005 1. 通过本地PC中渗透测试平台Kali使用Nmap扫描目标靶机服务版本信息，将 Telnet 版本信息字符串 作为 Flag 提交; flag:Microsoft Windows XP telnetd 2. 通过本地PC中渗透测试平台Kali对服务器场景Windows进行渗透测…
阅读更多...
云演CTF Blog

云演CTF Blog

1、啥也搞不了&#xff0c;扫目录。出来个console 2、有显示锁掉了 3、抓包&#xff0c;改返回包 改成true&#xff0c;放包 不好意思&#xff0c;不会了&#xff0c;哈哈哈哈哈哈哈哈哈 你会的话&#xff0c;请告诉我&#xff0c;大佬
阅读更多...
C++：命名空间

C++：命名空间

从今天正式开始对C的学习&#xff0c;这里只学习C对C的拓展&#xff0c;和C相同的部分在C语言专栏中都可以找到&#xff0c;我们先看一段C代码 #include<iostream> using namespace std; int main() {cout<<"hello world<<endl;return 0; } 同样也是打…
阅读更多...
数学公式推导中 “:=“和“:=“的区别

数学公式推导中 “:=“和“:=“的区别

A:B 将A定义为&#xff08;记为&#xff0c;令为&#xff09;B A:B 将B定义为&#xff08;记为&#xff0c;令为&#xff09;A
阅读更多...
redis的hash实现

redis的hash实现

hash实现 redis的hash数据结构和java的HashMap虽然不同&#xff0c;但是有异曲同工之妙&#xff0c;value是键值对&#xff0c;相当于HashMap&#xff0c;对于hash碰撞也是采用的类似于HashMap的处理方式&#xff0c;数组链表&#xff0c;更适合存储对象&#xff0c;将一个对象…
阅读更多...
YOLOv8-Seg改进：轻量化卷积设计 | DualConv双卷积魔改v8结构

YOLOv8-Seg改进：轻量化卷积设计 | DualConv双卷积魔改v8结构

🚀🚀🚀本文改进： DualConv双卷积魔改v8结构，达到轻量化的同时并能够实现小幅涨点 🚀🚀🚀YOLOv8-seg创新专栏：http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8，从入门到创新，轻轻松松搞定科研； 1）手把手教你如何训练YOLOv8-seg； 2）模型创新，提升分割性能…
阅读更多...
​【EI会议征稿中】#先投稿，先送审#第三届网络安全、人工智能与数字经济国际学术会议（CSAIDE 2024）​

​【EI会议征稿中】#先投稿，先送审#第三届网络安全、人工智能与数字经济国际学术会议（CSAIDE 2024）​

#先投稿&#xff0c;先送审# 第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#xff09; 2024 3rd International Conference on Cyber Security, Artificial Intelligence and Digital Economy 2024年3月1日-3日 | 中国南京 会议官网&#xff1a…
阅读更多...
漏刻有时数据可视化Echarts组件开发(45)机场流程导航线和指示点的开发记录

漏刻有时数据可视化Echarts组件开发(45)机场流程导航线和指示点的开发记录

路径线 ECharts中的路径线是指用于连接起点和终点的线。在ECharts中&#xff0c;路径图主要用于带有起点和终点信息的线数据的绘制&#xff0c;如地图上的航班、路线等。路径线可以用于展示数据点之间的连接关系&#xff0c;以及数据点之间的相对位置。 {//路径图name: 路线图…
阅读更多...
Mr. Cappuccino的第65杯咖啡——MacOS安装Docker

Mr. Cappuccino的第65杯咖啡——MacOS安装Docker

MacOS安装Docker 下载Docker安装Docker查看Docker相关信息镜像加速 下载Docker Docker官网 Docker文档中心 Docker桌面版下载地址 安装Docker 查看Docker相关信息 docker --versiondocker info镜像加速 阿里云镜像加速器 "registry-mirrors": ["https://gq8…
阅读更多...
【Mypy】超级实用的python高级库！

【Mypy】超级实用的python高级库！

今天&#xff0c;我很兴奋地向大家介绍一个神奇的Python库&#xff1a;Mypy。这个库是Python世界中的一颗璀璨明星&#xff0c;提供了静态类型检查的强大功能&#xff0c;极大地增强了Python这门动态类型语言的健壮性和可维护性。我们将深入探索Mypy的多个方面&#xff0c;并通…
阅读更多...
SpringBoot 源码解析2：启动流程1

SpringBoot 源码解析2：启动流程1

SpringBoot 源码解析2&#xff1a;启动流程1 1.启动方式2.SpringBootApplication3.SpringApplication3.1 构造器SpringApplication3.2 SpringApplication#run 3.3 SpringApplication#run 中关键方法3.1 SpringApplication#prepareEnvironment3.2 SpringApplication#prepareCont…
阅读更多...
BIM 技术：角色漫游

BIM 技术：角色漫游

本心、输入输出、结果 文章目录 BIM 技术&#xff1a;角色漫游前言BIM角色漫游中&#xff0c;用户如何与建筑模型进行交互手势识别技术在BIM角色漫游中的应用有哪些图示花有重开日&#xff0c;人无再少年实践是检验真理的唯一标准 BIM 技术&#xff1a;角色漫游 编辑&#xff1…
阅读更多...
如何理解《注意力机制真的懂得“集中注意力”吗？》

如何理解《注意力机制真的懂得“集中注意力”吗？》

在文章《从熵不变性看Attention的Scale操作》中&#xff0c;我们就从“集中注意力”的角度考察过Attention机制&#xff0c;当时我们以信息熵作为“集中程度”的度量&#xff0c;熵越低&#xff0c;表明Attention越有可能集中在某个token上。 但是&#xff0c;对于一般的Attent…
阅读更多...
基于ssm金旗帜文化培训学校网站的设计与开发论文

基于ssm金旗帜文化培训学校网站的设计与开发论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对培训学校展示信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…
阅读更多...
【云原生kubernets】Pod详解

【云原生kubernets】Pod详解

一、Pod介绍 1.1.概念 Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。kubernetes中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的&#xff0c;例如&#xff0c;用于管理Pod运行的State…
阅读更多...
使用国内镜像源安装opencv

使用国内镜像源安装opencv

在控制台输入命令&#xff1a; pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple 验证安装&#xff1a; step 1&#xff1a; 打开终端&#xff1b;step 2&#xff1a; 输入python&#xff0c;进入Python编译环境&#xff1b;step 3&#xff1a; 粘贴…
阅读更多...
最新文章

Copyright @ 2022~2023