1.W3C标准：由万维网联盟制定的一系列标准，包括：结构化标准语言（HTML和XML），表现标准语言（CSS）行为标准语言（DOM和ECMAScript）
倡导结构，样式，行为分离。
2.CSS中的3种定位机制：标准文档流（Normal flow）,浮动（Floats），绝对定位（Absolute positioning）
3.标准文档流（Normal flow）
特点：从上到下，从左到右，输出文档内容。由块级元素和行级元素组成。
块级元素：div ，ul , li ，dl，dt ，p....
行级元素：span，strong，b，i，cite，img，input，em....(特点：不会改变HTML文档结构。)
块级元素和行级元素都是盒子模型。
4.盒子模型=网页布局的基石
有4部分：边框（border） 外边距（margin）内边距（padding）盒子中的内容（content）
盒子3D模型：由上到下：border content+padding background-image background-color
盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
5.auto会根据浏览器的宽度自动的设置两边的外边距
原理：（浏览器的宽度-外包含层的宽度）/2=外边距
6.如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动为绝对定位属性。
7.浮动布局：实现横向多列布局。
设置了float属性的特点是：元素会左移，或右移，直至触碰到容器为止。
设置了浮动的元素，仍旧处于标准文档流中。
当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。
8.清除浮动的常用方法：
clear属性一常用clear：both； clear：left 或者clear：right;
同时设置width：100px(或固定宽度)+overflow：hidden;
9.横向两列布局
float属性---使纵向排列的块级元素，横向排列
margin属性---设置两列之间的间距
当父包含块缩成一条时，用clear：both方法清除浮动无效，他一般用于紧邻后面的元素的清除浮动。
10.position属性：拥有三种定位形式：1.静态定位 2.相对定位 3.绝对定位
可设置4个属性值
static（静态定位）
relative(相对定位)
absolute（绝对定位）
fixed(固定定位)
固定定位和绝对定位属性都属于绝对定位形式。
11.相对定位：
特点：
相对为自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
12.绝对定位：
特定：
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
未设置偏移量
特点：
无论是否存在已定位祖先元素，都保持在元素初始位置
脱离了标准文档流
设置偏移量：
偏移量参照基准：
无已定位祖先元素，以<html>为偏移参照基准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
13.横向两列布局
使用absolute实现横向两列布局
一常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能
relative---父元素相对定位
absolute---自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列
扫一扫
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
