CSS常见的布局方式
======
常见的单列布局有两种:
header,content 和 footer 等宽的单列布局
header 与 footer 等宽,content 略窄的单列布局
![](https://img-blog.csdnimg.cn/dbb55f3d98db47fb8ac999a7398e4f23.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmF 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 sbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv56CB5YacLi4=,size_20,color_FFFFFF,t_70,g_se,x_16)
实现第一种方式很简单,可以将 header
, content
, footer
统一设置相等宽度,然后设置 margin:auto
即可实现居中:
.header{
margin:0 auto;
max-width: 960px;
height:100px;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
}
对于第二种,header
和 footer
可以不用设置宽度,让其充满整个屏幕(默认100%),只需将三者的内容设置同一个 width
,然后在通过 margin:auto
让其内容居中
二、两列自适应布局
=========
两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式
实现方式:
float+overflow:hidden
Flex 布局
Grid 布局
1. float+overflow:hidden
实现原理:通过设置 overflow
触发 BFC
,而 BFC
不会重叠浮动元素
注意:上述代码是左侧栏固定,右侧自适应。
2. Flex 布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局
Flex 布局是2009年W3C提出了一种新布局方案,在现在也得以广泛使用,特别是移动端最优!
Flex 可以简便、完整、响应式地实现各种页面布局
详细了解 Flex
布局请点击:[Flex布局](()
/* html同上 */
.container{
display: flex;
}
.right{
flex: 1;
}
只需两行代码即可完成两列自适应布局,是不是很香~
3.Grid 布局
Grid
布局,是一个基于网格的二维布局系统,目的是用来优化用户界面设计。
详细了解Grid
布局请点击:[Grid布局](()
/* html同上 */
.container{
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 20px;
}
三、三栏布局
======
特征:中间列自适应宽度,旁边两侧固定宽度,实现三栏布局有多种方式:
1.浮动布局
这种布局方式,dom 结构必须是先写浮动部分,然后再中间块,否则右浮动块会掉到下一行。
浮动布局的优点就是比较简单,兼容性也比较好。但浮动布局是有局限性的,浮动元素脱离文档流,要做清除浮动,这个处理不好的话,会带来很多问题,比如父容器高度塌陷等。
HTML代码:
浮动布局
CSS代码:
/* 清除所有标签默认样式 */
*{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 300px;
height: 100px;
background: pink;
}
.right{
float: right;
width: 300px;
height: 100px;
background: red;
}
.center{
margin-left: 300px;
margin-right: 300px;
background-color: lightblue;
}
效果图:
在这里给 .center
类设置左右外边距是因为两侧的浮动元素占300像素,不设置外边距中间内容多就会出现如下情况:
在前面也说了,浮动实现的三栏布局会使元素脱离文档流,所以为了不影响其他元素的显示需要清除浮动:
.main::after{
content:‘’;
display: block;
clear: both;
}
2.绝对定位布局
HTML代码:
绝对定位布局
CSS常见的布局方式相关推荐
- [css] css常用的布局方式有哪些?
[css] css常用的布局方式有哪些? 1:圣杯布局 2:双飞翼 3:flex 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通 ...
- Java swing五种常见的布局方式【转载】
Java swing五种常见的布局方式 1. 边界布局(BorderLayout) 2.流式布局(FlowLayout) 3.网格布局(GridLayout) 4.盒子布局(BoxLaYout) 5. ...
- CSS——网页的布局方式
目录 网页布局方式 标准流排版方式 浮动流排版方式 浮动元素的脱标 浮动元素的排序规则 浮动元素的贴靠现象 浮动元素的字围现象 浮动元素的高度问题 清除浮动的多种方式 定位流排版方式 相对定位 绝对定 ...
- 前端页面几种常见的布局方式
1.静态布局 2.弹性布局 3.自适应布局 4.流式布局 5.响应式布局 <meta http-equiv="X-UA-Compatible" content="I ...
- HTML+CSS 五种布局方式
已知布局元素的高度,写出三栏布局,要求左栏.右栏宽度各为300px,中间自适应. 一.浮动布局 <!DOCTYPE html> <html> <head><m ...
- CSS的三大布局方式(流式布局,浮动布局和层布局)
文章目录 前言 一.标准文档流 二.三种布局方式 1.流式布局 2.浮动布局 (1)字围效果 (2)圣杯布局 3.层布局 定位的分类: (1) 相对定位 position:relative (2) 绝 ...
- html表格布局方式有那几种,前端几种常见的布局方式
1.静态布局(固定宽高) 2.弹性布局(flex)----常用 3.圣杯布局 flex:flex-group.flex-shrink.flex-basis flex:auto/none/负数/一个长度 ...
- 布局 java swing_java中Swing五种常见的布局方式
1. 边界布局(BorderLayout) 2.流式布局(FlowLayout) 3.网格布局(GridLayout) 4.盒子布局(BoxLaYout) 5.空布局(null) 还有其他两种布局,分 ...
- CSS的三种布局方式
前言 所谓布局,就是指定把一个盒子放在合适的位置称为"布局" 流式布局(最简单,盒子的默认布局) 百分比布局,通过盒子的宽度(百分比)来根据屏幕的宽带来进行收缩,不受固定像素的限制 ...
最新文章
- Thrift的服务器和客户端Python案例
- PHP的优点和缺点分别是什么,CSS的优点和缺点分别是什么
- 【一周论文速递】自然语言处理最新论文!
- 让C/C++程序一次编译,到处运行 (仅限Linux)
- 你为什么薪水那么低(二)之 生产力
- vscode请更新includepath_VS Code Java 九月更新!Coding Pack for Java 带来一键安装新体验!...
- C++面试题-青蛙跳台阶的2种解法
- Tips--git bash管理本地文档的常用命令
- 行云管家 V4.7产品新特性-国际化版本、支持Oracle的数据库审计、主机密码自动修改策略 发布日期:2018-11-22...
- Luogu P3373 【模板】线段树 2
- openapi and light-4j
- 手机论文查重软件哪个靠谱?
- Git以及GithubDesktop配置ssh访问/下载/上传 详细步骤
- AIX 6.1新功能 之RAS,虚拟化,存储及文件系统,网络增强,参数调整 (转帖)
- 一篇13年前的采访|庚顿首席科学家孙宝元:从数据融合起步,瞄准创造价值,打造助力智能化生产的利器
- Xshell4连接Linux后 win快捷键锁屏
- Git 命令之Git clean
- USB Mass Storage Class
- 对use case的一点理解——by Vega
- 数据库——简单的sql语句介绍