复习布局基础

来源：互联网发布：移动硬盘不能写入 mac 编辑：程序博客网时间：2024/09/21 06:35

首先了解一下w3c标准，它是由万维网制定的，有3种：

HTML和xhtml结构化标准语言

CSS表现标准语言

JavaScript行为标准语言

而w3c倡导的就是结构行为样式分离

而对于表现标准语言CSS我们应该知道CSS规定的3种定位机制（标准文档流浮动绝对定位）

首先是标准文档流，它的特点是：

从上到下从左到右输出文档内容一般由块级元素与行级元素组成（ps 块级元素与行级元素在我的文章里已经介绍过了）块级元素和行级元素都是盒子模型

说到盒子模型，盒子模型是网页布局的基石，它可以承载文字、图片、视频、音频等等。而且它也可以控制盒子间内容与盒子的距离，盒子与盒子之间的距离；在ie中盒子盒子模型等于：盒子总宽度=左右margin+左右border+width 标准盒子模型：盒子总宽度=左右margin+左右border+左右padding+width 其中设置属性值时，三个属性值代表上左右下

两个属性值代表上下左右，一个属性值代表四个方向的属性值相同

设置浮动有三种属性值：左浮动left 右浮动right 不浮动none 元素会左移右移直至触碰到容器壁设置了浮动仍旧处于标准文档流

设置浮动后，紧邻它后面的布局变得会有影响，所以我们一般情况下要清除浮动，清除浮动一般有两种方法：设置clear：both或者设定一定宽度width：100%，然后overflow：hidden；

第三种机制为绝对定位，定位机制有三种静态定位相对定位绝对定位 4个属性值static absolute relative fixed

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

绝对定位absolute 建立了以包含块为基准的定位，完全脱离了标准文档流，随即拥有偏移属性和z-index属性

无偏移量：

无论是否存在已定位的祖先元素，都保持在元素初始位置，脱离文档流，宽度塌陷（随内容变化而变化）

有偏移量：

无定位祖先元素，以<html>文档为参考标准

布局基础知识，一切的基础啊！

有定位祖先元素，以距离最近的为参考标准

0 0