CSS-Layout

旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)
SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文

常见定位方法

水平居中

子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。

方案选择基本思路:
子元素为

  • 行内元素:对父元素设置text-align:center;

  • 定宽块状元素: 设置左右margin值为auto;

  • 不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;

  • 通用方案: flex布局,对父元素设置display:flex;justify-content:center;

常用方法举例:

NOTE:为了统一展示效果,在以下实例代码中对父子元素设置了固定宽高,实际可以不设置,由子元素内容来控制其宽度

  1. 方法一:text-align + inline-block

设置:对父元素设置text-align:center(将会对行内元素起作用),子元素设置display:inline-block(兼容IE6、7 时,替换为display:inline;zoom:1;);

优点:兼容性良好

缺点: 需要额外代码修复因继承父元素的text-align:center对子元素内容排列造成的影响,如需要添加.child{text-align:left}

  1. 方法二:table + margiin

设置:对子元素设置display:table(此元素会作为块级表格来显示,元素表现类似block,但是宽度跟随内容宽度)(兼容IE6、7 时,替换div结构为table结构即可);

优点: 只需要对子元素进行设置

缺点: 向下兼容IE6、7时,需要更改html结构

  1. 方法三:absolute + transform

设置:对父元素设置position:realatve(使其作为参照物),对子元素设置position:absolute;left:50%(绝对定位元素的宽度也随内容而定),然后对子元素设置transform:translateX(-50%)(兼容IE6、7 时,替换div结构为table结构即可);

优点: 居中元素不会对其他元素造成影响

缺点transform不兼容低版本IE

  1. 方法四:flex + justify-content

设置:对父元素设置display:flex;justify-content:center(这样其内部的元素会变为align-items),align-items的宽度默认为auto,所以跟随内容宽度变化,继而justify-content:center属性会使子元素居中

优点:只需要对父元素进行设置

缺点flex不兼容低版本IE

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

  • 父元素一定,子元素为单行内联文本:设置父元素的height等于行高line-height

  • 父元素一定,子元素为多行内联文本:设置父元素的display:table-cellinline-block,再设置vertical-align:middle;

  • 块状元素:设置子元素position:absolute 并设置top、bottom为0,父元素要设置定位为static以外的值,margin:auto;

  • 通用方案: flex布局,给父元素设置{display:flex; align-items:center;}

常用方法举例:

  1. 方法一:table-cell + vertical-align

设置:子容器高度不固定,对父元素设置display:table-cell(parent变为单元格,),继续设置vertical-align:center(使inline元素垂直居中);

优点:兼容性好(支持 IE 8)

缺点:IE 8 以下版本需要调整页面结构至 table

  1. 方法二:absolute + transform

设置:对父元素设置position:realatve(使其作为参照物),对子元素设置position:absolute;left:50%(绝对定位元素的宽度也随内容而定),然后对子元素设置transform:translateY(-50%)(兼容IE6、7 时,替换div结构为table结构即可);

优点: 居中元素不会对其他元素造成影响

缺点transform不兼容低版本IE

  1. 方法三:flex + align-items

设置:对父元素设置display:flex(align-items默认属性为stretch),继而设置align-items:center即可;

优点: 只需要对父元素进行设置

缺点flex align-items不兼容低版本IE

水平居中且垂直居中

结合以上介绍到的水平和垂直居中方法进行设置

  1. 方法一:text-align + inline-block + table-cell + vertical-align

  2. 方法二:absolute + transform

  3. 方法三:flex + justify-content + align-items

多列布局

一列定宽,一列自适应宽度

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 常用的定位和布局方法汇总(已添加源码地址)的更多相关文章

  1. eclipse添加源码的另外一种方法

    当我们使用maven或者gradle时,我们不需要担心源码的问题.Maven会帮我们下载jar包的同时下载对应的源码包.一般为source.jar,比如servlet-api-2.5-sources. ...

  2. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  3. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  4. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  5. CSS易混淆知识点总结与分享-定位与布局

    CSS定位有四种模式:static.relative.absolute.fixed,其它static是默认值,下面分别讲解下各自的特点: static:静态定位,处于动态布局流中,按照页面中的各元素先 ...

  6. css 常用布局

    「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...

  7. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  8. jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  9. CSS定位与布局:浮动

    浮动的特点   浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing blo ...

随机推荐

  1. 面试中的MySQL主从复制|手撕MySQL|对线面试官

    关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 作为<手撕MySQL>系列的第三篇文章,今天讲解使用bin log实现主从复制的功能.主从复制也是MySQL集群实现高可用.数据 ...

  2. Java:IO流(二)——InputStream/OutputStream具体用法:FileXXXStream、ByteArrayXXXStream

    1.说明 InputStream和OutputStream是Java标准库中最基本的IO流,它们都位于java.io包中,该包提供了所有同步IO的功能. 2.模块:java.io.InputStrea ...

  3. omnet++:官方文档翻译总结(三)

    翻译总结自:Turning it Into a Real Network - OMNeT++ Technical Articles 接官方文档翻译总结(二),本节主要是真实网络的搭建 Part 4 - ...

  4. 快速构建 React 开发环境

    使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...

  5. python3中collections模块(转)

    https://www.cnblogs.com/zhangxinqi/p/7921941.html

  6. 微信小程序简易富文本

  7. Excel文件导入SQL Server数据库

    Excel表格的使用可谓是非常广泛,博主也简单百度了一下Excel的发展. 发展历程: 1982年 Microsoft推出了它的第一款电子制表软件-Multiplan,并在CP/M系统上大 Excel ...

  8. 使用Geth 构建以太坊区块链并模拟挖矿过程

    使用Geth 构建以太坊区块链并模拟挖矿过程 Go-ethereum 是以太坊官方的一个Golang 实现,我们可以使用Geth 工具来创建创世区块并启动区块链,使用Clef 实现以太坊钱包的功能,以 ...

  9. JavaWeb 07_创建web项目连接MySQL实现注册登录功能

    一.创建一个web项目,参照JW/01_创建web项目及部署 二.在NAVICat 里建数据库 db_01,建表tb_user ,字段UName .Pwd 三.在web下创建一个Directory, ...

  10. JavaWeb——服务器

    作用:服务器是一种被动的操作,用来处理用户的一些请求和给用户的一些响应 相关软件:tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jaka ...