CSS布局方案
居中布局
水平居中
1)使用inline-block+text-align
原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。
用法:对子框设置display:inline-block,对父框设置text-align:center。
<div class="parent">
<div class="child">DEMO</div>
</div>
.child{
display: inline-block;
}
.parent{
text-align: center;
}
缺点:child里的文字也会水平居中,可以在.child添加text-align:left;还原
2)使用absolute+transform
<div class="parent">
<div class="child">DEMO</div>
</div>
.child{
position: relative;
}
.parent{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
3)使用flex+justify-content
原理:通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
用法:先将父框设置为display:flex,再设置justify-content:center。
<div class="parent">
<div class="child">DEMO</div>
</div>
.parent{
display: flex;
justify-content: center;
}
缺点:低版本浏览器(ie6 ie7 ie8)不支持
4)使用flex+margin
原理:通过CSS3中的布局利器flex将子框转换为flex item,再设置子框居中以达到居中。
用法:先将父框设置为display:flex,再设置子框margin:0 auto。
<div class="parent">
<div class="child">DEMO</div>
</div>
.parent{
display: flex;
}
.child{
margin: 0 auto;
}
垂直居中
1)使用absolute+transform
用法:先将父框设置为position:relative,再设置子框position:absolute,top:50%,transform:translateY(-50%)。
.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
transform:translateY(-50%);
}
2)使用flex+align-items
原理:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。
.parent {
position:flex;
align-items:center;
}
水平垂直居中
1)使用absolute+transform
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
top:50%;
transform:tranplate(-50%,-50%);
}
2)使用flex+justify-content+align-items
.parent {
display:flex;
justify-content:center;
align-items:center;
}
CSS布局方案的更多相关文章
- CSS布局方案之圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- CSS 布局经典问题初步整理
CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...
- css布局基础总结
前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...
- CSS居中布局方案
基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- 移动适配请使用比rem等更好的布局方案
移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配. 屏幕适配顾名思义 ...
- 淘宝弹性布局方案lib-flexible实践
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...
随机推荐
- 汇编语言2(mooc)
伪指令没有:冒号.
- 【汇总】Linux常用脚本shell
[crontab] #每天6:00 执行a.sh00 6 * * * /bin/sh /home/work/rxShell/a.sh #每天3:20 执行a1.sh20 3 * * * /bin/sh ...
- 使用Docker link搭建PHP开发环境
一般我们会把nginx.php都安装在同一个容器,为了扩展方便,我们希望nginx和php分开.那么就可以使用docker link命令实现这一目的. 需要的镜像: nginx 1.12.2 php( ...
- Date 类
一.Date类型的初始化 1. Date(int year, int month, int date); 直接写入年份是得不到正确的结果的. 因为java中Date是从1900年开始算的,所以前面的第 ...
- VB 如何调用 c++ DLL?
``` ```Class MainWindow 'ByVal 值传递 ByRef 引用传递 'Function 有返回值 Sub 无返回值 'C语言数据类型在VisualBasic中声明为调用时使用的 ...
- Web/app端自动化测试对比
Web/app端自动化测试 做了一段时间的Android自动化测试,对比个人之前做的web端自动化测试,有一些感想.(由于个人接触的时间也不是太久,很多东西理解也并不深刻,先写下菜鸟时期的感想.) 区 ...
- Flask下载文件
前言 由于最近在做文件管理模块的功能,所以难免会遇到文件上传下载这块的功能.不过文件上传那块是调用的OSS api,所以接触的不多. 文件的下载: 1. 接口返回真实的文件 这种情况比较简单, fla ...
- python内置函数-compile()
python的内置函数 compile()--编译. 这个函数有什么用呢? 一个最简单的例子, 就是我们的代码, 会被解释器读取,解释器读取后的其实是字符串, 然后通过compile编译后, 又转换成 ...
- UART知识总结
一.定义 通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),通常称作UART. 二.时序 上图是uart协议传输一个"A" ...
- Wireshark抓包常见出现错误
转自这里 1. tcp out-of-order(tcp有问题) 解答: 1). 应该有很多原因.但是多半是网络拥塞,导致顺序包抵达时间不同,延时太长,或者包丢失,需要重新组合数据单元 因为 ...