W3C标准:
由万维网联盟制定的一系列标准,包括:
结构化标准语言(HTML和XML)
表现标准语言(CSS)
行为标准语言(DOM和ECMAScript)
倡导结构、样式、行为分离。
CSS 规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。
标准文档流
特点:从上到下,从左到右,输出文档内容,由块级元素和行级元素组成
块级元素:从左到右撑满页面,独占一行,碰到页面边缘时会自动换行
常见的块级元素:div ul li dl dt p...
行级元素:能在同一行内显示,不会改变HTML文档结构
常见的行级标签:span strong img input...
块级元素和行级元素,二者都是盒子模型
盒子模型
盒子模型=网页布局的基石,由四部分组成:
边框(border)
外边距(margin)
内边距(padding)
盒子中的内容(content)
盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
当你想让页面自动居中并使用margin:0 auto时,就不能使用浮动或者绝对定位属性了,不然margin设置的自动居中会失效。
float属性
有3个属性值:left、right、none
特点:元素会左移,或右移,直到碰触到容器为止
设置了浮动的元素,仍旧处于标准文档流中
清除浮动的方法:
clear属性--常用clear:both
clear:left;clear:right
同时设置width:100%(或固定宽度)+overflow:hidden;
横向两列布局
网页布局最常见的方式之一
主要应用技能:float属性--使纵向排列的块级元素,横向排列
margin属性--设置两列之间的间距
如果使用了浮动,使当前层的父层看不到且后面的层受到影响,可以对父层使用overflow:hidden或者后面的层使用clear:both来清除浮动。
绝对定位布局
通过设置position属性实现,是CSS中规定的第三种定位机制,能够实现横向多列布局及较为复杂的定位,如带有遮罩层效果的提示框、固定层效果、全屏广告等。
position属性拥有3种定位形式:1 静态定位(static)2 相对定位(relative)3 绝对定位(absolute、fixed)
相对定位
特点:相对于自身原有位置进行偏移,仍处于标准文档流中,随即拥有偏移属性和z-index属性
绝对定位
特点:建立了以包含块为基准的定位,完全脱离的标准文档流,随即拥有偏移属性和z-index属性
未设置偏移量特点:无论是否存在已定位祖先元素,都保持在元素初始位置,且脱离了标准文档流
设置偏移量:偏移参照基准:无已定位祖先元素,以<html>未偏移参照基准,已有定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准
横向两列布局
使用absolute实现横向两列布局--常用于一列固定宽度,另一列宽度自适应的情况
主要应用技能:relative--父元素相对定位 absolute--自适应宽度元素绝对定位
注意:固定宽度列的高度>自适应宽度列的高度