让CSS布局呈现您的个性:学习常见布局方式

让CSS布局呈现您的个性:学习常见布局方式_第1张图片

 

本文介绍常用的css布局:

  • 三栏布局
  • 两列自适应布局
  • 元素居中

盒模型简介:

让CSS布局呈现您的个性:学习常见布局方式_第2张图片

三栏布局

中间列自适应宽度,两边宽度固定

1. 圣杯布局








  

圣杯布局

左侧
右侧

让CSS布局呈现您的个性:学习常见布局方式_第3张图片

双飞翼布局







    
双飞翼布局

让CSS布局呈现您的个性:学习常见布局方式_第4张图片

两列自适应布局

两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式

float+overflow








left

right

Flex布局

垂直居中








left

center

right

居中分散








left

center

right

两边对齐








left

center

right

元素居中

绝对定位







	
center

Flex居中







	
center

让CSS布局呈现您的个性:学习常见布局方式_第5张图片

你可能感兴趣的:(前端开发,css,学习,css3,css布局,页面设置)