CSS 布局经典问题初步整理

本文主要对 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 的空白,避免中间盒子的内容被左右盒子覆盖;

 

class="container">

    

    class="middle">中间弹性区

    class="left">左边栏

    class="right">右边栏

 

双飞翼布局

 

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

 

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

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

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

 

class="container">

    

    class="middle">

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

    

    class="left">左边栏

    class="right">右边栏

 

圣杯和双飞翼异同

 

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

 

 

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

 

利用浮动实现

 

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

 

class="container">

    class="left">左边栏

    class="right">右边栏

    

    class="middle">中间弹性区

 

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

 

 

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

 

负 magin

 

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

 

 

简单总结几点:

 

 

清除浮动

 

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

 

 

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

 

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

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

 

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

 

居中布局

 

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

文章大致结构:

 

 

响应式设计

 

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

 

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

 

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

 

RWD:

 

 

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

 

AWD:

 

 

以上 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 布局参考下面几篇文章就可以了,几篇文章大同小异,看一两篇就知道大概了,讲的挺详细的,在此不赘述

 

转载于:https://www.cnblogs.com/maoyizhimi/p/7251781.html

你可能感兴趣的:(CSS 布局经典问题初步整理)