css布局方式总结
### 居中布局 ###
一、水平居中
* 要求:子元素于父元素水平居中且其(子元素与父元素)宽度均可变。
```` javacript
<div class="parent">
<div class="child">Demo</div>
</div>
````
1. inline-block + text-align
.child {
display: inline-block;
}
.parent {
text-align: center;
}
2. table + margin
.child {
display: table;
margin: 0 auto;
}
3. absolute + transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
4. flex + justify-content
.parent {
display: flex;
justify-content: center;
}
5. table-cell + vertical-align
.parent {
display: table-cell;
vertical-align: middle;
}
6. flex + align-items
.parent {
display: flex;
align-items: center;
}
二、水平与垂直居中
* 要求: 子元素于父元素垂直及水平居中且其(子元素与父元素)高度宽度均可变。
<div class="parent">
<div class="child">Demo</div>
</div>
1.inline-block + text-align + table-cell + vertical-align
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
2.absolute + transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
3.flex + justify-content + align-items
.parent {
display: flex;
justify-content: center;
align-items: center;
}
三、多列布局
* 一列定宽,一列自适应
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
1.float + margin
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
2.float + overflow
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
3.table
.parent {
display: table;
width: 100%;
table-layout: fixed; //table 的显示特性为每列的单元格宽度合一定等与表格宽度。 table-layout: fixed; 可加速渲染,也是设定布局优先。
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*宽度为剩余宽度*/
}
4.flex
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
/*等价于*/
/*flex: 1 1 0;*/
}
* 两列定宽,一列自适应
````
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center<p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
````
.left, .center {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
/*等价于*/
/*flex: 1 1 0;*/
}
[github地址:https://github.com/Hasyou99/Daily-summary](https://github.com/Hasyou99/Daily-summary)
css布局方式总结的更多相关文章
- 细谈CSS布局方式
一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...
- 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法
前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...
- CSS布局方式--inline-block 布局
布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...
- css 布局方式
布局方式 1 布局:设置元素在网页中的排列方式及显示效果 2 分类: 1 标准流布局(文档流,普通流,静态流) 是默认的布局方式 特点:将元素按照书写顺序及元素类型,从上至下,从左至右排列 2 浮动布 ...
- CSS布局方式
1.内边距 padding <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS 布局入门
概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- 还在为垂直居中苦恼?CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...
随机推荐
- Confluence 6 通过 SSL 或 HTTPS 运行 - 为 HTTPS 修改你的 Confluence 基础 URL
在你的浏览器中,进入 > 基本配置(General Configuration). 单击 编辑(Edit). 修改服务器的基础 URL 为 HTTPS.请参考文档 configuring t ...
- 《剑指offer》二叉树中和为某一值的路径
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- laravel 视图
在实际开发中,除了 API 路由返回指定格式数据对象外,大部分 Web 路由返回的都是视图,以便实现更加复杂的页面交互,我们在前面已经看到过了视图的定义方式: return view('以.分隔的视图 ...
- Axure-----三级下拉菜单的具体实现过程
********三级下拉菜单的动画效果:********** 1.选中三级菜单将其转换为动态面板,命名为treePanel,并隐藏. 2.选中二级菜单添加交互效果:[切换可见性],勾选treePane ...
- windows 下命令行启动停止mysql
MySQL比较好玩一点就是它可以用多种方式启动,当然它也可以用多种方式关闭.下面我就mysql的几种启动方式简单的谈一谈,希望可以给大家提供一些参考. 第一种,用mysqld-nt来启动. 在没有进行 ...
- 论文阅读笔记十八:ENet: A Deep Neural Network Architecture for Real-Time Semantic Segmentation(CVPR2016)
论文源址:https://arxiv.org/abs/1606.02147 tensorflow github: https://github.com/kwotsin/TensorFlow-ENet ...
- HTTP 599: SSL certificate problem: unable to get local issuer certificate错误
自己在用 PySpider 框架爬虫运行代码后时出现 HTTP 599: SSL certificate problem: unable to get local issuer certificate ...
- OpenCV-Python入门教程4-颜色空间转换
一.颜色空间转换 import cv2 import numpy as np img = cv2.imread('lena.jpg') # 转换成灰度图 img_gray = cv2.cvtColor ...
- win10下右键菜单添加“打开cmd”
早期版本的win10是可以在文件夹的左上角打开cmd的,更新后发现现在只有powershell能用了.这不方便. 通过修改注册表,可以实现这个功能. 具体做法:新建一个.reg文件win10_add_ ...
- MyBatis - 4.动态SQL
动态 SQL是MyBatis强大特性之一.极大的简化我们拼装SQL的操作. 动态 SQL 元素和使用 JSTL 或其他类似基于 XML 的文本处理器相似. MyBatis 采用功能强大的基于 OGNL ...