CSS布局中必须了解的属性

CSS 布局主要有两种方式：

1. 传统布局方式：基于盒模型，依赖 display、position、float 属性。
2. 现代布局方式：Flex 布局和 Grid 布局。

本文主要讲解传统的布局方式，直接分析经常使用的属性。

但愿你已经掌握 CSS 基础知识，也了解文档流、盒模型这些核心概念。

直接开始吧！

1. box-sizing 属性

box-sizing属性规定了盒模型宽高的计算方式。

content-box

默认值，即标准盒模型，元素的 width/height 值等于内容的宽高。

border-box

表示 IE 盒模型，元素的 width/height 值等于内容的宽高+boder+padding。

box-sizing是比较新的属性，须要添加-webkit- 和 -moz- 前缀。支持IE8+。

* {
  -webkit-box-sizing: border-box;     
  -moz-box-sizing: border-box;         
  box-sizing: border-box; 
}
复制代码

2. display 属性

display属性有两个做用：①定义元素的类型。②控制其子元素的的布局。

display 属性是 CSS 布局中的核心，对于不一样元素，它的默认值有时是不同。

none

display: none表示在不删除元素的状况下，隐藏元素，而且不会占据原来的空间。

和visibility: hidden不同，它占据原来的空间。

一些特殊元素，默认的 display 值是它，例如<script></script> 。

block

表示块级元素，好比<div></div>。

inline

表示行内元素，好比<span></span>。

inline-block

表示行内块级元素，元素兼具 block 和 inline 的特色。

flex

表示采用 Flex 布局的元素。

Flex 是 Flexible Box 的缩写，意为「弹性布局」，任何一个元素均可以指定为 Flex 布局。

Flex 布局的相关属性能够分红两拨，一波做用在父元素（Flex 容器），一波做用在子元素（Flex 子项）。

父元素	子元素
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

了解更多 Flex 布局，点击连接。

grid

表示采用 Grid 网格布局的元素。

网格布局和 Flex 布局有必定类似，但也存在重大区别。

了解更多网格布局，点击连接。

另外 display 属性的取值，远不止这些，这里总结经常使用的取值。

3. position 属性

position属性规定元素的定位方式。

元素设置了position 属性，经常和 top/right/bottom/left 属性一块儿使用。

static

默认值，表示元素天然放在文档流中，没有特殊的地方。

具体表现为 top/right/bottom/left 属性对元素无效。

相反的，当position属性值不是static时，那么就称元素为 positioned 元素，也能够理解为元素被 positioned。

除了static，positon属性值还有如下几种：

relative

表示相对定位元素。

经过设置 top/right/bottom/left 属性，元素会偏离原来的位置，但不会影响到其余元素。

经过一个简单的例子，你就明白了。

图中三个 div 色块本来正常摆放，如今对绿色 div 添加如下属性。

.div2 {
  position: relative;
  top: 20px;
  left: 20px;
}
复制代码

能够发现，绿色 div 偏离了原来的位置，而它周围的元素没有变化。

absolute & fixed

absolute 和 fixed 放在一块儿理解，都表示绝对定位元素。

绝对定位元素会脱离文档流，原来的位置会空出来，给其余元素。

其中，fixed相对浏览器窗口固定，无论页面怎么滑动，位置都不会变。

请看下面的例子。

绿色色块添加了如下属性。

.green {
  position: fixed;
  top: 20px;
  left: 20px;
}
复制代码

须要注意，移动端对 fixed 的支持不好，请尽可能避免。这里有相应的案例。

absolute稍稍棘手一些，它相对于最近的 positioned 父元素固定，也就是说，会随页面滚动。

若是没有找到 positioned 父元素，就相对于 body 元素。

请看下面的例子。

父元素下有两个子元素，本来规规矩矩排列着。

如今咱们将父元素设置成 positioned 元素，就 relative 吧！

而后给绿色的子元素添加如下属性。

.green {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
复制代码

能够看到，绿色出轨了，它相对于父元素右边和底部的距离是 20px。

同时，原来的位置被红色元素占领了。

sticky

sticky 表示「粘性」，是 relative和 fixed 的结合。

最初，元素表现为 relative，相对于原来的位置进行偏移；滚动出屏幕后，由表现为 fixed 定位，相对于浏览器定位。

不过，IE 浏览器不支持，并且 Chrome 曾经也放弃过。

4. float 属性

表示浮动属性，设计初衷是为了实现文字环绕。

可能你以前据说，float 属性会使元素脱离文档流。

但我不建议你这么理解，这是为了和前面的 absolute 或 fixed 做区分。

由于，在文字环绕图片的例子中，虽然图片设置了左浮动，但文字仍是绕着图片走，说明浮动元素还以某种方式影响着原来的布局。

left & right

left 和 right 相似，下面就以 left 为例。

请看下面的例子。

图中父元素高度自适应，三个子元素把父元素给撑开了。

如今，给三个子元素添加float: left属性后，父元素的高度消失了。

这也是浮动元素带来的一个影响，会使父元素高度塌陷。

这个很好理解，子元素都浮起来了，没有东西把父元素撑开，天然就瘪了。

那么，怎么把父元素的高度变回来呢？

常见的作法有两种：

1. 给父元素添加overflow: hidden属性。
2. 使用clear: both属性。

clear 属性，即清除浮动。通常使用clear:both。

由于clear:left与clear:right均可以用clear:both实现。

上面的例子中，能够在子元素后面添加一个 div 元素，属性设置为style="clear: both"。

clear 属性还有一些重要的点，你可经过连接了解；本文主要讲 CSS 布局，就不展开讨论。

none

默认值，表示不浮动。

5. 其余

margin 属性

当块级元素设置了margin: 0 auto，该元素就实现水平方向居中。这种方式的兼容性是极好的。

不过，你须要为元素设置宽度，防止它撑满整个容器。

左右外边距为auto，迫使元素将剩余的宽度一分为二成为左右外边距。

须要注意，当浏览器窗口比元素的宽度还要窄时，浏览器会出现一个水平滚动条。

此时，能够用 max-width 替代 width。表示，元素宽度最大能够这么多了，但若是父元素不够的话，小点也不要紧。

inline-block VS float

当咱们要实现这样的水平列表时，有两种方式能够实现：

1. display: inline-blick
2. float: left

先说结论，尽可能使用inline-block，缘由以下。

• float 有高度塌陷的问题，须要清除浮动。
• 当列表元素的有不一样高度时，float 会出现几个元素挤在同一行，致使混乱。

使用 inline-block有一下注意事项。

• 同一行的 inline-block 元素，底部对齐，能够添加vertical-align: top来改变。

• 须要对 IE6/7 作兼容处理：zoom: 1。

5. 总结

最后，总结一下 CSS 布局相关概念。

概念	属性
盒模型	box-sizing: border-box
浮动	flood: left | right
相对定位	position: relative
绝对定位	position: absolute | fixed
Flex 布局	display: flex
网格布局	display: grid

• 此外还有display: table-cell，应用场景很少，就不展开了。

---

参考连接：

学习CSS布局

准确理解CSS clear:left/right的含义及实际用途

CSS布局--float篇

使用float形成容器高度塌陷的原理与解决方法