CSS学习（5） - 布局

type

status

date

slug

summary

CSS布局

display属性

display 属性是CSS布局的最重要的属性。

display属性规定是否/如何显示元素。

display元素通常与 javascript 一起使用，用于显示或者隐藏元素。

默认情况下, javascript: none

修改默认的display值：

inline： 行内元素形式

block： 块级元素形式

none：隐藏属性并且不占用任何空间（visibility:hidden 也可以隐藏元素，但仍会影响布局）

inline-block：跟inline相比它允许对元素设置高度和宽度；跟block相比，它不会在元素之后添加换行符

案例：HTML+CSS+Javascript 实现对display的控制：

使用inline-block制作水平导航栏

CSS代码如下：主要就是在.nav li里设置了display: inline-block

因此 inline-block 可以用于水平而不是垂直的显示列表项

width和max-width

块级元素始终占用可用的全部宽度

设置 width 以防止其扩展到容器边缘，然后将 margin 设置为auto可以使其水平居中，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配。

使用 max-width 使得适应小窗口的处理，可以使得在小窗口的情况下可以自动收缩，否则会产生一个滑动条。

position 属性

position应用于元素的定位方法。

有五个不同的位置值：

static

relative

fixed

absolute

sticky

static

设置了此属性后，我们如果再指定其四个方位的边距，left，right top bottom等，则将不会有任何改变，相当于static就已经固定了位置。

relative

设置了此属性后，设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

fixed

设置了此属性后，则会按照四个方位的属性值进行位置的固定。即如果我们滑动了窗口，这个元素也是固定在此位置的。

absolute

设置了此属性后，将会设置为相对于其最近的父窗口进行定位。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

sticky

根据用户的滚动位置进行定位，相当于在 excel 中固定单元格

首先是 相对relative，然后当窗口滑动超过时，切换为 固定fixed定位。

注意：

Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀，您还必须至少指定 top，right，bottom，left 之一，以便粘性定位起作用。

如果设置位置的时候元素出现重叠，则可以指定z-index 表示元素的覆盖顺序，数字越大的越靠前。

溢出

overflow 用于处理内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

visible：可见的，如果超过了元素框，则文本内容接着显示

hidden：隐藏内容，切断多余的内容

scroll：切断，但是有一个滑动条

auto：相当于scroll，但是它仅在必要时添加滚动条：

overflow-x 和 overflow-y 控制水平还是垂直更改内容的溢出。

浮动和清除

float

控制元素如何浮动。

left：元素浮动到容器左侧

right：元素浮动到容器右侧

none：元素不会浮动

inherit

最简单的总结：float可以实现报纸上文字包围图片的效果。

测试：

clear

可以指定元素浮动于被清除元素的旁边以及哪一侧

none：两侧都可以有浮动

left，right：左侧或者右侧不允许浮动

both：左右侧都不允许

inherit

在使用此属性的时候，要与 float 一起使用。

如果一个元素浮动到了左侧，则应该清除左侧，这样浮动的元素会继续浮动，而清除的元素会显示在下面。

效果展示：

不存在清除：

存在清除：

clearfix 清除浮动！这是一段很有用的代码！

水平和垂直对齐

块元素居中

要使得 块元素 居中，则设置 margin: auto 即可。

还需要设置 width 属性的值，因为如果不设置，则默认的宽度为整个屏幕，不会体现出居中对齐的效果。

居中对齐文本

text-align 可以使得块中的文本在块中处于居中

居中图片

margin-left 和 margin-right 设置为auto即可。并且需要使其成为第一个块元素。

over

其他方法控制对齐

position 属性 + 方位可以设置对齐，具体做法如下：

使用float + 方位也可以控制对齐

如果元素的高度高于包含它的容器的高度，则会超过这个容器，使用 overflow 即可解决这个问题，设置: overflow: auto

使用padding等元素也可以设置对齐。

justify-content 和 align-items 也可以控制对齐。

另外还需要设置 display: flex

布局案例

一个较简单的Web网页的实现：

实现如下：