css CSS常见布局解决方案
CSS常见布局解决方案
说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,
但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案。
水平居中布局
首先我们来看看水平居中
1.margin + 定宽
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
相必是个前端都见过,这定宽的水平居中,我们还可以用下面这种来实现不定宽的
2. table + margin
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
display: table 在表现上类似 block 元素,但是宽度为内容宽。
无需设置父元素样式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要调整为 <table>
3.inline-block + text-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
兼容性佳(甚至可以兼容 IE 6 和 IE 7)
4. absolute + margin-left
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
</style>
宽度固定
相比于使用transform ,有兼容性更好
5. absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
绝对定位脱离文档流,不会对后续元素的布局造成影响。
transform 为 CSS3 属性,有兼容性问题
6. flex + justify-content
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
只需设置父节点属性,无需设置子元素
flex有兼容性问题
垂直居中
1.table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
兼容性好(IE 8以下版本需要调整页面结构至 table)
2.absolute + transform
强大的absolute对于这种小问题当然也是很简单的
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform 为 CSS3 属性,有兼容性问题
同水平居中,这也可以用margin-top实现,原理水平居中
3.flex + align-items
如果说absolute强大,那flex只是笑笑,因为,他才是最强的。。。但它有兼容问题
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>
水平垂直居中
1. absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
绝对定位脱离文档流,不会对后续元素的布局造成影响。
transform 为 CSS3 属性,有兼容性问题
2. inline-block + text-align + table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
兼容性好
3. flex + justify-content + align-items
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /*垂直居中*/
}
</style>
只需设置父节点属性,无需设置子元素
蛋疼的兼容性问题
##一列定宽,一列自适应
1.float + margin
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>
IE 6 中会有3像素的 BUG,解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下:
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>
此方法不会存在 IE 6 中3像素的 BUG,但 .left 不可选择, 需要设置 .left {position: relative} 来提高层级。
注意此方法增加了不必要的 HTML 文本结构。
傲娇的程序员应该放弃太低版本的浏览器
2.float + overflow
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>
设置 overflow: hidden 会触发 BFC 模式(Block Formatting Context)块级格式上下文。BFC是什么呢。
用通俗的来讲就是,随便你在BFC 里面干啥,外面都不会受到影响 。此方法样式简单但不支持 IE 6
3 .table
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*宽度为剩余宽度*/
}
</style>
table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染,也是设定布局优先。
table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距
4. flex
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
低版本浏览器兼容问题
性能问题,只适合小范围布局
我们在学会一列定宽,一列自适应的布局后也可以方便的实现 多列定宽,
一列自适应 多列不定宽加一列自适应 这里我们不一一讲解,大家自行尝试,也可以巩固前面学习的
等分布局
1. float
<div class="parent">
<div class="column">
<p>1</p>
</div>
<div class="column">
<p>2</p>
</div>
<div class="column">
<p>3</p>
</div>
<div class="column">
<p>4</p>
</div>
</div>
<style>
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
此方法可以完美兼容 IE8 以上版本
2. flex
<div class="parent">
<div class="column">
<p>1</p>
</div>
<div class="column">
<p>2</p>
</div>
<div class="column">
<p>3</p>
</div>
<div class="column">
<p>4</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.column {
flex: 1;
}
.column+.column { /* 相邻兄弟选择器 */
margin-left: 20px;
}
</style>
强大简单,有兼容问题
3. table
<div class='parent-fix'>
<div class="parent">
<div class="column">
<p>1</p>
</div>
<div class="column">
<p>2</p>
</div>
<div class="column">
<p>3</p>
</div>
<div class="column">
<p>4</p>
</div>
</div>
</div>
<style>
.parent-fix {
margin-left: -20px;
}
.parent {
display: table;
width: 100%;
/*可以布局优先,也可以单元格宽度平分在没有设置的情况下*/
table-layout: fixed;
}
.column {
display: table-cell;
padding-left: 20px;
}
</style>
等高布局
1.table
table 的特性为每列等宽,每行等高可以用于解决此需求
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell
/*宽度为剩余宽度*/
}
</style>
2.flex
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
注意这里实际上使用了 align-items: stretch,flex 默认的 align-items 的值为 stretch
3. float
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
overflow: hidden;
}
.left,
.right {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
此方法为伪等高(只有背景显示高度相等),左右真实的高度其实不相等。 兼容性较好。
到此,我们了解常见的布局解决方案,这些只是参考,一样的布局实现方式多种多样。
主要就使用position、flex 、table(从很久很久以前起,我们就抛弃了table布局页面,
但display: table;是异常强大)、float等属性目前flex兼容性较差 傲娇的程序员应该放弃太低版本的浏览器
css CSS常见布局解决方案的更多相关文章
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- CSS常见布局解决方案
最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享. 水平居中布局 1.margin + 定宽 <div class="parent&quo ...
- CSS之常见布局|常用单位|水平垂直居中
常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...
- css 各种常见布局整理
在学习各种布局之前我们先来认识各个关键词,理解这些关键词,然后由点到面,这样就简单多了. display属性 页面中每个元素都有一个默认的display属性,它的值与该元素的类型有关,默认值通常是 b ...
- css:常见布局问题
一.单列布局 1. 水平居中 1.1 使用inline-block和text-align .parent{text-align:center;} .child{display:inline-block ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- day08—css布局解决方案之多列布局
转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...
- 常见css垂直自适应布局(css解决方法)
css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
随机推荐
- 20145236《网络对抗》Exp 6 信息搜集与漏洞扫描
20145236<网络对抗>Exp 6 信息搜集与漏洞扫描 一.基础问题回答 哪些组织负责DNS,IP的管理? 互联网名称与数字地址分配机构,简称ICANN机构,决定了域名和IP地址的分配 ...
- Intellij Idea免费激活方法(转)
文章转自 http://blog.csdn.net/u013772876/article/details/70763759 1.填入下面的license server: http://intelli ...
- leetcode 51. N-Queens 、52. N-Queens II
51. N-Queens 使用isValid判断当前的位置是否合法 每次遍历一行,使用queenCol记录之前行的存储位置,一方面是用于判断合法,另一方面可以根据存储结果输出最终的结果 class S ...
- Qt中静态变量使用方法
静态变量可以在各个页面之前使用 先定义一个用于存放静态变量的类 例如datavar 在datavar.h中添加如下代码 #ifndef DATAVAR_H #define DATAVAR_H #inc ...
- TLAB
TLAB的全称是Thread Local Allocation Buffer,即线程本地分配缓存区,这是一个线程专用的内存分配区域. 由于对象一般会分配在堆上,而堆是全局共享的.因此在同一时间,可能会 ...
- QT pri 文件的作用
i 是什么东西?包含(include)的首字母.类似于C.C++中的头文件吧,我们可以把 *.pro 文件内的一部分内容单独放到一个 *.pri 文件内,然后包含进来. 接前面的例子,我们将源文件的设 ...
- Mybatis学习总结(二)——Mapper代理开发
一.概要 1.原始DAO开发中存在的问题:(1)DAO实现方法体中存在很多过程性代码.(2)调用SqlSession的方法(select/insert/update)需要指定Statement的id, ...
- Redis 安装部署
1. 官网(https://redis.io/download)下载稳定版安装包 3.0.7或3.2或4.1; 2. 复制到部署服务器 /opt/redis4,解压 tar zxvf redis-4. ...
- nfs原理及安装配置
一.简介 二.工作原理 三.安装配置 一.简介 NFS(Network File System)即网络文件系统,它允许网络中的计算机之间通过网络共享资源.将NFS主机分享的目录,挂载到本地客户端当中, ...
- IIS导入.pfx证书时报错:"A specified logon session does not exist. It may already have been terminated."
在IIS中可以直接导入.pfx文件来给站点绑定https协议: 如果在导入.pfx文件时,不选择"Allow this certificate to be exported"的话 ...