网页布局基础——文档流、盒子模型、浮动、定位

时间 2019-11-09

标签网页布局基础文档盒子模型浮动定位栏目 HTML 繁體版

原文原文链接

来源：imooc教学视频html

1、W3C标准

W3C标准是由万维网联盟制定的一系列标准，其中包括：
浏览器

结构化标准语言（HTML和XML）布局
表现标准语言（CSS）spa
行为标准语言（DOM和ECMAScript）code

倡导结构、样式、行为分离orm

2、 CSS中的定位机制

1. 标准文档流（Normal flow）

1.1 特色

从上到下，从左到右，输出文档内容视频
由块级元素和行级元素组成htm

1.2 块级元素
ip

从左到右撑满页面，独占一行文档
触碰到页面边缘时，会自动换行

如：div、ul、li、dd、dt...

1.3 行级元素

如：span、strong、input、img...

1.4 块级元素和行级元素都是盒子模型

1.5 盒子模型

四种属性：

边框（border）
内边距（padding）
外边距（margin）
盒子内容（content）

1.6 CSS样式的三种形式

外部样式
内部样式
行内样式

优先级：就近原则，离的越近，优先级越高

1.7 盒子3D模型

共分五层，由上到下分别为：

border
content+padding
background-image
background-color
margin

1.8 盒子模型尺寸

盒子模型尺寸=边框+盒子中的内容尺寸+内边距+外边距

1.9 自动居中布局

自动居中一列布局须要设置 margin 左右值设置为 auto，并且必定要设置width为一个定值。
要设置子元素宽度以父元素宽度为准自适应，需设置子元素宽度值为100%。
若是想让页面自动居中，当设置了margin值为auto的时候，不能再设置浮动属性或绝对定位属性。

（Dreamweaver快捷键：文本缩进【Ctrl】+【Alt】+【]】，取消文本缩进【Ctrl】+【Alt】+【[】百度经验：Dreamweaver快捷键）

2.浮动（Floats）

可以实现横向多列布局

经过设置float属性实现

2.1 三个属性值

left（左浮动）
right（右浮动）
none（不浮动）

2.2 特色

元素会左移、或者右移，直到触碰到容器为止。
设置了浮动的元素，仍旧处于标准文档流中，会占用其空间。
当元素没有设置宽度值，而设置了浮动属性，元素的宽度会随内容的变化而变化。
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。

2.3 清除浮动的经常使用方法

clear属性：

clear:both（经常使用）、clear:left、clear:right

同时设置

width:100%（或固定宽度）+ overflow:hidden

<br /> 空标签（没有意义的标签，不建议使用，会影响文档结构）

2.4 横向两列布局

主要应用技能：float属性——使纵向排列的块级元素，横向排列，margin属性——设置两列元素之间的间距。

div的高度通常不要设置

设置了float属性的元素，要对其父元素或者说父容器添加overflow:hidden属性，以解决浮动对父元素的影响。

3.绝对定位（Absolute positioning）

经过设置position属性实现
CSS中规定的第三种定位机制
可以实现横向多列布局和较为复杂的定位

好比：

带有遮罩层效果的提示框
固定层效果
全屏广告

3.1 position属性

三种定位形式：1.静态定位、2.相对定位、3.绝对定位

可设置4个属性值：

static（静态定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）

3.2 相对定位

3.2.1 特色

相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性

偏移后占据标准文档流的位置，而且产生z-index属性遮盖其余元素

3.3 绝对定位

3.2.1 特色

创建了以包含块为基准的定位
彻底脱离了标准文档流
随即拥有偏移属性和z-index属性

3.2.2 未设置偏移量

特色：

不管是否存在已定位祖先元素，都保持在元素初始位置（父元素的左侧）
脱离文档标准流

当一个元素设置绝对定位，没有设置宽度时，元素宽度根据内容进行调节

3.3.3 设置偏移量

偏移参照基准：

1. 无已定位祖先元素——以<html>为偏移参照基准

2. 有已定位祖先元素——以距离其最近的已定位祖先元素为偏移参照基准

3.4 使用绝对定位实现横向两列布局

使用absolute实现横向两列布局，经常使用语一列固定宽度，一列宽度自适应的状况

主要应用技能：

relative——父元素相对定位

absolute——自适应宽度元素绝对定位

固定宽度列的高度必定要 > 自适应宽度的列

3.5 fixed定位

设置偏移量，不管有无已定位祖先元素，均以浏览器窗口为标准进行偏移。