CSS布局（等宽、圣杯、双飞翼、底部固定）
2024-04-12 14:15:45
1. 全背景等宽内容居中布局
即将元素左右padding设置为父元素宽度的50%减去等宽内容的一半，不需要设置width。
要点：使用**calc()**
<!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>.title{margin-top:1em;margin-bottom: 1em;}header{background-color: blueviolet;color: white;}footer{background-color: cadetblue;}header,section,footer{padding: .1em calc(50% - 400px);text-align: justify;hyphens: auto; /*通知浏览器在换行时如何使用连字符连字*/}</style>
</head>
<body><header><h2 class="title">这是一个标题</h2></header><section><p>江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p></section><footer><p>© 2021 sandy</p><p>这是一个footer</p></footer>
</body>
</html>
效果：
2. 绝对底部（Sticky Footer）
Sticky Footer是指一种网页效果，如果页面内容不足够长时，页脚紧贴在视口的最底部；如果页面内容足够长时，页脚紧跟在内容的下方。
要点：calc()，flex。利用
calc()计算（视窗高度-页头高度-页脚高度）赋予内容区最小高度。
<!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>html,body{margin: 0;padding: 0;}body{height: 100vh;}section input:checked ~ p{ /*~为选中后面的兄弟节点*/display: none; /*当选中时不显示内容*/}header,section,footer{padding: .1em calc(50% - 400px);text-align: justify;hyphens: auto;}header{text-align: center;}section{box-sizing: border-box;min-height: calc(100% - 100px - 150px);}footer{background-color: cadetblue;color: aliceblue;}</style>
</head>
<body><header><h2>这是一个标题</h2></header><section><input type="checkbox" id="con" checked><label for="con">收起内容</label><p>江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p><p>江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p><p>江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p><p>江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p><p>江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p><p>江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p></section><footer><p>© 2021 sandy</p><p>这是一个footer</p></footer>
</body>
</html>
内容不够撑开盒子时 使用最小高度撑开盒子。footer固定在底部：
当内容超过盒子的最小高度时，footer往下跟着走：
3.三栏布局
1. 圣杯布局
圣杯布局就是两边等宽，中间自适应的三栏布局。
- 因为中间的部分需要先显示，故先渲染中间的部分。这样就要调整左边栏到中间栏的左边。
- 使用父元素内边距将中间元素移到中间
- 调整左边栏的位置需要用到负边距，设置为margin-left：-100%，使其调整到左边。
<!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>.main{padding: 0 100px; /*设置左右内边距为左右部分的宽度*/}/*清除浮动,防止高度塌陷*/.main::after {content: '';display: block;clear: both; }.center,.left,.right{height: 229px;float: left;text-align: center;color: aliceblue;background-color: cadetblue;}.left,.right{position: relative;width: 100px;background-color: rgb(41, 48, 45);}.left{left: -100px; /*结合相对定位，偏移移原来的位置到左边，不然会覆盖中间元素的内容*/margin-left: -100%; }.center{width: 100%;}.right{right: -100px;margin-left: -100px;}</style>
</head>
<body><div class="main"><div class="center"> 江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</div><div class="left">这里是左边</div><div class="right">这里是右边</div></div>
</body>
</html>
效果：
总结：
- 三者都设置向左浮动。
- 设置center宽度为100%。
- 设置 负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度
- 设置main的padding值给左右两个子面板留出空间。
- 设置两个子面板为相对定位，left的left值为负的left宽度，right的right值为负的right宽度。
问题：
当面板的center部分比两边的子面板宽度小的时候，布局就会乱掉：
2. 双飞翼布局
也是三栏布局，两边固定，中间自适应。只是和圣杯布局的写法不同。
- 双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
- 圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题
- 双飞翼布局不用设置相对布局，以及对应的left和right值。
<!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>.centerfather{width: 100%;}/*清除浮动,防止高度塌陷*/.main::after {content: '';display: block;clear: both; }.centerfather,.left,.right{height: 229px;float: left;text-align: center;color: aliceblue;background-color: cadetblue;}.left,.right{width: 100px;background-color: rgb(41, 48, 45);}.left{margin-left: -100%; }.center{margin: 0 100px;}.right{margin-left: -100px;}</style>
</head>
<body><div class="main"><div class="centerfather"><div class="center"> 江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</div></div><div class="left">这里是左边</div><div class="right">这里是右边</div></div>
</body>
</html>
3.flex实现三栏布局
<!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>body{display: flex;}.center,.left,.right{height: 300px;background-color: antiquewhite;}.center{flex: 1;}.left{width: 100px;background-color: aqua;}.right{width: 100px;background-color: aqua;}</style>
</head>
<body> <div class="left"></div><div class="center"> </div><div class="right"></div>
</body>
</html>
CSS布局（等宽、圣杯、双飞翼、底部固定）相关推荐
- 使用css弹性布局，让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求.也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏 ...
- DIV+CSS布局之圣杯布局与双飞翼布局
圣杯布局 & 双飞翼布局 简单介绍一下什么是双飞翼布局和圣杯布局: 它们俩都是为了解决三栏布局问题,左右栏宽度固定,中间栏自适应(随着父盒子大小改变而改变).中间栏要放在中间以优先渲染.它们的 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
- MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇
移动端布局:自定义MUI底部tabs选项卡(nav组件 · 底部固定mui-bar-tab) · 案例演示 效果图 html代码实例 · 如下: <!doctype html> <h ...
- datagrid底部显示水平滚动_CSS flex 布局，头部和底部固定，中间出现滚动条
文章目录 原理说明 案例(原理说明) 案例二(回字形布局) 案例 (计算出中间组件的高度,剩下的百分百) 原理说明 利用flex布局,很容易实现"左右两边固定,剩余100%"的布局 ...
- 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- [html] 写个布局，当页面高度不够时，底部固定在下面，反之不固定
[html] 写个布局,当页面高度不够时,底部固定在下面,反之不固定 <div class="layout"> <header class="heade ...
- 几种常见的CSS布局-- 双飞翼布局
双飞翼布局:对圣杯布局(使用相对定位,对以后布局有局限性)的改进,消除相对定位布局 原理:主体元素上设置左右边距,预留两翼位置.左右两栏使用浮动和负边距归位,消除相对定位. .container {/ ...
最新文章
- 【ACM】杭电OJ 1076
- 【学神-RHEL7】1-3-Linux基本命令和配置服务器来电后自动开机
- java scipt 对象 函数_java script 基本函数
- decode函数_「实践」云函数 + API，你也可以做个天气信息系统
- Bootstrap3的输入框数字点击修改效果
- 一首歌是怎么诞生的？
- Oracle 归档模式的打开及关闭
- 最新VSCode格式化代码不换行
- J2EE框架技术（SpringMVC） 知识点笔记（2）
- 阿里巴巴开放平台Oauth2.0协议获取access_token
- vue+vant(有赞)ui直传阿里oss
- 圆弧周长公式_弧长的计算公式是什么？
- Java实现电脑屏幕的截取并保存成图片
- 新手入门人工智能领域的历程 --干货
- java利用Scanner获取键盘输入
- 蜜蜂在挡板外和框梁顶造赘脾的几个要素及处理方法
- 【轻量型卷积网络】ResNeXt网络解析
- Opensuse 13.2安装百度云客户端
- mysql select now() 读取时间和实际时间有误差差8八小时 --最全解决过程
- Windows VPS如何通过远程桌面挂载本地目录