css布局技巧，css常见布局汇总

要点速看

网页开发基本思路：确定版心--》分析行模块--》分析列模块；
如果一行当中有多个模块，一定要放在同一个父模块中；
列模块首先可以先给宽高背景颜色，实例化盒子；
常见布局：两栏/三栏/等高/粘带推荐flex。

1.css属性书写顺序

1.布局定位属性: display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式)

2.自身属性: 盒子模型相关 width/height/margin/padding/border/background

3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word

4.其他属性(CSS3):content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

2.页面整体布局思路

1.必须确定页面的版心(可视区),我们测量可知

2.分析页面中的行模块,以及每个行模块中的列模块,其实页面布局就是一行行罗列而成。

口诀：

多个块元素纵向排列找标准流，多个块级元素横向排列找flex，多个元素层叠叠放找定位。

3.制作html结构,我们还是遵循,先有结构后有样式的原则,结构永远最重要

4.然后开始运用盒子模型的原理,通过div+css布局来控制网页的各个模块

3.常见布局

此文中只介绍flex布局，感兴趣其他布局方式，可以看原文 (点击左下角“阅读原文”)

3.1单列布局

3.1.1普通布局

头部、内容、底部

css布局技巧，css常见布局汇总

<head><meta charset="utf-8"><title>单列布局-普通布局</title><style> .header{ margin:0 auto; max-width: 960px; height:100px; background-color:pink; } .container{ margin: 0 auto; max-width: 960px; height: 500px; background-color: aquamarine; } .footer{ margin: 0 auto; max-width: 960px; height: 100px; background-color:skyblue; }</style></head><body> <div class="header"></div> <div class="content"></div> <div class="footer"></div></body>复制代码

3.1.2内容居中

内容区域（版心）为960px，采用margin:0 auto实现水平居中

css布局技巧，css常见布局汇总

<head><meta charset="utf-8"><title>普通布局-内容居中</title><style> .header{ margin:0 auto; height:100px; background-color:pink; } .content{ margin: 0 auto; height: 500px; width:960px; background-color: aquamarine; } .footer{ margin: 0 auto; height: 100px; background-color: skyblue; }</style></head><body> <div class="header"></div> <div class="center"> <div class="content"></div> </div> <div class="footer"></div></body>复制代码

3.2两栏布局

所谓两栏布局是指：左侧定宽，右侧自适应。

flex实现

实现思路：
父元素开启弹性空间，左盒子设置固定宽度，右盒子flex：1

本文地址：IT问答频道 https://www.hkm168.com/itwenda/937947.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！