css中几种最优布局

最新推荐文章于 2024-05-14 18:25:49 发布
最新推荐文章于 2024-05-14 18:25:49 发布
阅读量1.8k 收藏 23
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Julie115/article/details/81434538
版权

一、水平居中（使用text-align+inline-block）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
	text-align:center;
	background:red;
	width:200px;
	height:200px;
	}
.child{
	display:inline-block;
	background:yellow;
	width:100px;
	height:100px;
	}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

运行结果：

水平居中

二、垂直居中（使用table-cell+vertical-align）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
    display:table-cell;
	vertical-align:middle;
	background:red;
	width:200px;
	height:200px;
	}
.child{
	display:inline-block;
	background:yellow;
	width:100px;
	height:100px;
	}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

运行效果：

垂直居中

三、水平垂直居中（使用text-align+inline-block+table-cell+vetical-align）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
	text-align:center;
    display:table-cell;
	vertical-align:middle;
	background:red;
	width:200px;
	height:200px;
	}
.child{
	display:inline-block;
	background:yellow;
	width:100px;
	height:100px;
	}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

运行效果：

水平垂直居中

四、多列布局

（1）定宽+自适应（使用float+margin）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

.left{
	background-color:red;
	width:100px;
	float:left;
	position:relative;
	}
.rightfix{
	background-color:blue;
	float:right;
	margin-left:-100px;
	width:100%;
	}
.right{
	margin-left:120px;
	}
</style>
</head>
<body>

<div class="left">left</div>
<div class="rightfix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>


</body>
</html>

运行结果：

定宽加自适应

（2）两列定宽+一列自适应（使用float+overflow）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.left{
	background-color:red;
	}
.center{
	background-color:yellow;
	}
.left,.center{
	width:100px;
	float:left;
	margin-right:20px;
	}

.right{
	overflow:hidden;
	background-color:blue;
	}
</style>
</head>
<body>

<div class="left">left</div>
<div class="center">center</div>
<div class="right"><p>right</p><p>right</p></div>




</body>
</html>

运行结果：

两列定宽加一列自适应

(3) 不定宽+自适应（使用float+overflow）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

.left{
	background-color:red;
	float:left;
	margin-right:20px;
	}
.right{
	background-color:blue;
	overflow:hidden;
	}
.left p{
	width:200px;
	}
</style>
</head>
<body>

<div class="left"><p>left</p></div>
<div class="right">
<p>right</p>
<p>right</p>
</div>



</body>
</html>

运行结果：

不定宽加自适应

 

 

 

（4）两列不定宽+一列自适应（使用float+overflow）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

.left,.center{
	float:left;
	margin-right:20px;
	}
.left{	
	background-color:red;
}
.center{
	background-color:yellow;
	}
.right{
	background-color:blue;
	overflow:hidden;
	}
.left p,.center p{
	width:200px;
	}
</style>
</head>
<body>

<div class="left"><p>left</p></div>
<div class="center"><p>center</p></div>
<div class="right">
<p>right</p>
<p>right</p>
</div>



</body>
</html>

运行结果：

两列不定宽加一列自适应

（5）等分布局（使用float）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parentwrap{
	width:960px;
	overflow:hidden;

	
}
.parent{
	margin-left:-20px;
	overflow:hidden;
	background-color:lightgray;
}
.child{
	background-color:red;
	width:25%;
	height:100px;
	float:left;
	padding-left:20px;
	box-sizing:border-box;
	background-clip:content-box;
	}
</style>
</head>
<body>
<div class="parentwrap">
<div class="parent">
<div class="child">part1</div>
<div class="child">part2</div>
<div class="child">part3</div>
<div class="child">part4</div>
</div>
</div>
</body>
</html>

运行结果：

等列分布

（6）定宽+自适应+两块高度一样高

 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
	display:table;
	width:100%;
	layout:fixed;
	}
.left{
	background-color:red;
	width:100px;
	padding-right:20px;}
.right{
	background-color:blue;
	}
.left,.right{
	display:table-cell;
	}
</style>
</head>
<body>
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right"><p>right</p><p>right</p></div>
</div>
</body>
</html>

运行结果：

定宽加自适应加两块高度一样

 

 

 

5.全局布局（使用position）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.top{
	height:100px;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	background-color:red;
	}
.left{
	position:absolute;
	top:100px;
	left:0px;
	bottom:50px;
	width:200px;
	background-color:blue;
	}
.right{
	position:absolute;
	top:100px;
	left:200px;
	right:0px;
	bottom:50px;
	background-color:yellow;
	}
.bottom{
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	height:50px;
	background-color:pink;
	}
.inner{
	min-height:100px;
	}
</style>
</head>
<body>
<div class="top"><p>top</p></div>
<div class="left"><p>left</p></div>
<div class="right"><div class="inner">right</div></div>
<div class="bottom"><p>bottom</p></div>
</body>
</html>

运行结果：

全局布局

 

 

 

 

 

 

 

 

 

 

 

 

 

 

全屏布局的特点：

  • 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域
  • 浏览器变大时，撑满窗口

全屏布局的方法：

全局布局方法

 

 

 

 

 

 

 

 

 

 

 

 

全局布局兼容性，自适应，性能一览表：

方案兼容性性能是否自适应
position好好部分自适应
flex较差差可自适应
Grid差较好可自适应

 

Julie115
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用CSS3实现圆角,阴影,透明
09-25
CSS3是一种强大的样式表语言，用于定义HTML或XML（包括SVG、XHTML等）文档的呈现方式。...透明、阴影和圆角只是CSS3众多功能的一小部分，还有诸如渐变、动画、多列布局等更多高级特性等待开发者探索和使用。
optimize-css:用于优化自动生成CSS文件
03-12
在这个过程中，有几个重要的知识点值得深入探讨。 1. **CSS优化的重要性**： - **减少文件大小**：优化CSS能够减小文件的字节大小，从而减少HTTP请求的负载，加快页面的加载速度。 - **提高可维护性**：良好的CSS...
CSS常见的布局方式
2401_84097436的博客
04-19 725
点击这里即可免费获取，包括答案解析。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-BgMcsOZ5-1713477554673)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-1ENISoJE-1713477554673)]
css多种布局方式
博哥的二进制世界
05-14 2028
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
CSS中清除浮动最优方法
01-04 152
也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 ？ 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 清除浮动：清除对应的单词是 clear，对应CSS中的属
css瀑布流布局浅析
ruanhongbiao的专栏
05-07 1471
如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布...
前端实现响应式布局的几种方法
DDDHL_的博客
03-19 9166
分享一下常用的响应式布局方法，flex布局、百分比布局、rem布局、媒体查询、自适应布局
css 布局框架 工具,Semantic：来自未来的CSS布局框架
weixin_34966284的博客
08-03 432
解读问题问题1：它们不是语义架构这是我从“纯化论者”口中听到过的最大的抱怨，自我在两年前创建1KBCSSGrid框架开始，CSS网格系统就规定标记和描述必须在一起。从grid_x的CSS类到HTML元素，表象信息与其他语义标记都是混合在一起，这些，都需要网页设计师自行添加。浮动元素也必须同时清除，因为它常常会把不必要的元素添加到网页上。下图中的“clearing”DIV标签就是引用960.gs...
CSS实现三栏布局的几种方法
Aenm的博客
07-28 235
CSS实现三栏布局的几种方法 三栏布局，顾名思义就是两边固定，中间自适应。 三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为300px,中间自适应，可以通过几种方法来实现？以及各自的优缺点是什么？ 一、浮动布局 <!DOCTYPE h...
html瀑布流元素布局宽度,css瀑布流布局的几种实现方式
weixin_33286064的博客
06-11 208
1、传统的多遇新是直朋能到分览列浮动实现方式· 各列固定宽度，并且左浮动；· 一列中的数据块为一组，列中的每块依次排列；·更多数据加载时，需要分别插入到不同的列中；优点：· 布局简单；· 不用明确数据块的高度，自适应即可。缺点：· 列数固定，嵌套较多· 滚动加载更多数据时，需要指定插入到第几列中，不方便。2、CSS3样式定义比抖朋要插支一圈不者地法我们将要用到的是CSS3新加的column属...
css瀑布流布局的几种实现方式
whazhl的专栏
03-14 8073
 1、传统的多列浮动 实现方式 · 各列固定宽度，并且左浮动； · 一列中的数据块为一组，列中的每块依次排列； · 更多数据加载时，需要分别插入到不同的列中；   优点： · 布局简单； · 不用明确数据块的高度，自适应即可。  缺点： · 列数固定，嵌套较多 · 滚动加载更多数据时，需要指定插入到第几列中，不方便。   2、CSS3样式定义法
Web CSS布局介绍
masonsxu的博客
04-11 449
Web CSS布局介绍 一、布局方式 1、固宽布局 设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。一般为适应主流的分辨率，设置固定宽度为950px左右。如果小于这个宽度，则会出现滚动条。 优点 设计师所设计的就是最终用户所看到的 设计更加简单，并且更加容易定制 在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的...
最高真空
02-16
总之，虽然"最高真空"在CSS的语境下并不是一个标准术语，但我们可以从技术的角度理解其含义，即追求在CSS设计和实现中的最优状态。通过优化代码、布局和性能，开发者可以创建出高效、响应且美观的网页界面。
投资组合模型
02-15
例如，通过CSS，我们可以调整字体、颜色、布局，使风险和收益的图表更加清晰，便于投资者理解和决策。 投资组合模型的实现通常涉及复杂的数学计算，包括协方差矩阵、夏普比率、信息比率等统计指标。这些计算可以...
Sistem-Dashboard-Sekolah:Tugas Akhir kelas 11，Sistem仪表板Sekolah。 Memanage数据Dan Mengatur Jadwal Dengan Algoritma Genetika
03-27
在这个项目中，我们可以探讨几个关键的技术知识点： 1. **数据管理**：在教育环境中，数据管理是至关重要的。这可能涉及到学生信息、课程信息、教师信息等多方面的数据存储和处理。系统可能使用数据库技术（如MySQL...
人工蜂群算法ABC-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6743期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
【独家首发】龙格库塔算法RUN优化Transformer-BiLSTM负荷数据回归预测【含Matlab源码 6563期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Transformer-Bilstm预测 4.4.6 其他优化算法优化Transformer-Bilstm预测
【中科院1区】Matlab实现海鸥优化算法SOA-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值