CSS布局第一节课

• margin在做自适应模块时，如果要贴边，用应该在CSS中改变body的默认属性才能做到贴边的效果:

body{margin:0; padding:0;}

• 一列布局
  让模块水平居中，采用

margin:0,auto;

的方法使其水平居中。

• 二列布局
  左右的模块采取

float：left/right

两种形式，并用width和height对其设置长宽。

• 三列布局
  三列布局的左右两个模块不采用浮“浮动”的方式，而换做“定位”，用

position：absolute;top/bottom/left/right:像素;

固定左右模块，而中间模块采用自适应

margin：上px 右px 下px 左px;

• 自动居中
  1、在用margin:0 auto自动居中时，如果同时设置float属性或者绝对定位，则无法自动居中。
  2、自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。

-文字居中
将文字的行高设为div的高度，line-hight:

• 盒子模型
  从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。

• 浮动属性
  1、如果设置了float而没有设置宽度的话，那么这个模块宽度随内容的变化而变化
  2、元素设置成浮动时，此元素会影响紧邻其之后的元素

• 清除浮动
  1、

clear:both

【主要用于邻近后面清除浮动，在父包含块缩成一条时不起作用】
2、

width:100%[或固定长度];overflow:hidden;

• 相对定位
  设置相对偏移之后，拥有z-index【层堆叠】属性，且不脱离标准文档流

• 绝对定位
  1、当一个元素设置成绝对定位但没有设置宽度的时候，宽度按照内容多少适应
  2、脱离标准文档流
  3、建立了以包含块为基准的定位
  4、拥有z-index【层堆叠】属性
  5、没有设置相对偏移时，包含块以html元素为参照进行偏移，而不是body元素