文档章节

CSS常用布局

谦谦君子
 谦谦君子
发布于 2017/07/20 11:49
字数 1176
阅读 12
收藏 0

====== 样例代码不能显示,请看原文https://magicly.me/css-layout/ ======

布局是CSS中一个很重要的部分,甚至我觉得是最重要也是最难的部分,其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常用布局,包括水平居中、垂直居中、单列布局、多列布局等,以及最新的flex布局,希望能给前端小伙伴一些帮助,也作为自己的知识总结。

在后面的例子中,我特意将各个块背景颜色调出来方便大家“欣赏”。

水平居中

子元素为inline

直接对父元素设置

text-align: center

如:

<div style="background-color: red; text-align: center; height: 100px;">
    <a href="https://magicly.me" style="background-color: green;">magicly</a>
</div>

显示为:

<div style="background-color: red; text-align: center; height: 100px;"> <a href="https://magicly.me" style="background-color: green;">magicly</a> </div>

子元素为block且定宽(宽度可以是百分比)

对子元素设置左右margin为auto

margin: 0 auto;

如:

<div style="background-color: red; height: 100px;">
    <div style="background-color: green; width: 500px; margin: 0 auto;">magicly</div>
</div>

显示为:

<div style="background-color: red; height: 100px;"> <div style="background-color: green; width: 500px; margin: 0 auto;">magicly</div> </div>

子元素为block但是不定宽

设置子元素

display: inline

以及设置父元素

text-align: center;

如:

<div style="background-color: red; text-align: center;">
    <div style="background-color: green; display: inline"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div>
</div>

显示为:

<div style="background-color: red; text-align: center;"> <div style="background-color: green; display: inline"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div> </div>

垂直居中

子元素为inline

设置父元素的height和line-height相等, 如:

<div style="background-color: red; text-align: center; height: 100px; line-height: 100px;">
    <a href="https://magicly.me" style="background-color: green;">magicly</a>
</div>

显示为:

<div style="background-color: red; text-align: center; height: 100px; line-height: 100px;"> <a href="https://magicly.me" style="background-color: green;">magicly</a> </div>

子元素为block

设置子元素position:absolute 并设置top、bottom为0(如果还要左右居中的话,可以设置left: 0; right: 0;),父元素要设置定位为static以外的值(如relative),margin:auto; 如:

<div style="background-color: red; height: 600px; position: relative;">
    <div style="background-color: green; height: 569px; width: 462px; position: absolute; top: 0; bottom: 0; left:0; right: 0; margin: auto;"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div>
</div>

显示为:

<div style="background-color: red; height: 600px; position: relative;"> <div style="background-color: green; height: 569px; width: 462px; position: absolute; top: 0; bottom: 0; left:0; right: 0; margin: auto;"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div> </div>

单列布局

主要有两种:

  • header, content, footer宽度相同,有一个max-width
  • header和footer占满浏览器100%宽度,content有一个max-width

第一种:

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

显示为:

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header> <main style="background-color: green; width: 600px; margin: 0 auto;">内容</main> <footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

第二种:

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

显示为:

<header style="background-color: red;">头部</header> <main style="background-color: green; width: 600px; margin: 0 auto;">内容</main> <footer style="background-color: yellow;">尾部</footer>

两列

float + margin

用float将边栏与主要内容拉到一行,然后设置主要内容的margin。

  • 左边栏:
<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

<main style="background-color: red;"> <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside> <section style="background-color: green; margin-left: 50px;">主要内容</section> </main> * 右边栏 ```html <main style="background-color: red;"> <aside style="background-color: yellow; float: right; width: 50px;">边栏</aside> <section style="background-color: green; margin-right: 50px;">主要内容</section> </main> ``` <main style="background-color: red;"> <aside style="background-color: yellow; float: right; width: 50px;">边栏</aside> <section style="background-color: green; margin-right: 50px;">主要内容</section> </main>

position: absolute + margin

  • 左边栏:
<main style="background-color: red; position: relative;">
  <aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

<main style="background-color: red; position: relative;"> <aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">边栏</aside> <section style="background-color: green; margin-left: 50px;">主要内容</section> </main>

  • 右边栏
<main style="background-color: red; position: relative;">
<aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">边栏</aside>
<section style="background-color: green; margin-right: 50px;">主要内容</section>
</main>

<main style="background-color: red; position: relative;"> <aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">边栏</aside> <section style="background-color: green; margin-right: 50px;">主要内容</section> </main>

三列布局

比较经典有圣杯布局,以及据说是淘宝UED(玉伯)提出的双飞翼布局。

圣杯布局

<header style="background-color: red;">头部</header>
<main style="background-color: black; position: relative; padding: 0 100px 0 90px;">
  <section style="background-color: green; height: 100px; float: left; width: 100%;">主要内容</section>
  <aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%; position: relative; left: -90px;">左边栏</aside>
  <aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px; position: relative; right: -100px;">右边栏</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>

显示为:

<header style="background-color: red;">头部</header> <main style="background-color: black; position: relative; padding: 0 100px 0 90px;"> <section style="background-color: green; height: 100px; float: left; width: 100%;">主要内容</section> <aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%; position: relative; left: -90px;">左边栏</aside> <aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px; position: relative; right: -100px;">右边栏</aside> </main> <div style="background-color: blue; clear: left;">尾部</div>

双飞翼布局

传统的双飞翼布局不是这样的, 只是我发现直接在section用padding也可以达到效果。

<header style="background-color: red;">头部</header>
<main style="background-color: black; position: relative;">
  <section style="background-color: green; height: 100px; float: left; width: 100%; padding: 0 100px 0 90px;">主要内容</section>
  <aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%;">左边栏</aside>
  <aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px;">右边栏</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>

显示为:

<header style="background-color: red;">头部</header> <main style="background-color: black; position: relative;"> <section style="background-color: green; height: 100px; float: left; width: 100%; padding: 0 100px 0 90px;">主要内容</section> <aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%;">左边栏</aside> <aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px;">右边栏</aside> </main> <div style="background-color: blue; clear: left;">尾部</div>

圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚,我就不再赘述。

flex布局

flex布局目前已经很常用了,浏览器支持得也很好,甚至连React Native也是用flex布局的,这么重要想想也觉得应该单独成篇啦。后续再写,有兴趣的可以看看阮老师的下面两篇文章。

refers

© 著作权归作者所有

谦谦君子
粉丝 37
博文 61
码字总数 56919
作品 0
成都
程序员
私信 提问
Div CSS常用布局方式代码集锦

现在都Div CSS布局了,本文收集整理了一些常用的DivCSS布局代码,比如两行一列、三行一列、两行两列、三行两列、两行三列、单行三列以及float定位的代码集锦,下面逐一帖出各个布局的代码: ...

名字已被取
2016/03/01
496
0
《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来...

开元中国2015
2018/10/28
0
0
CSS——把“可以动的盒子”更优雅地展示:③ 常用的“布局”

前言: 拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本最常用的布局方式呢? 本篇给...

itsOli
05/09
0
0
模块化跨屏前端框架 - Goddessui

Goddessui是为所有前端开发者设计,并应用于各种场景布局、元素、特效、 组件、插件、模板等等的一种集合类库。Goddessui System的源码基于CSS预处理脚本less开发而成,CSS动态生成。优势有任...

goddessui
2017/12/25
0
1
好程序员Web前端分享前端CSS篇

  今天好程序员跟大家分享的文章是CSS篇。Web前端技术由html、css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学...

好程序员IT
04/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

二进制位操作

单片机,或者一些模块的设置操作,都是由一个字节数据来完成,每位各有定义。就需进行位操作来组合需要的数字结果。 以JavaScript为例,编写位操作。 我们期望得到这样一个二进制数:0101101...

format
15分钟前
2
0
聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
今天
5
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
今天
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
456
10
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部