CSS布局模型详细介绍


HTML中元素有三种布局模型:流动模型、浮动模型、层模型。

流动模型(flow)

HTML网页默认布局就是流动模型,布局如下:

块级元素(block)自上而下垂直分布,因为块级元素默认宽度为浏览器窗口的100%,或者理解为每个块级元素默认占一行。常见块级元素有 div, p, h 等;

**内联元素(inline)**从左到右水平分布,即不像块级元素那样每个独占一行。常见内联元素有 a, span, em 等。

浮动模型(float)

上面提到的块级元素是每个独占一行显示,但是定义css浮动模型后就能使两个块级元素并排一行显示。
例如HTML代码:

<div id = "div1">
	<p>Hello</p>
</div>
<div id = "div2">
	<p>World !</p>
</div>

显示结果是这样:

Hello
World !

但是设置浮动css后:

div {
float: left;
}

效果就是这样:

HelloWorld !

也可以设置元素一左一右显示:

#div1 {
float: left;
}

#div2 {
float: right;
}

层模型(layer)(position)

类似于PS中的图层编辑,HTML中也存在层模型布局,对元素进行定位
层模型有三种:绝对定位(absolute)、相对定位(relative)、固定定位(fixed)。

绝对定位

理解就是字面上的意思,简言之就是相对于上级设置了 position 属性的元素进行定位,如果没有这类上级就是相对于 body 标签,也是浏览器窗口。需要设置css:position: absolute;,然后就可以使用 top, right, bottom, left 这类属性进行定位。例如:

div {
position: absolute;
top: 100px;
left: 150px;
}

这样就使板块向下移动100像素,向右移动150像素。

相对定位

这里的相对较难理解,与数理中的“相对”不太一样,这里是**“相对于自己原来应在的位置”,需要设置css:position: relative;,重要的是不用关心上级是否设置了position属性**,这样就很方便。例如:

div {
position: relative;
top: 100px;
right: 100px;
}

板块就相对于自己没设置样式前的位置,同时向左向下移动100px。

固定定位

这个就好理解了,所谓固定就是指固定于整个浏览器网页窗口不动,即使滚动网页内容也不改变位置,需要设置css:position: fixed,也可以设置 top, right等调整固定的位置。还记得浏览器某些网页右下角的小广告吗,是不是固定在那怎么浏览网页都不动 -_- .


文章作者: hn-failte
文章链接: https://failte.cn
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hn-failte !
评论
 上一篇
Linux基本命令 Linux基本命令
Linux基本命令 Linux的命令很多,对想学习的朋友来说,无疑很头痛,那么先从这些常用的开始吧 列出文件     ls    显示非隐藏文件  &
2018-06-23
下一篇 
CSS样式之内容居中方法 CSS样式之内容居中方法
水平居中 HTML中要实现某一内容水平居中显示,要通过设置css样式来实现,主要分为行内元素和块状元素两种情况,块状元素又可分为块状定宽与块状不定宽两种情况,接下来依次介绍分析。 行内元素 像 a、span、i 这类元素叫做行内元素,文本和
2018-05-14
  目录