这篇文章将为大家详细讲解有关css的布局方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
css布局方式:1、单列布局,包括header、content、footer等宽的单列布局和header、footer占满屏幕宽度,content略窄的单列布局;2、两列自适应布局;3、三栏布局,包括圣杯布局、双飞翼布局。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
一、单列布局
常见的单列布局有两种:
header、content、footer等宽的单列布局
实现:
对header、content、footer都用width或者max-width设置同样的宽度(当屏幕小于设置的宽度时,前者会出现滚动条,后者显示的是屏幕的实际宽度),然后再用margin:0 auto;实现水平居中。
html部分:
css部分:
header、footer占满屏幕宽度,content略窄的单列布局
实现:
对header、footer不设置宽度,块级元素会占满屏幕宽度,对content用width或者max-width设置同样的宽度(区别同上),然后再用margin:0 auto;实现水平居中。
html部分同上
css部分:
二、两列自适应布局
两列自适应布局是指一列由内容宽度撑开,剩余的一列由撑满屏幕剩余宽度的布局方式。
使用float+overflow:hidden实现
自适应的两列布局主要是通过overflow:hidden触发BFC(格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。)来实现,BFC其中一个特性就是不重叠浮动元素。
html部分:
css部分:
使用flex布局实现
flex布局也叫弹性盒子布局,可以很方便的实现布局方式,缺点是不兼容IE10以下的。
html部分同上。
css部分:
flex是flex-grow(定义项目的方法比例)、flex-shrink(定义项目的缩写比例)、flex-basis(定义了在分配多余空间前,项目占据的主轴空间)的缩写,flex:1相当于flex-grow:1;flex-shrink:1;flex-basis:0;
使用grid布局实现
grid布局,是一个基于网格的二维布局系统,用来优化用户界面设计。
html部分同上。
css部分:
三、三栏布局
三栏布局是指两侧栏目固定宽度,中间栏目自适应宽度。本文主要介绍圣杯布局和双飞翼布局。
圣杯布局
特点:dom结构必须先写中间列部分,这样中间列可以优先加载。
html部分:
css实现步骤:
1、将三个列部分都设置为左浮动,将中间列的宽度设置为100%,这样可以实现中间自适应,这时候,left和right会被挤到下一行。
2、将left与right都设置margin-left的值为负值,这样可以使left与right回到与center同一行。
3、设置父元素container的padding-left与padding-right,为left列部分和right列部分腾出空间。