css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了。 回到主题,从最开始的css到如今的sass(less),开发的效率确实变得越来越高效,但是可能有时候我们还是会对页面布局产生烦恼的情绪,比如:"咦?我想让它显示在这个部位,它一点都不听话啊"。很大原因在于我们可能没对css布局这块做一个系统的梳理~,偶然间发现了Learn CSS Layout,在此分享给大家,希望和大家共同提高,另外安利给大家一个如何写出更加优雅的html&&css代码的文章,使劲戳我!

填坑"display"

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block:

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素: header 、 footer 、 section 等等。
 
inline:
span 是一个标准的行内元素。一个行内元素可以在段落中<span> 像这样 </span>包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素,它可以被用作链接。
 
none:

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它,例如 script。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden; 还会保留。

扩展:

每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它!常见的例子是:把 li 元素修改成 inline,制作成水平菜单。

*inline-block布局

把inline-block单独拎出来讲,说来惭愧,很长一段时间我都是蒙着用它的,对于block、inline、inline-block的区别我自己总结了一句话

block:有宽高,不在同一行;
inline:同一行,无宽高;
inline-block: 有宽高又在同一行

这算是个小插曲吧,接着我们的布局之旅;在此之前,读者需可以先阅读下文的float布局和clear的知识再回头来看这知识会容易不少,然后我们会对比inline-block布局相对于float布局的优势;

困难的方式(float布局)

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.box 我在浮动

.after-box 我在使用 clear,所以我不会浮动到上面那堆盒子的旁边。

容易的方式(使用inline-block)

你可以用 display 属性的值 inline-block 来实现相同效果。

.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

.box2 我是一个行内块!

这次我可没有用 clear 。太棒了!

使用inline-block布局的注意项:

①vertical-align 属性会影响到 inline-block 元素,你可能会把它的值设置为 top 。
②你需要设置每一列的宽度
③如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙

你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西,你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣,可以在后面的链接中找到更详细的信息。

margin:auto&&max-width

margin:auto:

#main {
width: 600px;
margin: 0 auto;
}

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...

max-width:

#main {
max-width: 600px;
margin: 0 auto;
}

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,调整下浏览器窗口大小检查下吧!

顺便提下, 所有的主流浏览器包括IE7+在内都支持 max-width ,所以放心大胆的用吧。

盒模型

在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型当你设置了元素的宽度,实际展现的元素却能够超出你的设置因为元素的边框和内边距会撑开元素。看下面的例子,两个相同宽度的元素显示的实际宽度却不一样。

.simple {
width: 500px;
margin: 20px auto;
} .fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: 10px #6AC5AC solid;
}

class="simple":

我小一些...

class="fancy":

我比它大!

以前有一个代代相传的解决方案是数学。CSS开发者需要用比他们实际想要的宽度小一点的宽度,需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了,让我们接着看...

※box-sizing※

这个部分是我着重向大家分享的知识点,因为自己以前没掌握o(╯□╰)o,推荐大家多用用box-sizing属性;

经过了一代又一代人们意识到数学不好玩,所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box; :

.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} .fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: 10px #6AC5AC solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

class="simple":

我们现在一样大小了!

class="fancy":

万岁!

既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

既然 box-sizing 是个很新的属性,目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+

position布局

为了制作更多复杂的布局,我们需要讨论下 position 属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你最好还是把这页放到书签里。

static:

.static {
position: static;
}

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”

relative: 

relative是我项目里用到的最多的属性了,它通常和绝对定位相结合;

.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
width: 500px;
}

relative1 表现的和 static 一样,除非你添加了一些额外的属性。

在一个相对定位(position属性的值为relative)的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

fixed:

一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom和 left 属性都可用。

一个固定定位元素不会保留它原本在页面应有的空隙。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

absolute:

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指position 值不是 static的元素。

这里有一个简单的例子:

.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right:;
width: 300px;
height: 200px;
}

这个元素是相对定位的。如果它是 position: static; ,那么它的绝对定位子元素会跳过它直接相对于body元素定位。

这个元素是绝对定位的。它相对于它的父元素定位。

给想练手的新同学留个小作业吧,用relative+absolute实现出下面这个简单的登录Demo,后期贴上源码;

以上这部分可能有些难理解,但它是创造优秀布局所必需的知识。

float布局

另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片,如下:

img {
float: right;
margin: 0 0 1em 1em;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

*clear

clear 属性被用于控制浮动。比较下面两个例子:(貌似博客园不支持<section>标签,代码里我用<div>代替,大家懂意思就行)

<div class="box">我感觉好像我在漂浮!</div>
<section> 在这个例子中, section 元素实际上是在 div 之后的(译注:DOM结构上)。然而 div 元素是浮动到左边的,于是 section 中的文字就围绕了 div ,并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢?</section>
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}

div class="box" 我感觉好像我在漂浮!

section  在这个例子中, section 元素实际上是在 div 之后的(译注:DOM结构上)。然而 div 元素是浮动到左边的,于是 section 中的文字就围绕了 div ,并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢?

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}

div class="box" 我感觉好像我在漂浮!

section class="after-box" 使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

*清除浮动(clearfix hack)

img {
float: right;
}

不......这个图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面!

见证奇迹的时刻到了!有一种比较丑陋的方法可以解决这个问题,它叫做清除浮动(clearfix hack).

让我们加入一些新的CSS样式:

.clearfix {
overflow: auto;
}

现在再看看发生了什么:

<div class="clearfix"> 好多了!

这个可以在现代浏览器上工作。如果你想要支持IE6,你就需要再加入如下样式:

.clearfix {
overflow: auto;
zoom:;
}

有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深,但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。

百分比宽度布局

百分比是一种相对于包含块的计量单位。它对图片很有用:如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果!

article img {
float: right;
width: 50%;
}

你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度!

你可以用百分比做布局,但是这需要更多的工作。总而言之,选一种最合适你的内容的方式。附上之前做的一个用百分比做布局的项目。

这是微信端的展示,从中我们可以看出如果用百分比布局来做界面比较明朗的界面的话,那在兼容多种终端上,它能帮我们省下不少力气,另外该项目已经开源,喜欢的朋友可以去star一下哟;项目地址

媒体查询

“响应式设计(Responsive Design)”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略,这样可以让网站在任何情况下显示的很棒!

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

现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在MDN文档中你还可以学到更多有关媒体查询的知识。

demo
@media screen and (min-width:640px) {
...
}
@media screen and (max-width:768px) {
...
}

补充:使用 meta viewport 之后可以让你的布局在移动浏览器上显示的更好。

使用方法:<meta name=”viewport” content=”” />

在实际项目中,为了让Responsive设计在智能设备中能显示正常,也就是浏览Web页面适应屏幕的大小,显示在屏幕上,可以通过这个可视区域的meta标签进行重置,告诉他使用设备的宽度为视图的宽度,也就是说禁止其默认的自适应页面的效果,具体设置如下:

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

column布局

这里有一系列新的CSS属性,可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧:

.three-column {
padding: 1em;
-moz-column-count:;
-moz-column-gap: 1em;
-webkit-column-count:;
-webkit-column-gap: 1em;
column-count:;
column-gap: 1em;
}

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,为此W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。

CSS columns是很新的标准,所以你需要使用前缀,并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性,点击这里了解更多

flexbox布局

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。这次分享一些例子,来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行,基于最新的标准

网上有不少过时的 flexbox 资料。 如果你想要了解更多有关 flexbox 的内容,从这里学习如何辨别一份资料是否过时。或者查看关于最新标准的详细文章

使用flexbox你还可以做的更多;这里只是一些让你了解概念的例子:

使用Flexbox的牛逼布局

.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex:;
flex:;
}
.flex2 {
-webkit-flex:;
flex:;
}

.initial 空间足够的时候,我的宽度是200px,如果空间不足,我会变窄到100px,但不会再窄了。

.none 无论窗口如何变化,我的宽度一直是200px。

.flex1 剩余宽度的1/3。

.flex2 我会占满剩余宽度的2/3。

使用Flexbox的居中布局

.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
 CSS里总算是有了一种简单的垂直居中布局的方法了!

写在最后

再次感谢Learn CSS Layout的作者,给我们带来了如此绝妙的css布局盛宴,同时也感谢敏明君sunnylost的翻译,在以上前辈力作的基础上,云云加了不少个人观点,如有不当,还请博友们指出。原作是如此优秀,忍不住让云云连续花了6个多小时,整理并手敲实现了每行样式代码。真心建议有时间的朋友能好好阅读下原文以及其中诸多的超棒的链接,不管对知识的巩固亦或是进阶一定大有裨益!最后,十分感谢朋友们的阅读,望与大家共同提高!

界面设计技法之css布局的更多相关文章

  1. QT_QML 界面设计Row和Column布局

    Column与Row的使用方式类似,下面以Column为例子: Column{ x: label_poseParamValue.x + label_poseParamValue.width + 10 ...

  2. Android开发1:基本UI界面设计——布局和组件

    前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...

  3. WPF界面设计技巧(9)—使用UI自动化布局

    原文:WPF界面设计技巧(9)-使用UI自动化布局 最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail 今天开始编写附属的加密/解密工具,对UI自动化布局有些 ...

  4. CSS布局设计

    CSS布局设计: (1)固定布局:各个部分采用固定宽度的页面布局. (2)流式布局:通过定义模块和模块间距的百分比的方式来实现.缺点是会自动缩放,影响图片的美观. (3)响应式布局:页面可以用户的设备 ...

  5. css+div网页设计(二)--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  6. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  7. 三十二、Java图形化界面设计——布局管理器之CardLayout(卡片布局)

    摘自 http://blog.csdn.net/liujun13579/article/details/7773945 三十二.Java图形化界面设计--布局管理器之CardLayout(卡片布局) ...

  8. 三十三、Java图形化界面设计——布局管理器之null布局(空布局)

    摘自http://blog.csdn.net/liujun13579/article/details/7774267 三十三.Java图形化界面设计--布局管理器之null布局(空布局) 一般容器都有 ...

  9. 三十一、Java图形化界面设计——布局管理器之GridLayout(网格布局)

    摘自http://blog.csdn.net/liujun13579/article/details/7772491 三十一.Java图形化界面设计--布局管理器之GridLayout(网格布局) 网 ...

随机推荐

  1. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  2. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  3. C# Excel导入、导出【源码下载】

    本篇主要介绍C#的Excel导入.导出. 目录 1. 介绍:描述第三方类库NPOI以及Excel结构 2. Excel导入:介绍C#如何调用NPOI进行Excel导入,包含:流程图.NOPI以及C#代 ...

  4. Ngrok让你的本地Web应用暴露在公网上

    1.Ngrok介绍 Ngrok是一个反向代理,通过在公共的端点和本地运行的Web服务器之间建立一个安全的通道.Ngrok可捕获和分析所有通道上的流量,便于后期分析和重放.简单来说,利用 Ngrok可以 ...

  5. .net 分布式架构之配置中心

    开源QQ群: .net 开源基础服务  238543768 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ConfigManager ...

  6. 更愉快的书写CSS

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

  7. PHP之Memcache缓存详解

         Mem:memory缩写(内存):内存缓存 1.  断电或者重启服务器内存数据即消失,即临时数据: Memcache默认端口:11211 存入方式:key=>>value    ...

  8. App 审核由于 IPv6 网络问题被拒

    昨天 提交App Store 的时候被拒了 We discovered one or more bugs in your app when reviewed on iPhone running iOS ...

  9. Fresnel Reflection - 菲涅尔反射

    [Fresnel Reflection - 菲涅尔反射] “菲涅尔”是一个人的名字,因为他发现了一个有关反射的光学现象,这个现象就用这个人的名字命名了.那么,是什么现象呢? 这就是反射/折射与视点角度 ...

  10. Merge Sorted Array

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...