CSS的布局模式

前言：

我们可以看到京东的官网上的一些例子（如下图），在同一排中能够存在多个div，这是通过布局方式（例如浮动）来实现的。

CSS传统的布局模式：

 <1>普通流（又称之为标准流）

解释：

普通流布局又被称之为标准流布局，顾名思义，按照标准的布局规则进行布局

标准布局规则：

<1>  块元素，独占一行，按照自上而下的顺序

<2>  行内元素，先按照自左向右的顺序排列，如果碰到父级元素的边缘则自动换行

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{height: 200px;width: 200px;background-color: aqua;}.div2{height: 200px;width: 200px;background-color: brown;}.div3{height: 200px;width: 200px;background-color: chartreuse;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</body>
</html>

普通流实现一行多个div：
举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{height: 200px;width: 200px;background-color: aqua;display: inline-block;}.div2{height: 200px;width: 200px;background-color: brown;display: inline-block;}.div3{height: 200px;width: 200px;background-color: chartreuse;display: inline-block;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</body>
</html>

总结：

虽然我们可以通过普通流来实现一行多个div，但是过于麻烦而且行块内存在缝隙，并且有很多的布局无法通过标准流来实现。

<2>浮动 float

基础：

解释：

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

浮动特性：

所有使用floa属性的元素的display属性都会改变，不论它是一个什么样的元素，都会变成一个块级框，而不论它本生是何种元素

用法：

选择器{float：属性值；}

属性值：
属性值说明
none默认值，不进行浮动
left

向左移动

right向右移动

inline-end

在最右侧

inline-start

在最左侧
举例： 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{float: left;height: 200px;width: 200px;background-color: aqua;}.div2{float: right;height: 200px;width: 200px;background-color: brown;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div>
</body>
</html>

浮动的脱标：

文字解释：

设置了浮动是元素会漂浮在标准流之上，不占用位置，浮动在上面，也称之为脱标。

图解：

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{float: left;height: 200px;width: 200px;background-color: aqua;}.div2{height: 800px;width: 800px;background-color: brown;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div></body>
</html>

浮动的清除：

原因：

父级盒子在很多时候的高度不方便给出，则有可能造成 浮动的盒子影响到下方的标准流盒子。

清除的方法：
<1>隔墙法（额外标签）
方法：

在浮动标签后添加 空标签（）或者其他标签（如br）

总结：

优点：书写简单

缺点：无意义标签较多导致结构化较差

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{float: left;height: 200px;width: 200px;background-color: aqua;}</style>
</head>
<body><div style="background-color: brown;"><div class="div1">div1</div><div style="clear: both"></div><br></div>
</body>
</html>
<2>父级添加overflow属性
方法：

在父级的style内添加overflow，来解决

属性值：
属性值解释
visible不裁剪溢出的内容。浏览器把溢出来的内容呈现在其内容元素的显示区域以外的地方，全部内容在浏览器的窗口是可见的。
hidden裁剪溢出的内容。内容只显示在其容器元素区域里面，这意味着只有一部分内容在浏览器窗口里面是可见的。
scroll类似于hidden，浏览器将对溢出的内容进行裁切，但会显示滚动条以便让用户能够看到内容部分。
auto类似于scroll，但是浏览器只在真的发生内容溢出的时候才会显示滚动条，如果内容没有溢出则不显示滚动条
总结：

优点：简洁，方便

缺点：溢出的内容无法显示出来

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{float: left;height: 200px;width: 200px;background-color: aqua;}</style>
</head>
<body><div style="background-color: brown; overflow: scroll;"><div class="div1">div1</div></div>
</body>
</html>
<3>使用after伪类：
方法：

使用after来代替<1>

总结：

优点：结构语义化

缺点：IE6-7不支持，需要使用zoom：1

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{float: left;height: 200px;width: 200px;background-color: aqua;}.div2:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}</style>
</head>
<body><div class="div2" style="background-color: brown;"><div class="div1">div1</div></div>
</body>
</html>
<4>使用双伪类
方法：

使用before和after

总结：

优点：结构语义化

缺点：IE6-7不支持，需要使用zoom：1

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{float: left;height: 200px;width: 200px;background-color: aqua;}.div2:before,.div2:after{content: "";display: table;}.div2:after{clear: both;}</style>
</head>
<body><div class="div2" style="background-color: brown;"><div class="div1">div1</div></div>
</body>
</html>

补充：

clear的解释：

clear属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

属性值：
属性值说明

none

元素不会向下移动清除之前的浮动。

left

元素被向下移动用于清除之前的左浮动。

right

元素被向下移动用于清除之前的右浮动。

both

元素被向下移动用于清除之前的左右浮动。

inline-start

表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。

inline-end

 表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

after和before伪类的补充：

见此文章：点击查看

<3>定位 position

属性值略解：
属性值解释
static正常定位
relative相对定位
absolute绝对定位
fixed固定定位
sticky粘性定位
属性值详解：
static（正常定位）：
解释：

static其意思是正常定位，是position的默认值，包含此属性值的元素遵循常规流，此时的top，right，bottom，left，z-index属性都会失效。

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.c{position: static;background-color: pink;}</style>
</head>
<body><div class="c">div1</div><br><div class="c">div2</div><br><span class="c">span1</span> <span class="c">span2</span>
</body>
</html>
relative（相对定位）：
解释：

relative意为相对定位，在不设置top，left，right，bottom等元素时与static并无区别，但设置后，会根据相对于自身再常规流中的位置进行定位。

【意思是说虽然是移动了，但其原有的位置任然存在、占有，只是移动了】

图解：

例如下图，我们利用relative将黑框向下移动到绿色部分处，那么移动后其所占据的空间任然是黑框的部分，但显示时显示的是绿色部分。

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.c{position: relative;top: 100px;background-color: pink;}</style>
</head>
<body><div class="c">div1</div><br><br><br><div style="background-color: aqua;">div2</div>
</body>
</html>
absolute（绝对定位）：
解释：

（1）absolute与relate之间的区别在于是否脱离了标准流，relate在移动时并没有脱离，而absolute却脱离了。【absolute不占据原有位置，而是转移后的位置】

（2）absolute与relate之间的区别在于脱离对向是谁，，relative的脱离对象是自身在标准流的位置，而absolute的脱离对象是其最近的定位祖先元素

图解：

例如下图，我们利用absolve将黑框向下移动到绿色部分处，那么移动后其所占据的空间、显示时显示的是绿色部分。

举例：
fixed（固定定位）：
解释：

fixed和absolute十分类似，，两者的不同点在于偏移对象和定位对象。

（1）偏移对象：fixed相对于窗口，而absolute是心昂对于定位祖先元素

（2）定位对象：fixed的定位祖先只能是窗口，而absolute可以是相对定位的元素

举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
body {border: 1px solid black;padding: 12px;height: 1000px;}.c {position: fixed;width: 100px;height: 100px;background-color: #f00;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><div class="c">div1</div><div style="background-color: aqua;">div2</div>
</body>
</html>
sticky（粘性定位）：
解释：

sticky像是fixed和relative的结合体，如果不给其设置top，left，right，bottom具体值，则效果与static一致。当在top、right、bottom、left四个属性中至少设置一个具体值时，元素具备两种状态 【类似relative（相对定位状态）和类似fixed（固定定位状态）】

举例：

以top:10px为例 ：当元素相对于窗口顶部的距离大于10px时，元素处于类似relative，一旦元素相对于窗口顶部的距离小于或等于10px时，元素立马切换到fixed。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {border: 1px solid black;padding: 32px;margin: 32px;height: 1000px;}div {width: 100px;height: 100px;position: relative;}#div1 {background-color: red;}#div2 {background-color: black;position: sticky;top: 100px;left: 100px;padding: 0;margin: 0;}#div3 {background-color: gray;}</style>
</head><body><div id="div1"></div><div id="div2"></div><div id="div3"></div>
</body></html>

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

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

相关文章

Linux学习笔记:进程间的通信.共享内存shm

Linux学习笔记:进程间的通信.共享内存shm

共享内存shm 什么是共享内存shm共享内存的特点关键函数ftokshmgetshmatshmdtshmctl 代码示例 什么是共享内存shm 进程间通信的前提:必须让不同的进程看到同一份资源,并且这个资源是OS提供的 而共享内存(Share memory)就是在内核共享内存区找一块物理内存空间,并允许多个进程共…
阅读更多...
ReentrantReadWriteLock(可重入读写锁)源码解读与使用

ReentrantReadWriteLock(可重入读写锁)源码解读与使用

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java源码解读-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. 读写锁是什么 3. ReentrantReadWriteLock是什么 4. 源码解…
阅读更多...
公文写作笔记

公文写作笔记

标题 最后一行的日期&#xff0c;后边占4个格子。两个数字占一格。落款单位在日期的正上方。 格式积累 内容&#xff1a; ①开头&#xff1a;缘由 ②主题&#xff1a;对策&#xff08;别人做得好&#xff0c;就借鉴&#xff09; ③结尾&#xff1a;简单的总结&#xff08;字…
阅读更多...
聊聊Mysql的两阶段提交

聊聊Mysql的两阶段提交

从图中可看出&#xff0c;事务的提交过程有两个阶段&#xff0c;就是将 redo log 的写入拆成了两个步骤&#xff1a;prepare 和 commit&#xff0c;中间再穿插写入bin log&#xff0c;具体如下&#xff1a; prepare 阶段&#xff1a;将 事务的修改写入到 redo log&#xff0c;同…
阅读更多...
GitLab(史上最全GitLab安装使用文章！！！)

GitLab(史上最全GitLab安装使用文章！！！)

GitLab 是一个基于网络的Git仓库管理工具&#xff0c;是开源的。基本每个公司都会有属于自己公司内部的GitLab 官方网站&#xff1a;https://about.gitlab.com/ GitLab文档&#xff1a;https://docs.gitlab.cn/jh/install/requirements.html 安装 所需配置 这里采用Cento…
阅读更多...
TMS320F280049 EQEP模块--QWDOG UTIME（4）

TMS320F280049 EQEP模块--QWDOG UTIME（4）

QWDOG功能框图 下图是watchdog的功能框图。在WDE使能后&#xff0c;16bit宽的计数器QWDTMR在64分频的时钟下开始计数&#xff0c;在QCLK时会被重置。当QWDTMR到达QWDPRD时会置位WTO并产生WDTOUT事件。 所以该watchdog是用来检测电机是否转动的。假设电机停止转动&#xff0c;则…
阅读更多...
stm32 hid自定义接收发送程序开发过程记录

stm32 hid自定义接收发送程序开发过程记录

cubleMX配置如下 修改端点描述符一次传输的数据大小 根据cubelMX标准在这里修改 编译错误 直接修改&#xff08;因为没有使用nodef &#xff09;编译通过 修改报告描述符&#xff08;默认的描述符无法传输数据&#xff09; 参考&#xff1a;USB协议详解第10讲&#xff08;USB描…
阅读更多...
CUDA CPP Unity Compute Shader Linear Algebra

CUDA CPP Unity Compute Shader Linear Algebra

为学 开始一个新的学习计划&#xff0c;涵盖&#xff1a; 主题学习内容CUDAProfessional CUDA C Programming/NVIDIA CUDA初级教程视频(周斌)CCPrimer / The Cherno CPPUnity Compute ShaderUdemy Learn to Write Unity Compute ShadersLinear AlgebraMIT 18.06 Prof.Gilbert…
阅读更多...
【RabbitMQ】可靠性策略（幂等，消息持久化）

【RabbitMQ】可靠性策略（幂等，消息持久化）

MQ可靠性策略 发送者的可靠性问题生产者的重连生产者确认 MQ的可靠性数据持久化Lazy Queue 消费者的可靠性问题消费者确认机制消息失败处理 业务幂等性简答问题 发送者的可靠性问题 生产者的重连 可能存在由于网络波动&#xff0c;出现的客户端连接MQ失败&#xff0c;我们可以…
阅读更多...
USB HID报告描述符学习

USB HID报告描述符学习

参考资料 HID 报告描述符 (qq.com)https://mp.weixin.qq.com/s?__bizMzU1ODI3MzQ1MA&mid2247485748&idx1&sn112bd8014eb96b03308b3b808549e8d4&chksmfc284ff1cb5fc6e770c2d2ece46c17bf2529901b45a357938978fa62163723556ad497b05c47&cur_album_id3340417…
阅读更多...
活性炭复合纳米纤维膜

活性炭复合纳米纤维膜

活性炭复合纳米纤维膜是一种结合了活性炭和纳米纤维技术的新型复合材料。这种材料通常通过特定的制备工艺&#xff0c;如静电纺丝技术&#xff0c;将活性炭纳米纤维与其他材料&#xff08;如TiO2、聚合物等&#xff09;结合在一起&#xff0c;形成具有良好结构和功能的薄膜。 活…
阅读更多...
【hana】hana1.0单容器常用命令

【hana】hana1.0单容器常用命令

基础命令 服务 要先切换到hana用户下 查看服务是否启动 HDB info启动服务 HDB start获取instance_id su - {hana_user} echo $TINSTANCE数据库 连接数据库 hdbsql -u system -p xxxxxx -i {instance_id}获取数据库状态 SELECT DATABASE_NAME, ACTIVE_STATUS FROM M_DA…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023