CSS常见布局解决方案

最新推荐文章于 2024-10-29 07:30:00 发布
最新推荐文章于 2024-10-29 07:30:00 发布
阅读量415 收藏
点赞数 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
关注
专栏目录
CSS之常见布局解决方案
zuoypx的博客
08-29 381
分享一下我一年前端自学路上的学习笔记。若有侵权，请联系我，我立即删除或标明出处。 CSS布局是每个前端开发工程师的基本功。下面我列出一些常见布局及解决方案。代码不完整，我只写出重要代码。 水平居中布局 //简单的写一下HTML结构 &lt;div class="parent"&gt; &lt;div class="child"&gt;水平居中布局&lt;/div&gt; ...
css 常见布局方案以及技巧
weixin_42060658的博客
12-06 358
tab 切换的布局技巧 <!-- 使用flex布局， display: flex; justify-content: space-between;--> <section id="tab"> <section class="catgegory"> <section class="c1 active"> ...
css 数字平铺布局
℡メ㏑╭ァ小凯
08-02 416
【代码】css 数字平铺布局。
css多种布局方式
博哥的二进制世界
05-14 3338
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
CSS学习07：背景平铺
玉安_ZhangDe的博客
03-23 1136
目录 使用方法： repeat no-repeat repeat-x repeat-y 使用方法： background-repeat: repeat | no-repeat | repeat-x | repeat-y 参数值 作用 repeat 背景图片在纵向和横向上平铺（默认） no-repeat 背景图片不平铺 repeat-x 背景图片在横向上平铺 repeat-y 背景图片在纵向上平铺 repeat <...
CSS布局解决方案（终结版）
01-27
本文将探讨几种常见的CSS布局解决方案，包括居中布局、多列布局和全局布局。我们将重点关注水平居中、垂直居中以及水平垂直居中的方法。 首先，我们来看水平居中的几种实现方式： 1. **使用inline-block + text-...
DIV+CSS 浮动布局完美解决方案
09-25
浮动布局在网页设计中是一种常见的方法，用于创建多列布局，使得内容能够并排显示。然而，浮动布局在实际应用中经常会遇到各种问题，尤其是在不同浏览器之间存在兼容性差异，如Firefox、IE7、IE8及IE6。这些问题通常...
CSS 多列布局问题简单解决方案
09-25
纯 CSS 打造多列等高并不像想象中那么...本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。
web前端开发中常见的多列布局解决方案整理(一定要看)
11-29
本文主要探讨了三种常见的多列布局解决方案：两列定宽加一列自适应、多列不定宽加一列自适应以及多列等分布局。 首先，两列定宽加一列自适应布局常用于需要一边保持固定宽度，另一边根据内容自动扩展的情况。例如，...
CSS浮动详解及其解决方案
10-09
内容概要：本文档全面讲解CSS浮动概念，浮动规则、实际应用及解决方案。详细讲述了通过使用float属性进行左右布局的基本方法，包括浮动的基础、浮动的常见规则以及在各种布局场合的应用示例，并着重解决了由浮动引发...
CSS页面布局及排版
m0_56215889的博客
04-10 2783
CSS盒子模型 一个独立的盒子模型由内容、border（边框）、padding（内边距）、margin（外边距）4部分组成。 一个盒子的实际宽度（或高度）是有内容+padding（两边）+border（两边）+margin（两边）组成。 边框（border） border-color属性：指定边框的颜色。 border-width属性：指定边框粗细程度。 border-style属性：指定边框样式。如果没有指定边框样式，那么其他的属性都将不起作用，边框将不存在。 border-radius
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
热门推荐
Cinderella_hou的博客
08-08 4万+
今天太累了，写不了了，先留着写。  1.css3之前       三种方法：圣杯布局 2 ， css3新特性    多栏布局    弹性盒模型布局
如何在css中将图片横向摆放,css如何将图片横向平铺？
weixin_34093995的博客
08-03 6088
在CSS中，可以使用background(背景)属性来添加图片，默认图片是向x轴和y轴重复。那么css如何将图片横向平铺？下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法，希望对大家有所帮助。在CSS中，可以使用background-repeat属性来将图片横向平铺。background-repeat属性是用来设置背景图像如何平铺的；默认地，背景图像在水平和垂直方向上重复。语法：bac...
浅谈css3中display属性的flex布局
weixin_44635214的博客
10-14 204
基本概念 采用Flex布局的元素，称为Flex容器，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目，简称"项目"。容器默认存在两根轴：水平的主轴和垂直的交叉轴。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中，也可以应用于行内元素。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，
CSS布局方案大全【整理】
qq_43067585的博客
08-21 572
我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！ 居中布局 以下居中布局均以不定宽为前提，定宽情况包含其中 1、水平居中 a) inline-block + text-align .parent{ text-align: center; } .child{ display: inline-block; } 提示：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用css hack进行兼容 b) ..
css的常见6种布局方式
mangguom23的博客
01-19 4658
下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局 流体布局 两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离） .left { floa
名词（术语）了解--CSSOM (CSS Object Model)
最新发布
weixin_40539956的博客
10-29 579
/ 1. 定义全局 CSS 变量// 2. 读取 CSS 变量// 3. 动态主题实现light: {},dark: {});
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、付费专栏及课程。

余额充值