CSS 常用的定位和布局方法汇总(已添加源码地址)
CSS-Layout
旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)
SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文
常见定位方法
水平居中
子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。
方案选择基本思路:
子元素为
行内元素:对父元素设置
text-align:center
;定宽块状元素: 设置左右
margin
值为auto
;不定宽块状元素: 设置子元素为
display:inline
,然后在父元素上设置text-align:center
;通用方案: flex布局,对父元素设置
display:flex;justify-content:center
;
常用方法举例:
NOTE:为了统一展示效果,在以下实例代码中对父子元素设置了固定宽高,实际可以不设置,由子元素内容来控制其宽度
设置:对父元素设置text-align:center
(将会对行内元素起作用),子元素设置display:inline-block
(兼容IE6、7 时,替换为display:inline;zoom:1;
);
优点:兼容性良好
缺点: 需要额外代码修复因继承父元素的text-align:center
对子元素内容排列造成的影响,如需要添加.child{text-align:left}
方法二:table + margiin
设置:对子元素设置display:table
(此元素会作为块级表格来显示,元素表现类似block,但是宽度跟随内容宽度)(兼容IE6、7 时,替换div
结构为table
结构即可);
优点: 只需要对子元素进行设置
缺点: 向下兼容IE6、7时,需要更改html结构
设置:对父元素设置position:realatve
(使其作为参照物),对子元素设置position:absolute;left:50%
(绝对定位元素的宽度也随内容而定),然后对子元素设置transform:translateX(-50%)
(兼容IE6、7 时,替换div
结构为table
结构即可);
优点: 居中元素不会对其他元素造成影响
缺点:transform
不兼容低版本IE
设置:对父元素设置display:flex;justify-content:center
(这样其内部的元素会变为align-items
),align-items
的宽度默认为auto
,所以跟随内容宽度变化,继而justify-content:center
属性会使子元素居中
优点:只需要对父元素进行设置
缺点:flex
不兼容低版本IE
垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定,子元素为单行内联文本:设置父元素的
height
等于行高line-height
父元素一定,子元素为多行内联文本:设置父元素的
display:table-cell
或inline-block
,再设置vertical-align:middle
;块状元素:设置子元素
position:absolute
并设置top、bottom
为0,父元素要设置定位为static以外的值,margin:auto
;通用方案: flex布局,给父元素设置
{display:flex; align-items:center;}
常用方法举例:
设置:子容器高度不固定,对父元素设置display:table-cell
(parent变为单元格,),继续设置vertical-align:center
(使inline元素垂直居中);
优点:兼容性好(支持 IE 8)
缺点:IE 8 以下版本需要调整页面结构至 table
设置:对父元素设置position:realatve
(使其作为参照物),对子元素设置position:absolute;left:50%
(绝对定位元素的宽度也随内容而定),然后对子元素设置transform:translateY(-50%)
(兼容IE6、7 时,替换div
结构为table
结构即可);
优点: 居中元素不会对其他元素造成影响
缺点:transform
不兼容低版本IE
设置:对父元素设置display:flex
(align-items默认属性为stretch),继而设置align-items:center
即可;
优点: 只需要对父元素进行设置
缺点:flex align-items
不兼容低版本IE
水平居中且垂直居中
结合以上介绍到的水平和垂直居中方法进行设置
多列布局
一列定宽,一列自适应宽度
1.一列定宽,一列自适应宽度(float+margin)
2.一列定宽,一列自适应宽度(float+margin)fix 改良版
NOTE:此方法不会存在 IE 6 中3像素的 BUG,但 .left 不可选择, 需要设置 .left {position: relative} 来提高层级。 此方法可以适用于多版本浏览器(包括 IE6)。缺点是多余的 HTML 文本结构。
3.一列定宽,一列自适应宽度( float + overflow )
4.一列定宽,一列自适应宽度( table + table-cell )
5.一列定宽,一列自适应宽度( flex )
多列定宽,一列自适应宽度
基于上面对于一列定宽一列自适应的需求实现,多列定宽只需要在原有一列定宽的基础上添加新的列即可,最后的列依然会自适应剩余宽度。
以 flex 的实现为基础可以作如下改造:
<div class="parent">
<div class="left">
<p>.left</p>
<p>左侧定宽</p>
</div>
<!--添加了一列,CSS与 .left 公用-->
<div class="center">
<p>.center</p>
<p>第二列定宽</p>
</div>
<div class="content">
<p>.content</p>
<p>flex:1 充满剩余空间,形成自适应效果,不设置的话默认为内容宽度</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left,.center {
width: 300px;
height: 500px;
margin-right:10px;
background-color: lightblue;
}
.content {
flex: 1;
height: 500px;
background-color: orange;
}
</style>
多列不定宽,一列自适应宽度
基于以上一列定宽一列自适应的实现,进行改造,左侧不定宽区域的宽度任意(也可以由内部的内容来决定宽度就可以实现不定宽且自适应),继续增加一列即可变为多列,都很方便实现
多列等分布局
1.多列等分布局(float)
2.多列等分布局(table)
3.多列等分布局(flex)
多列等高布局
1.多列等高布局(table)
2.多列等高布局(flex)
全屏布局
1.弹性全屏布局(position)
2.弹性全屏布局(flex)
3.百分比布局,以上宽度设置更改为百分比即可
4.根据内容完全自适应,position有限制无法满足,flex可以做到
CSS 常用的定位和布局方法汇总(已添加源码地址)的更多相关文章
- eclipse添加源码的另外一种方法
当我们使用maven或者gradle时,我们不需要担心源码的问题.Maven会帮我们下载jar包的同时下载对应的源码包.一般为source.jar,比如servlet-api-2.5-sources. ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- css布局 - 两栏自适应布局的几种实现方法汇总
这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
- CSS易混淆知识点总结与分享-定位与布局
CSS定位有四种模式:static.relative.absolute.fixed,其它static是默认值,下面分别讲解下各自的特点: static:静态定位,处于动态布局流中,按照页面中的各元素先 ...
- css 常用布局
「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- jquery常用函数与方法汇总
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- CSS定位与布局:浮动
浮动的特点 浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing blo ...
随机推荐
- Qt:QTableWidgetItem
0.说明 QTableWidgetItem指明QTableWidget中的一个Item.Item通常包含文本.图标.checkbox. 最常用的构造Item的方式是:不指定该Item所在的TableW ...
- C# 反编译工具之dnSpy
下载地址:https://github.com/0xd4d/dnSpy/releases无需安装,和 ILSPY同门,感觉比ILSPY还强大 直接把dll拖拽到程序集资源管理器里面就可以啦
- sprintf的用法总结
大概知道sprintf的用法,今天在CSDN上看到一篇关于sprintf比较好的总结,现在抄下来,emmmmmmm....... srpintf()函数的功能非常强大:效率比一些字符串操作函数要高:而 ...
- JZ-052-正则表达式匹配
正则表达式匹配 题目描述 请实现一个函数用来匹配包括'.'和''的正则表达式.模式中的字符'.'表示任意一个字符,而''表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符 ...
- 【故障公告】没有龙卷风,k8s集群翻船3次,投用双集群恢复
今天没有龙卷风(异常的高并发请求),故障却依然出现,问题非常奇怪. 某种异常情况会造成短时间内, k8s 集群中大量 pod (超过60%)因健康检查失败而处于 CrashLoopBackOff 状态 ...
- LGP2233题解
题目大意 求环上走 \(n\) 步从指定点到达另一指定点,到达指定点后 不得继续移动. 大家都做过P1057传球游戏吧?还记得这道题的思路吗? 设 \(dp[i][j]\) 表示传 \(i\) 次求传 ...
- python实现解析markdown文档中的图片,并且保存到本地~
背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...
- 前端面试题(css)
css 基础面试题 css 面试题 js 面试题 1.介绍下CSS的盒子模型 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? css 是如何设置这两种模型的 box-si ...
- 创世区块配置文件genesis.json的格式解读
创世区块配置文件genesis.json的格式解读 中文网站上关于genesis 的解析大多数都来自于这个Gist:Ethereum private network configuration gui ...
- 6月21日 Django ORM那些相关操作(表关联、聚合查询和分组查询)
一.ForeignKey操作 正向查找 对象查找(跨表) 语法: 对象.关联字段.字段 示例: book_obj = models.Book.objects.first() # 第一本书对象 pr ...