专栏名称: OSC开源社区
OSChina 开源中国 官方微信账号
目录
相关文章推荐
OSC开源社区  ·  “太锈啦”——SpacetimeDB ... ·  3 天前  
OSC开源社区  ·  Gitee开源MCP ... ·  2 天前  
程序员的那些事  ·  刚刚!TypeScript 之父宣布一重大好消息 ·  3 天前  
码农翻身  ·  干货!服务器运维极简指南 ·  2 天前  
待字闺中  ·  给MCP祛魅 ·  5 天前  
51好读  ›  专栏  ›  OSC开源社区

CSS 布局经典问题初步整理

OSC开源社区  · 公众号  · 程序员  · 2017-06-12 08:30

正文


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


CSS 基础知识


下面几个入门教程不错:


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

链接: http://www.imooc.com/learn/9


2、 MDN - CSS入门教程 : MDN 的官方文档

链接: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started


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

链接: http://zh.learnlayout.com/


CSS 定位问题


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


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

链接: http://www.barelyfitz.com/screencast/html-training/css/positioning/


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

链接: http://ife.baidu.com/note/detail/id/662


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

链接: http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html


三栏式布局


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


圣杯布局


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


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

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

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

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

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

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



双飞翼布局


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


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

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

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



圣杯和双飞翼异同


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


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

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

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

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


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


利用浮动实现


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



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


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

链接: http://www.w3cplus.com/blog/104.html


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

链接: http://www.jianshu.com/p/f9bcddb0e8b4


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

链接: https://alistapart.com/article/holygrail


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

链接: http://ife.baidu.com/note/detail/id/1025


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


负 magin


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


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

链接: https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/


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

链接: http://www.jianshu.com/p/549aaa5fabaa


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

链接: http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html


简单总结几点:


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

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

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

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

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








请到「今天看啥」查看全文