一、display
display 是 css 布局中很重要的一个属性,它定义了元素生成的显示框类型,常见的几个属性值有:block
、inline
、inline-block
、inherit
、none
、flex
。inherit 表示这个元素从父元素继承 display 属性值;none 表示这个元素不显示,也不占用空间位置;flex 是 flex 布局重要的属性设置,我们留到后面详细讲解,这边先介绍前面三个属性值。
每个元素都有默认的 display 属性,比如 div 标签的默认 display 属性是 block,我们通常称这类元素为块级元素;span 标签的默认 display 属性是 inline,我们通常称这类元素为行内元素,我们先通过下面的代码示例来看下两者的区别。
没有设置宽度时,它的宽度是其容器的 100%;
可以给块级元素设置宽高、内边距、外边距等盒模型属性;
块级元素可以包含块级元素和行内元素;
常见的块级元素:
<div>
、<h1>
~ <h6>
、<p>
、<ul>
、<ol>
、<dl>
、<table>
、<address>
<form>
等。行内元素不会独占一行,只会占领自身宽高所需要的空间;
给行内元素设置宽高不会起作用,margin 值只对左右起作用,padding 值也只对左右起作用;
行内元素一般不可以包含块级元素,只能包含行内元素和文本;
常见的行内元素
<a>
、<b>
、<label>
、<span>
、<img>
、<em>
、<strong>
、<i>
、<input>
等。内联块级元素:
宽度由内容撑开,只占据自己的位置,可以设置自己的宽度(两个人的孩子?),display:inline-block
二、position
在布局中很重要的因素就是定位,position 属性就是用来定义元素的定位机制。position 的常用属性值有:
relative:相对定位,相对于元素的正常位置进行定位;
absolute:绝对定位,相对于除 static 定位以外的元素进行定位;
fixed:固定定位,相对于浏览器窗口进行定位,网站中的固定 header 和 footer 就是用固定定位来实现的;
static:默认值,没有定位属性,元素正常出现在文档流中;
inherit:继承父元素的 position 属性值。
上文出现了文档流(normal flow)的概念,按理来说应该翻译成普通流,文档流是大多数人的叫法。“流”可以想象成流动的水,当我们打开屏幕,浏览网页,滚动鼠标,网页的内容就像是水流一样滑过。文档流便是指从上到下,从左往右的文档布局。当我们给元素的 positon 属性设置 absolute、fixed 时便会脱离文档流,不再遵循从上到下,从左到右的规律了。