CSS常见布局解决方案
最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享。
水平居中布局
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"><span class="child">Demo</span> </div><style>.child {display: table;margin: 0 auto;} </style>
display: table
在这里的作用有两个:一、将span元素转为块元素性质,二、设置了span宽度为内容宽。
* 无需设置父元素样式 (支持 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>
display: inline-block 将div块元素转为行内块元素性质(具备了一些行内元素的特性),固给父元素设置text-align: center 能起到居中效果。 * 兼容性佳(甚至可以兼容 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
<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
<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>
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></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></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></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="left"><p>left</p></div><div class="right"><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></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>
* 此方法为伪等高(只有背景显示高度相等),左右真实的高度其实不相等。 兼容性较好。
结语: 一样的布局可能有很多种方法实现,以上只作为参考!
转载于:https://www.cnblogs.com/AllenR/p/7920581.html
CSS常见布局解决方案相关推荐
- 前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案 响应式 页面优化 规范与模块化...
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- 转载div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- CSS页面布局解决方案大全
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环.在页面框架的搭建之中,又有居中布局.多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局. 居中布局 水平居中 1)使用inli ...
- CSS常见布局的几种实现方式(面试常考)
本文将介绍面试中常考的一些CSS布局: 两栏布局(左边固定右边自适应) 三栏布局(左右固定中间自适应) 流体布局(浮动) BFC三栏布局 双飞翼布局 圣杯布局 flex table布局 绝对定位布局 ...
- Css学习总结(5)——CSS常见布局方式
一.使用BFC隐藏属性 在对需要自适应的元素BFC化,可以实现两栏或三栏布局 使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题.如果将aside2与article交换位置,那么aside2元素 ...
- [CSS]常见布局技巧
前言 系列文章目录: [目录]HTML CSS JS 根据视频和PPT整理 视频及对应资料: HTML CSS 老师笔记: https://gitee.com/xiaoqiang001/html_cs ...
- css 常见布局方案以及技巧
tab 切换的布局技巧 <!-- 使用flex布局, display: flex; justify-content: space-between;--><section id=&qu ...
- 学习微信小程序之css16常见布局
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 一文详解CSS常见的五大布局
一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 1.如何实现 对于第一种,先 ...
最新文章
- /dev/null 位桶
- 【转载】优酷网首席执行官兼创始人古永锵演讲
- Spring 核心和容器的一般更新
- 如何确定JTAG好坏?JTAG到底是什么?
- laravel静态资源
- 8.1-CPU结构(学习笔记)
- 前端学习(1553):复习2
- Qt笔记-QxOrm基本使用(对SQLLite进行增删改查)
- Ubuntu 14.04中修复默认启用HDMI后没有声音的问题
- 微课|中学生可以这样学Python(5.7节):序列解包
- 谷歌浏览器安装Postman插件 亲测有效!!!
- centos6.6-zabbix2.4.5安装实战
- ERP流程的一个生动的例子:
- Android开发教程:shape和selector的结合使用
- Java后端开发流程
- 运维工程师mysql面试题及答案_运维工程师面试题及答案解析
- 使用Tftpd64收集交换机日志
- 基于JavaEE电子商务交易系统
- 谷歌云计算技术基础架构,谷歌人工智能算法框架
- ConvNext模型复现--CVPR2022
热门文章
- ORB_SLAM2代码阅读(2)——tracking线程
- video怎么重新加载 vue_vue.js中vue-video-player中的怎么插入多个视频,视频可以同时播放的问题及解决办法...
- 人工智能诗歌写作平台_人工智能将改变文学创作的未来?
- mysql 月份差_MySQL时间差返回月个数
- linux top cpu核数查看,Linux怎么查看CPU核数?
- canal同步mysql到kafka_使用Canal同步MySQL数据到Kafka 得到的数据中sql字段无值-问答-阿里云开发者社区-阿里云...
- PTA---指针错误汇总(就自己做个笔记)
- 系统怎么手动打补丁_韩国服务器不稳定怎么办?
- cytoscape插件下载_cytoscape插件BinGO安装以及GO富集分析和网络可视化
- php模拟超级课程表,一个功能完善、UI简洁的仿超级课程表的课表控件 TimetableView...