CSS常见布局解决方案

最新推荐文章于 2024-07-18 14:29:38 发布
最新推荐文章于 2024-07-18 14:29:38 发布
阅读量379 收藏
点赞数 1
分类专栏： css css3 文章标签： css
css 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
css3
2 篇文章 0 订阅
订阅专栏

文章转自:http://www.admin10000.com/document/13613.html

　　说起css布局，那么一定得聊聊盒模型，清除浮动，position，display什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。

　水平居中布局

　　首先我们来看看水平居中

　　1.margin + 定宽

?
1
2
3
4
5
6
7
8
9
10
< div class = "parent" >
   < div class = "child" >Demo</ div >
</ div >
 
< style >
   .child {
     width: 100px;
     margin: 0 auto;
   }
</ style >

　　相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的

　　2. table + margin

?
1
2
3
4
5
6
7
8
9
10
< div class = "parent" >
   < div class = "child" >Demo</ div >
</ div >
 
< style >
   .child {
     display: table;
     margin: 0 auto;
   }
</ style >

　　display: table 在表现上类似 block 元素，但是宽度为内容宽。

  • 无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为 <table>

　　3.inline-block + text-align

?
1
2
3
4
5
6
7
8
9
10
11
12
< div class = "parent" >
   < div class = "child" >Demo</ div >
</ div >
 
< style >
   .child {
     display: inline-block;
   }
   .parent {
     text-align: center;
   }
</ style >
  • 兼容性佳（甚至可以兼容 IE 6 和 IE 7）

　　4. absolute + margin-left

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< 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

?
1
2
3
4
5
6
7
8
9
10
< div class = "parent" >
   < div class = "child" >Demo</ div >
</ div >
 
< style >
   .parent {
     display: flex;
     justify-content: center;
   }
</ style >
  • 只需设置父节点属性，无需设置子元素
  • flex有兼容性问题

　垂直居中

　　1.table-cell + vertical-align

?
1
2
3
4
5
6
7
8
9
10
< div class = "parent" >
   < div class = "child" >Demo</ div >
</ div >
 
< style >
   .parent {
     display: table-cell;
     vertical-align: middle;
   }
</ style >
  • 兼容性好(IE 8以下版本需要调整页面结构至 table)
　　2.absolute + transform

　　强大的absolute对于这种小问题当然也是很简单的

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< 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

　　如果说absolute强大，那flex只是笑笑，因为，他才是最强的。。。但它有兼容问题

?
1
2
3
4
5
6
7
8
9
10
< div class = "parent" >
   < div class = "child" >Demo</ div >
</ div >
 
< style >
   .parent {
     display: flex;
     align-items: center;
   }
</ style >

　水平垂直居中

　　1. absolute + transform

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< 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 >
  • 绝对定位脱离文档流，不会对后续元素的布局造成影响。
  • transform 为 CSS3 属性，有兼容性问题

　　2. inline-block + text-align + table-cell + vertical-align

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< 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

?
1
2
3
4
5
6
7
8
9
10
11
< div class = "parent" >
   < div class = "child" >Demo</ div >
</ div >
 
< style >
   .parent {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /*垂直居中*/
   }
</ style >
  • 只需设置父节点属性，无需设置子元素
  • 蛋疼的兼容性问题

　##一列定宽，一列自适应

　　1.float + margin

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< div class = "parent" >
   < div class = "left" >
     < p >left</ p >
   </ div >
   < div class = "right" >
     < p >right</ p >
     < 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的方案如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< div class = "parent" >
   < div class = "left" >
     < p >left</ p >
   </ div >
   < div class = "right-fix" >
     < div class = "right" >
       < p >right</ p >
       < 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< div class = "parent" >
   < div class = "left" >
     < p >left</ p >
   </ div >
   < div class = "right" >
     < p >right</ p >
     < 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< 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 >

　　table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

　　4. flex

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< 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 >
  • 低版本浏览器兼容问题
  • 性能问题，只适合小范围布局

　　我们在学会一列定宽，一列自适应的布局后也可以方便的实现 多列定宽，一列自适应 多列不定宽加一列自适应 这里我们不一一讲解，大家自行尝试，也可以巩固前面学习的

　等分布局

　　1. float

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
< 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 的特性为每列等宽，每行等高可以用于解决此需求

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
< 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 >

　　此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。

　　到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差 傲娇的程序员应该放弃太低版本的浏览器

lzyerliu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 解决方案-等高布局
江湖再见
03-16 881
等高布局 *{ margin:0; padding:0; } body{ font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px; } a,img{ border:0 none; } .wrap{ wid
CSS常见的布局方式
m0_70274157的博客
04-30 4742
====== 常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 ![](https://img-blog.csdnimg.cn/dbb55f3d98db47fb8ac999a7398e4f23.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmF 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开
css 常见布局方案以及技巧
weixin_42060658的博客
12-06 342
tab 切换的布局技巧 <!-- 使用flex布局， display: flex; justify-content: space-between;--> <section id="tab"> <section class="catgegory"> <section class="c1 active"> ...
css的常见6种布局方式
mangguom23的博客
01-19 4589
下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局 流体布局 两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离） .left { floa
CSS之常见布局解决方案
zuoypx的博客
08-29 368
分享一下我一年前端自学路上的学习笔记。若有侵权，请联系我，我立即删除或标明出处。 CSS布局是每个前端开发工程师的基本功。下面我列出一些常见布局及解决方案。代码不完整，我只写出重要代码。 水平居中布局 //简单的写一下HTML结构 &lt;div class="parent"&gt; &lt;div class="child"&gt;水平居中布局&lt;/div&gt; ...
CSS布局方案大全【整理】
qq_43067585的博客
08-21 559
我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！ 居中布局 以下居中布局均以不定宽为前提，定宽情况包含其中 1、水平居中 a) inline-block + text-align .parent{ text-align: center; } .child{ display: inline-block; } 提示：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用css hack进行兼容 b) ..
CSS布局解决方案（终结版）
01-27
本文将探讨几种常见的CSS布局解决方案，包括居中布局、多列布局和全局布局。我们将重点关注水平居中、垂直居中以及水平垂直居中的方法。 首先，我们来看水平居中的几种实现方式： 1. **使用inline-block + text-...
DIV+CSS 浮动布局完美解决方案
09-25
浮动布局在网页设计中是一种常见的方法，用于创建多列布局，使得内容能够并排显示。然而，浮动布局在实际应用中经常会遇到各种问题，尤其是在不同浏览器之间存在兼容性差异，如Firefox、IE7、IE8及IE6。这些问题通常...
CSS 多列布局问题简单解决方案
09-25
纯 CSS 打造多列等高并不像想象中那么...本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。
常见布局方案
03-13
本篇文章将深入探讨几种常见的布局方案，包括上中下一栏式、左右两栏式以及它们的不同实现方法，以及左中右三栏布局。 1. 上中下一栏式布局： 这种布局是最基础的网页布局之一，通常用于展示网站头部信息、主要内容...
css锚点定位被顶部固定导航栏遮住的解决方案
11-21
标题中的“css锚点定位被顶部固定导航栏遮住的解决方案”主要涉及到的是网页设计中一个常见的问题，即如何在存在固定在顶部的导航栏时，正确地利用HTML的锚点（Anchor）功能进行页面内部跳转，而不让标题被导航栏...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1342
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 747
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 597
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
拖拽上传（预览图片）
最新发布
喵喵的博客
07-18 392
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
Html_Css问答集(11)
白话魔法师
07-16 850
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 764
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 366
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 179
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
CSS布局技巧：居中、多列与全局解决方案
"这篇文章是关于CSS布局解决方案的总结，涵盖了居中布局的三种常见方法：inline-block+text-align，table+margin，以及absolute+transform。这些方法分别适用于不同的场景和浏览器兼容性需求。" 在前端开发中，CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值