css布局

单栏布局

  • 一栏
    注意:

width //无论什么时候 宽度都是设的值的大小 页面被缩放小于宽度时,会出现滚动条
max-width //最大宽度 如果页面宽度比设的值小 则会自动变小 不会有滚动条出现

实现效果

  • 通栏(头尾随页面大小一样)
    为了头尾在拉大的时候显示不完全,给body加个min-width ,值等于内容的宽度
    实现效果

两栏, 三栏

多个元素居中显示

.parent{
    text-algin: center;
    ver-algin: top; //高度不同,顶部对齐
}
.child{
    display: inline-block;
}
或者
.parent{
    margin: 0 auto;
}
  • 双列布局
    一列固定宽度,另一列自适应宽度
    固定宽度的左浮float:left, 自适应宽度的margin-left:固定宽度的元素的宽度+间隙
    父容器记得清浮动
    实现效果
  • 三列布局
    两侧两列固定宽度,中间列自适应宽度
    方法:两侧分别左浮,右浮,中间加左右margin。父容器记得清浮动
    注意渲染顺序,先左右两列元素,最后中间自适应元素
    实现效果
  • 水平等距排列(九宫格)
    用ul,li元素比较有语义
    方法:li元素左浮,margin左或右设置间隔,父容器相对于的margin方向设负值,值的大小为li元素的间隔
    实现效果
    展示

圣杯布局(缺点:中间元素宽度不能小于最小侧边元素的宽度)

同三栏布局效果,中间自适应宽度的元素在最前面渲染
方法:
父容器加左右padding 值分别是左右侧元素的宽度 + 间隙
三个元素都左浮,左侧元素负margin 100%,加position:relative,left 负值 本身宽度
右侧元素负margin 自身宽度,加position:relative,right 负值 本身宽度
中间自适应宽度元素宽度100%(相对于父元素)

实现效果

双飞翼布局(解决圣杯布局错乱缺点)

方法:大体和圣杯类似,但是中间自适应元素再加一层父容器,float:left和width: 100%加在父容器上, 内容(高度,背景色等)加在自身
实现效果

你可能感兴趣的:(css布局)