网页布局基础

W3C标准

• 结构化标准语言
  HTML/XML
• 表现标准语言
  CSS
• 行为标准语言
  DOM/JavaScript

盒子模型

盒子模型

盒子3D模型

盒子模型尺寸

布局类型

CSS定位规则

• 标准文档流(normal flow)
  块级元素/行级元素
• 浮动
• 绝对定位

布局

• 自动居中布局

{
width: ***;
margin:auto;
}

• 浮动布局
   块级元素横向布局
   float：
    1.元素会左移或右移，直到触碰到容器。
    2.设置了浮动的元素，仍旧处于标准文档流。
    3.元素设置了浮动而没有设置宽度时，元素的宽度会随着内容的变化而变化。
    4.元素设置浮动后会对紧随其后的元素造成影响，也会对父包含块造成影响。
   清除float：
    1.clear:both/clear:left/clear:right(紧邻其后的元素)
    2.width:100%(或固定宽度) + overflow:hidden

• 绝对定位布局
   1.静态定位
   2.相对定位
    特点：1.相对于自身原有位置进行偏移 2.仍处于标准文档流中 3.随即拥有偏移属性和z-index属性
   3.绝对定位
    特定：1.建立以包含块为基准的定位 2.完全脱离了标准文档流 3.随即拥有偏移属性和z-index属性
    未设置偏移量时：1.无论是否存在已定位祖先元素，都保持在元素初始位置 2.脱离标准文档流 3.元素宽度未设定时，宽度随内容变化
    设置偏移量时：
     偏移基准：1.无已定位祖先元素，以为偏移参照 2.有已定位祖先元素时，以距其最近的已定位祖先元素为偏移参照基准
   position属性:
    static/relative/absolute/fixed