CSS Layout

xiaoyureed@gayhub

display属性

对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素

block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline

span 是一个标准的行内元素, a 元素是最常用的行内元素;这里没有另提一行

在哪里用到呢: 可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

none

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

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

我不会显示, 但是会占据位置

上一个元素占据了一行位置

inline-block

inline-block 还是block, 但是具备inline的特性, 需要做些工作让ie6/7支持inline-block;

这里有个使用inline-block来布局的 demo: link

创建很多网格来铺满浏览器, 可以使用float或者 display:inline-block, 但是后者更为简单🍳, 下面是这两种实现方式:

box1: 我使用的float, 浮起来了

box2: 我使用的float, 浮起来了

box3: 我使用的float, 浮起来了

box4: 我使用的float, 浮起来了

box5: 我使用的float, 浮起来了

box6: 我使用的float, 浮起来了

box7: 我使用的float, 浮起来了

box8: 我使用的float, 浮起来了

box9: 我使用的float, 浮起来了

box10: 我使用的float, 浮起来了

box11: 我使用的float, 浮起来了

我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。隔断了前面元素的浮动效果(防止对后面元素造成影响)

box1: 我使用的float, 浮起来了

box2: 我使用的float, 浮起来了

box3: 我使用的float, 浮起来了

box4: 我使用的float, 浮起来了

box5: 我使用的float, 浮起来了

box6: 我使用的float, 浮起来了

box7: 我使用的float, 浮起来了

box8: 我使用的float, 浮起来了

box9: 我使用的float, 浮起来了

box10: 我使用的float, 浮起来了

box11: 我使用的float, 浮起来了

flex "松紧带布局"

新的 flexbox 布局模式被用来重新定义CSS中的布局方式, 特性强大, 容易使用, 但是不同浏览器貌似支持的标准不一样

同样, 将前面的布局通过display: flex 实现一遍: link

Flexbox 的居中布局

CSS里总算是有了一种简单的垂直居中布局的方法了

水平居中

margin: auto;

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。唯一的问题是，如果浏览器窗口太窄(当浏览器窗口比元素的宽度还要窄时)，浏览器会显示一个水平滚动条来容纳页面。下面来借助 "max-width"改进

max-width

使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要

盒子模型 box-sizing: border-box;

默认盒子模型元素视觉上的宽度=实际宽度+padding+(border-width属性), 看看默认盒子模型的例子

我没有padding和border-width, 所以小一些

我有padding和border-width, 元素"被撑大了", 但其实width都是一样的

box-sizing: border-box;这样的元素的内边距和边框不再会增加它的宽度

一样的大小(凑字数~凑字数~凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数)

一样的大小, 现在增加padding和border-width只能往里面挤挤自个儿了

想要页面上所有的元素都有如此表现, 可以这么做(使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的)

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

position属性

这个属性忒难记...😂 它有一大堆的值，名字还都特抽象

static

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

relative

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

在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素(不管是不是positioned元素)的位置则不会受该元素的影响发生位置改变。

fixed

demo见右下角↘, 一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

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

移动设备对fixed支持不好, 解决方案: link

absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

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

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

我是默认没有positioned (static)的father元素, 我的son会跳出, 相对于body元素定位, 见右上角↗

这个元素是绝对定位的。father不是positionded元素, 跳出来直接相对于body定位。

看看另一个position布局的demo: link

float

Float 可用于实现文字环绕图片

float实现文字环绕效果

凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~ 凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~凑字数凑字数~凑字数~ 凑字数

clear 属性被用于控制浮动

先看一个foat例子, 基于这个例子展开说明

好像漂浮起来了(脱离了dom流)

section 元素实际上是在 div 之后的。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？看下面的改进

好像漂浮起来了(脱离了dom流)

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

克服浮动的缺点

有时候元素会溢出到father元素外面

这个图片比包含它的元素还高，而且它是浮动的，于是它就溢出到了容器外面！看下面的解决方案

在father元素上添加 "overflow: auto;", 溢出修复了

flout布局的demo

👉 link

百分比宽度

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

子元素width为50%

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

float和百分比宽度配合布局

当布局很窄时， nav 就会被挤扁。

凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数凑字数--凑字数

媒体查询

响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，媒体查询是做此事所需的最强大的工具。

媒体查询配合百分比宽度布局

让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列

此外, " meta viewport " 元素会和媒体查询配合使用获得移动设备更好的显示效果

当你调整浏览器窗口大小时, 这里的内容会显示成一列(没有margin-left:25%;了)

column-xx属性

实现文字的多列布局