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. Qt:QString

    0.说明 区别于QByteArray,QString串是Unicode串,每个元素都是QChar 16-bit UTF-16编码(Unicode) :而QByteArray是8-bit串. 0.1.初 ...

  2. WIN10:全选一个文件夹中的所有文件

  3. Python:格式化字符串的几种方式

    1.% 'abc%s'%'123' 'abc123' 'abc%s%s'%('123','456') 'abc123456' 当变量v是一个Tuple.List且其中元素数量和字符串中%数量相同时,可 ...

  4. linux多进/线程编程(7)——多线程1(线程的创建,回收,分离,设置线程属性等)

    参考资料: 1.博客1:https://blog.csdn.net/zhou1021jian/article/details/71531699 2.博客2:https://blog.csdn.net/ ...

  5. windows下安装gym

    安装gym在执行pip install -e'.[all]'这句语句时,可能会出现这种情况 在pycharm中运行的时候会出现如下这种情况: 或者这种情况 出现这种问题可能是python的版本太高了, ...

  6. 基于NopCommerce框架开发的微信小程序UrShop

    Urshop小程序商城 介绍 UrShop小程序商城 2.0发布啦,发布地址https://gitee.com/urselect/urshop UrShop 根据NopCommerce框架开发的,基于 ...

  7. laravel7 webuploader上传图片

    webuploader上传 前提工作: 1>了解 代码如下:1.app_path() app_path函数返回app目录的绝对路径: $path = app_path(); 你还可以使用app_ ...

  8. 如何实现ARC中weak功能?

    原文链接 我们都知道ARC中weak与assign或者说unsafe_unretained最大的不同就是设置weak属性后,系统会在对象被释放后自动将指向对象的指针置为nil,而assign则会产生一 ...

  9. xxl-job踩坑记录——执行器,执行10分钟自动失败

    问题描述 上一篇Docker 部署xxl-job 报错:xxl-rpc remoting error(connect timed out), for url : xxxxxx - 这行代码没Bug - ...

  10. vue3-动态组件的要点

    <!--动态组件--> <!--缓存,只缓存about和home组件--> <keep-alive exclude="about" > < ...