来看看最全的“css布局”喽
2024-05-11 03:38:38
嗨，大家好，我又来了，今天主要是分享下我们在css中常用的布局方式。可能在面试过程中也会出现哦，注意听哦
主要是下面几种
- 等高布局
- 三栏布局
- 两栏布局
- 双飞翼布局
- 圣杯布局
1. 等高布局
这里来讲解下等高布局的实现方式，如果有我漏写的希望大家可以在留言中告诉我，相互学习。
1.1 table-cell 实现方式
1.1.1 上“效果”
1.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>等高布局实现 - table-cell</title><style>.left,.middle,.right {width: 200px;display: table-cell;/* display: table-cell 默认就是等高布局 */}.left {height: 300px;}.left,.right {background: red;}.middle {background: blue;}.outer {display: table;}</style></head><body><div class="outer"><div class="left"></div><div class="middle"></div><div class="right"></div></div></body>
</html>
使用display属性：table-cell 天生具备等高的效果。所以我们可以利用这种方式进行实现
1.2 使用padding以及margin相抵方式
1.1.1 上“效果”
1.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>等高布局 - padding，margin</title><style>.outer {overflow: hidden;}.left,.right,.middle {float: left;padding-bottom: 9999px;margin-bottom: -9999px;}.left,.right {width: 25%;background: red;}.middle {width: 50%;background: yellow;}</style></head><body><div class="outer"><div class="left"><div>11</div><div>22</div></div><div class="middle">1</div><div class="right">2</div></div></body>
</html>
这里我们可以利用padding-bottom, margin-bottom 相抵的方式实现等高布局，可以理解为这是一种假等高布局
2. 三栏布局
2.1 利用BFC不跟浮动元素重叠方式
2.1.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>通过BFC来实现</title><style>* {padding: 0;margin: 0;}html, body {height: 100%;}.outer {height: 100%;}.left {width: 200px;height: 100%;float: left;background: red;}.right {width: 200px;height: 100%;float: left;background: green;}.middle {height: 100%;background: blue;overflow: hidden;}</style></head><body><div class="outer"><div class="left">left</div><div class="right">right</div><div class="middle">middle</div></div></body>
</html>
2.2 flex实现三栏布局
2.2.1 上“效果”
2.2.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>flex实现三栏布局</title><style>* {padding: 0;margin: 0;}.outer {height: 500px;display: flex;justify-content: space-between;}.left,.right,.middle {height: 100%;}.left,.right {width: 200px;background: red;}.middle {flex: 1;background: blue;}</style></head><body><div class="outer"><div class="left">left</div><div class="middle">middle</div><div class="right">right</div></div></body>
</html>
利用flex：1的特性来实现两边固定宽，中间子实现的三栏布局
2.3 利用定位方式
2.3.1 上“效果”
2.3.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>position实现三栏布局</title><style>.left {background: red;left: 0;top: 0;position: absolute;height: 100%;width: 200px;}.right {background: red;right: 0;position: absolute;top: 0;height: 100%;width: 200px;}.middle {background: blue;left: 200px;top: 0;right: 200px;position: absolute;height: 100%;}</style></head><body><div class="outer"><div class="left">left</div><div class="middle">middle</div><div class="right">right</div></div></body>
</html>
其实就是利用中间定位的方式，中间定位的原则是两边的宽度
2.4 双飞翼布局
开始划重点了！！！ 注意了
2.4.1 上“效果”
2.4.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>双飞翼</title><style>header {height: 200px;background: red;}.body {overflow: hidden;}.middle,.left,.right {float: left;height: 200px;}.middle {width: 100%;}.inner {background: blue;margin: 0 200px;height: 200px;}.left {background: orange;width: 180px;position: relative;margin-left: -100%;}.right {background: green;width: 180px;margin-left: -180px;}</style></head><body><header>header</header><div class="body"><div class="middle"><div class="inner">inner</div></div><div class="left">left</div><div class="right">right</div></div></body>
</html>
细细的品味代码，其实就是利用margin 来实现元素移动
2.5 圣杯布局
开始划重点了！！！ 注意了
2.5.1 上“效果”
2.5.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>圣杯布局</title><style>header {background: red;}header,footer {height: 100px;}footer {background: green;}.body {padding: 0 200px;overflow: hidden;}.middle {background: orange;float: left;width: 100%;height: 200px;}.left {background: orchid;position: relative;left: -200px;margin-left: -100%;}.right {background: powderblue;position: relative;margin-left: -180px;left: 200px;}.left,.right {height: 200px;width: 180px;float: left;}</style></head><body><header>header</header><div class="body"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div></div><footer>footer</footer></body>
</html>
希望有缘人在看代码的过程中可以将双飞翼以及圣杯布局同时看，可能收获会比较大
3. 两栏布局
3.1 利用BFC实现
3.1.1 上“效果”
3.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>BFC实现两栏布局</title><style>.left {float: left;width: 200px;height: 500px;background: blue;}.right {height: 500px;background: red;overflow: hidden;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>
3.2 利用flex实现
3.2.1 上“效果”
3.2.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>flex两栏布局</title><style>.outer {width: 500px;height: 600px;display: flex;}.inner1 {flex: 1;background: red;}.inner2 {flex: 1;background: blue;}</style></head><body><div class="outer"><div class="inner1"></div><div class="inner2"></div></div></body>
</html>
3.3 使用定位方式
3.3.1 上“效果”
3.3.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>经典两栏布局 -- 定位</title><style>.left {width: 200px;position: absolute;top: 0;left: 0;bottom: 0;background: red;}.right {position: absolute;left: 200px;top: 0;bottom: 0;right: 0;background: blue;}</style></head><body><div class="outer"><div class="left"></div><div class="right"></div></div></body>
</html>
3.4 使用margin-left方式
3.4.1 上“效果”
3.4.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>float + margin实现布局</title><style>* {padding: 0;margin: 0;}html,body {height: 100%;}.outer {height: 100%;}.left {width: 200px;height: 100%;background: red;float: left;}.right {margin-left: 200px;height: 100%;background: blue;}</style></head><body><div class="outer"><div class="left">1</div><div class="right">2</div></div></body>
</html>
4. 结束
其实上述实例基本都是代码以及截图，因为css基本都是熟练知识都是死知识，并没有什么原理可以讲解。唯一可能需要理解的就是BFC，什么是BFC，BFC的存在可以解决哪些事情就完了，如果各位想看源码可以参考下面地址，我的GitHub有很多分栏，其实还有很多js重写原理，也希望大家多多star哦
GitHub源码地址
来看看最全的“css布局”喽相关推荐
- 一篇全面的CSS布局学习指南 [译]
本文来自SmashingMagazine上一篇非常不错的CSS布局综述类文章,汇总了各类CSS布局技术,并提供了这些技术深度阅读的链接.故而翻译过来和大家分享,原文链接在文末,感谢作者Rachel A ...
- html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...
- CSS布局说——可能是最全的
前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html. 其实,我们可能经常在聊组件化,咋地咋地. ...
- [S3-E429]CSS布局说——可能是最全的
本文:[第3章第428回] 文章底部可跳转至 目录 查看更多文章 前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而 ...
- 理解 CSS 布局和块级格式上下文
本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用 过CSS 布局你 ...
- CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
- bootstrap 垂直居中 布局_给你一份详细的CSS布局指南，请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...
- CSS布局奇技淫巧：各种居中
CSS布局奇技淫巧:各种居中 2017-08-23 无双 前端开发 作者:无双 链接:www.cnblogs.com/2050/p/3392803.html 居中是我们使用css来布局时常遇到的情况. ...
- CSS 布局与“仓库管理”的关系
上周写了一个文章不会CSS布局可能是"物理"不好,并在我们团队里做了一个分享.大家普遍反应的问题是,抛出的概念太多有点不好理解.这边重新整理思路和精简概念,再战一次. 当下已经有很 ...
最新文章
- 求助：我有一辆机器人小车，怎么让它跑起来，还会避障、目标跟踪、路径规划？...
- 基于JSP实现校园二手交易平台
- 如何实现一个权限管理系统?（附源码）
- 索引使用原则-联合索引最左匹配
- 正则表达式获取一个文本域中每一行的值并且去掉前后空格
- 手机微商城可以安装到虚拟服务器,安装使用:百家CMS微商城系统安装教程（图文说明）...
- 纳什均衡定义、举例、分类
- 身为一名合格root管理员的基本防范措施 Linux系统安全及应用
- 基于人体感应模块的驱鸟器设计
- ArcGIS栅格按照象元大小生成矢量的方法
- 测试中遇到不可重现的Bug处理办法
- 【甄选靶场】Vulnhub百个项目渗透——项目十一：skytower-1（代理登录ssh，绕过shell禁用）
- UIPresentationController 教程：入门
- 如何判断一个项目的可行性？
- ISL79987的多路交织方法
- 基于STM32的汇编程序
- 俄罗斯 Yandex 浏览器：比微软 Edge 和谷歌 Chrome 还香
- Javamysql语法转化oracle_数据库移植之oracle To mysql（java）
- 异星工厂mod位置linux,异星工厂存档在哪里
- “保护知识产权 激励创新创造”，深圳发布数字文化知识产权保护计划