CSS 布局经典问题初步整理

news/2025/2/12 18:58:43

本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。

CSS 基础知识

 

下面几个入门教程不错:

 

幕课网 – HTML+CSS基础课程:偏基础,可以在线练习和预览

MDN – CSS入门教程: MDN 的官方文档

学习 CSS 布局:排版和配色特别舒服,简短但不深入,适合概览入门

 

CSS 定位问题

 

主要就是经典的绝对定位,相对定位问题。

 

10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动。

百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较详细

HTML和CSS高级指南之二——定位详解(译文):介绍浮动的使用,详细介绍定位的技巧,包括如何准确的给元素在 X 轴、Y 轴和 Z 轴定位

 

三栏式布局

 

涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,它们实现的效果是一样的,差别在于其实现的思想。

 

圣杯布局

 

圣杯:父盒子包含三个子盒子(左,中,右)

 

中间盒子的宽度设置为 width: 100%; 独占一行;

使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;

.left {margin-left:-100%;} 把左边的盒子拉上去

.right {margin-left:-右边盒子宽度px;} 把右边的盒子拉上去

父盒子设置左右的 padding 来为左右盒子留位置;

对左右盒子使用相对布局来占据 padding 的空白,避免中间盒子的内容被左右盒子覆盖;

 

<!-- 圣杯的 HTML 结构 -->

<div class="container">

    <!-- 中间的 div 必须写在最前面 -->

    <div class="middle">中间弹性区</div>

    <div class="left">左边栏</div>

    <div class="right">右边栏</div>

</div>

 

双飞翼布局

 

双飞翼:父盒子包含三个子盒子(左,中,右),中间的子盒子里再加一个子盒子。

 

中间盒子的宽度设置为 width: 100%; 独占一行;

使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;

在中间盒子里面再添加一个 div,然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置;

 

<!-- 双飞翼的 HTML 结构 -->

<div class="container">

    <!-- 中间的 div 必须写在最前面 -->

    <div class="middle">

         <div class="middle-inner">中间弹性区</div>

    </div>

    <div class="left">左边栏</div>

    <div class="right">右边栏</div>

</div>

 

圣杯和双飞翼异同

 

圣杯布局和双飞翼布局解决的问题是一样的,都是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。

 

两种方法基本思路都相同:首先让中间盒子 100% 宽度占满同一高度的空间,在左右两个盒子被挤出中间盒子所在区域时,使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。

主要区别在于 如何使中间盒子的内容不被左右盒子遮挡:

圣杯布局的方法:设置父盒子的 padding 值为左右盒子留出空位,再利用相对布局对左右盒子调整位置占据 padding 出来的空位;

双飞翼布局的方法:在中间盒子里再增加一个子盒子,直接设置这个子盒子的 margin 值来让出空位,而不用再调整左右盒子。

 

简单说起来就是双飞翼布局比圣杯布局多创建了一个 div,但不用相对布局了,少设置几个属性。

 

利用浮动实现

 

我自己使用浮动也实现了三栏式布局:左边盒子左浮动,右边盒子右浮动,中间盒子利用 margin-left 和 margin-right 来为左右盒子留位置,同时父盒子设置 overflow: auto; 来避免子盒子溢出。

 

<!-- 浮动实现的 HTML 结构 -->

<div class="container">

    <div class="left">左边栏</div>

    <div class="right">右边栏</div>

    <!-- 中间的 div 必须写在最后面 -->

    <div class="middle">中间弹性区</div>

</div>

 

三栏式布局参考下面几个链接:

 

CSS三栏布局——中间固定两边自适应宽度: w3cplus 的文章,使用了双飞翼和浮动实现两侧定宽、中间自适应,也实现了两侧自适应、中间定宽

简书 – 圣杯布局和双飞翼布局(前端面试必看):只讲了圣杯,不过特别详细

In Search of the Holy Grail:圣杯布局的来源

百度前端学院笔记 – 三栏式布局之双飞翼与圣杯:百度前端学院学员的前端学习笔记

 

三栏式布局涉及到负 magin 和 清除浮动的问题。

 

负 magin

 

这里引出了“负 margin”的问题:

 

负margin用法权威指南:The Definitive Guide to Using Negative Margins 的译文,介绍了负 magin 的一些性质和很多实用技巧

简书 – margin为负值产生的影响和常见布局应用:包括对自身的影响,对文档流的影响,以及一些在布局中的应用技巧(比如去除列表右边框,负边距+定位实现水平垂直居中,去除列表最后一个 li 元素的 border-bottom,多列等高)

博客园 – CSS布局奇淫巧计之-强大的负边距:和上文内容差不多

 

简单总结几点:

 

不使用 float 的话,负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素,所有跟随的元素都会被上移(而 relative 定位的元素则不同,会保留原位置,影响文档流)。

当 static 元素的 margin-top/margin-left 被赋予负值时,元素将被拉进指定的方向。

如果你设置 margin-bottom/right 为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。

当元素不存在 width 属性或者 width: auto 的时候,负 margin 会增加元素的宽度.

margin-top 为负值不会增加高度,只会产生向上位移;margin-bottom 为负值不会产生位移,会减少自身的供 CSS 读取的高度,影响下方的元素位置;上下相邻的元素两者均为负时,效果不叠加,取负值更多的那个效果。

 

清除浮动

 

清除浮动主要是为了解决高度塌陷问题。而简单的 clear: both 并不能解决这个问题,所以引出了许多解决方案。

 

StackOverflow – What methods of ‘clearfix’ can I use?:清除浮动黑科技完整解读

那些年我们一起清除过的浮动:神文,把“清除浮动”定义为“闭合浮动”,把问题由来和解决方案都讲清楚了,并且分析了各种解决方案的优劣。

 

各种解决方案在上面的链接里有很详细的说明了,这里就不赘述了。大体分为两类:

 

其一,通过在浮动元素的末尾添加一个空元素,设置 clear: both 属性,after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;

其二,通过设置父元素 overflow 或者 display: table 属性来闭合浮动

 

顺便补充一句,clear float(例如 clear: left) 是对某个元素设置,以避免其某一边有浮动元素,即对当前元素产生约束,约束的边界为其他的浮动元素。对于已经浮动的元素,设置 clear float 是无效的。

 

居中布局

 

Centering in CSS: A Complete Guide:非常全面的居中定位博客,包括各种情况下的水平居中,垂直居中和水平垂直居中方案。有展示示例及相应的 HTML 和 CSS 代码

文章大致结构:

 

水平居中

对于行内元素(inline):text-align: center;

对于块级元素(block):设置宽度且 marigin-left 和 margin-right 是设成 auto

对于多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;;或者使用 flex 布局

垂直居中

对于行内元素(inline)

单行:设置上下 pandding 相等;或者设置 line-height 和 height 相等

多行:设置上下 pandding 相等;或者设置 display: table-cell; 和 vertical-align: middle;;或者使用 flex 布局;或者使用伪元素

对于块级元素(block):下面前两种方案,父元素需使用相对布局

已知高度:子元素使用绝对布局 top: 50%;,再用负的 margin-top 把子元素往上拉一半的高度

未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

使用 Flexbox:选择方向,justify-content: center;

水平垂直居中

定高定宽:先用绝对布局 top: 50%; left: 50%;,再用和宽高的一半相等的负 margin 把子元素回拉

高度和宽度未知:先用绝对布局 top: 50%; left: 50%;,再设置 transform: translate(-50%, -50%);

使用 Flexbox:justify-content: center; align-items: center;

 

响应式设计

 

“响应式设计(Responsive Design)” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略。

 

媒体查询(Media Queries)是做此事所需的最强大的工具。

 

注: Responsive Web Design = RWD,Adaptive Web Design = AWD

 

RWD:

 

采用 CSS 的 media query 技术

流体布局(fluid grids)

自适应的图片/视频等资源素材

 

(为小、中、大屏幕做一些优化,目的是让任何尺寸的屏幕空间都能得到充分利用)

 

AWD:

 

CSS media query 技术(仅针对有限几种预设的屏幕尺寸设计)

用 JavaScript 来操作 HTML 内容

在服务器端操作 HTML 内容(比如为移动端减少内容,为桌面端提供更多内容)

 

以上 RWD 和 AWD 解释引自 知乎 @屹峰

 

可以参考 Bootstrap 的网格系统:http://getbootstrap.com/css/#grid-less

 

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).

 

自己实现网格系统: Creating Your Own CSS Grid System

 

Flexbox 布局

 

Flexbox 布局参考下面几篇文章就可以了,几篇文章大同小异,看一两篇就知道大概了,讲的挺详细的,在此不赘述

 

w3cplus – 一个完整的Flexbox指南:A Complete Guide to Flexbox 的译文

SegmentFault – Flexbox详解

w3cplus – 图解CSS3 Flexbox属性

w3cplus – Flexbox——快速布局神器

 

END

碧茂课堂精彩课程推荐:

1.Cloudera数据分析课;

2.Spark和Hadoop开发员培训;

3.大数据机器学习之推荐系统;

4.Python数据分析与机器学习实战;

详情请关注我们公众号:碧茂大数据-课程产品-碧茂课堂

现在注册互动得海量学币,大量精品课程免费送!


https://dhexx.cn/news/show-3787650.html

相关文章

唐先杰遇上区块链:要加薪,也要改变世界 | 对话MVP

区块链能带来什么&#xff1f; 对于唐先杰来说&#xff0c;是“加薪”的现实收益&#xff0c;也是“改变世界”的精神满足。 唐先杰是旺链科技的区块链系统架构师&#xff0c;拥有10余年技术经验。接触到区块链以及FISCO BCOS开源社区之后&#xff0c;在社区伙伴的帮助下&…

五年携手共话,FISCO BCOS为数实相生注入新动能

2月24日&#xff0c;作为深圳国际金融科技节系列活动之一&#xff0c;由深圳市地方金融监督管理局指导&#xff0c;微众银行、金链盟主办的“2022产业区块链年度峰会暨FISCO BCOS五周年生态大会”&#xff08;下称“大会”&#xff09;在深圳顺利召开。本次大会以“数实相生&am…

聊聊Java数据库开发的那点事儿

无论你开发的是一款PC端的Web应用&#xff0c;还是一款移动端的app&#xff0c;都需要一个数据库来存储你的业务数据&#xff08;包括电商的商品信息、游戏的道具信息、社交的人员信息等等&#xff09;。可以说&#xff0c;数据库是后端系统最重要的存储组件。 作为一名Java程序…

性能调整基础知识--摘自《Web性能测试实战》第一章

性能调整基础知识所谓性能调整是为了改变系统特性而对系统软件或者硬件进行的修改&#xff0c;性能调整不是测试人员的职责&#xff0c;性能测试工程师的主要任务是发现并定位性能问题。对于性能测试中发现的问题&#xff0c;通常由性能测试工程师、DBA、系统管理员、开发人员共…

大数据开发零基础需要学习什么内容?Storm实时开发

前面我们说到0基础学习大数据开发需要的Java基础、大数据基础和大数据技术学习的重点&#xff1a;Hadoop、Spark&#xff0c;今天继续来介绍大数据学习的重点之三&#xff1a;Storm实时计算。 Storm实时计算平台 &#xff08;1&#xff09;Storm简介&#xff1a; Storm是一个…

推荐一个正在发展的论坛--测试论坛中的《读者》

中国QA在线论坛(http://www.cnqa.cn/bbs/ )是由几个热爱软件测试事业的人士联合成立的论坛&#xff0c;其目的是把它做成一个像《读者》一样的精华文摘论坛&#xff0c;这样广大测试人员就可以快速找到精华资料&#xff0c;共同在一个好的论坛环境学习成长&#xff01;论坛的创…

北京人均GDP破6000美元

北京人均GDP突破6000美元 住房汽车娱乐贡献稳增2007-01-25 00:14:17 来源: 中华工商时报  黑马推荐北京去年人均GDP突破6000美元&#xff0c;按北京常住人口1581万人计算&#xff0c;全市人均GDP达到49505元&#xff0c;按平均汇率折算为6210美元&#xff0c;按可比价格计算比…

HTML DIV+CSS 命名规范大全

END 碧茂课堂精彩课程推荐&#xff1a; 1.Cloudera数据分析课&#xff1b; 2.Spark和Hadoop开发员培训&#xff1b; 3.大数据机器学习之推荐系统&#xff1b; 4.Python数据分析与机器学习实战&#xff1b; 详情请关注我们公众号&#xff1a;碧茂大数据-课程产品-碧茂课堂 …

项目中的软件质量管理

项目中的软件质量管理本文发表于《软件世界》07年1月杂志&#xff0c;转载请注明。提起软件质量管理&#xff0c;人们更多地会想起ISO9001、CMM、CMMI这些“质量管理圣经”。但国内企业做了这么多年的质量认证&#xff0c;却没有使软件质量有大幅度地提高。实际上&#xff0c;很…

反思深度学习与传统计算机视觉的关系

如今&#xff0c;深度学习在众多领域都有一席之地&#xff0c;尤其是在计算机视觉领域。尽管许多人都为之深深着迷&#xff0c;然而&#xff0c;深网就相当于一个黑盒子&#xff0c;我们大多数人&#xff0c;甚至是该领域接受过培训的科学家&#xff0c;都不知道它们究竟是如何…