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

原创
2015/10/31 01:05
阅读数 510

来源:imooc教学视频

一、W3C标准

W3C标准是由万维网联盟制定一系列标准,其中包括:

  1. 结构化标准语言(HTML和XML)

  2. 表现标准语言(CSS)

  3. 行为标准语言(DOM和ECMAScript)

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

二、 CSS中的定位机制

1. 标准文档流(Normal flow)

1.1 特点

  • 从上到下,从左到右,输出文档内容

  • 由块级元素和行级元素组成

1.2 块级元素

  • 从左到右撑满页面,独占一行

  • 触碰到页面边缘时,会自动换行

如: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个属性值:

  1. static(静态定位)

  2. relative(相对定位)

  3. absolute(绝对定位)

  4. 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定位

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


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部