CSS布局大全
前几天面试，问我某布局感觉回答不是很OK所以研究了一下各种布局。
一、单列布局
1.普通布局（头部、内容、底部）
<div class="container">
<header></header>
<div class="content"></div>
<footer></footer>
</div>
.container {
width: 80%;
margin: 30px auto;
border:2px solid red;
box-sizing: border-box;
}
.container header {
width: 100%;
height: 30px;
background: #faa;
}
.container .content {
width: 100%;
height: 300px;
background: #aaf;
}
.container footer {
height: 50px;
background: #afa;
}
2.内容居中（内容区域为80%宽度，采用margin:0 auto;实现水平居中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
width: 80%;
margin: 30px auto;
border:2px solid red;
box-sizing: border-box;
}
.container header {
width: 100%;
height: 30px;
background: #faa;
}
.container .content {
width: 80%;
height: 300px;
margin: 0 auto;
background: #aaf;
}
.container footer {
height: 50px;
background: #afa;
}
</style> </head>
<body>
<div class="container">
<header></header>
<div class="content"></div>
<footer></footer>
</div>
</body>
</html>
二、两栏布局
1.采用float 左边固定大小，右边自适应
左侧采用float:left往左浮动，右侧margin-left:200px,留出左侧内容的空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrapper {
/* width:80%;和margin 是为了方便我截图*/
width: 80%;
margin: 50px auto;
border:2px solid #aaa;
box-sizing: border-box;
/*采用bfc清除浮动*/
overflow: hidden;
}
.nav {
float: left;
width: 200px;
background: #faa;
height: 500px;
}
.content {
margin-left: 200px;
height: 500px;
background-color: #aaf;
}
</style> </head>
<body>
<div class="wrapper">
<div class="nav"></div>
<div class="content"></div>
</div>
</body>
</html>
2.采用display: inline-block; 和 calc() 实现
由于inline-会把空格和回车算进去，所以我们在wrappper中设置font-size:0来清除影响。当然，打包出来的压缩格式可以忽略。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrapper {
/* width:80%;和margin 是为了方便我截图*/
width: 80%;
margin: 50px auto;
border:2px solid red;
box-sizing: border-box;
font-size: 0;
}
.nav {
display: inline-block;
width: 200px;
background: #faa;
height: 500px;
}
.content {
width: calc(100% - 200px);
display: inline-block;
height: 500px;
background-color: #aaf;
}
</style> </head>
<body>
<div class="wrapper">
<div class="nav"></div>
<div class="content"></div>
</div>
</body>
</html>
3.采用flex实现，左侧固定大小，右侧设置flex:1,即可实现自适应
HTML不变，css如下：
.wrapper {
/* width:80%;和margin 是为了方便我截图*/
width: 80%;
margin: 50px auto;
border:2px solid red;
box-sizing: border-box;
/*flex布局*/
display: flex;
}
.nav {
width: 200px;
background: #faa;
height: 500px;
}
.content {
flex:;
height: 500px;
background-color: #aaf;
}
三、三栏布局
1.采用float浮动,左右大小固定，中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrapper {
width: 100%;
margin-bottom: 30px;
border:2px solid red;
box-sizing: border-box;
}
.wrapper .left {
width: 200px;
height: 300px;
background: #faa;
float: left;
}
.wrapper .right {
width: 200px;
height: 300px;
background: #afa;
float: right;
}
.wrapper .content {
height: 300px;
background-color: #aaf;
margin:0 200px;
}
</style> </head>
<body>
<!-- 三栏-浮动布局 -->
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
</body>
</html>
采用inline-block 与两栏布局类似
.wrapper {
width: 100%;
margin-bottom: 30px;
border:2px solid red;
box-sizing: border-box;
font-size:;
}
.wrapper .left {
display: inline-block;
width: 200px;
height: 300px;
background: #faa;
}
.wrapper .right {
display: inline-block;
width: 200px;
height: 500px;
background: #afa;
}
.wrapper .content {
width: calc(100% - 400px);
display: inline-block;
height: 400px;
background-color: #aaf;
}
这里我们给每个容器的高度不同，结果：
我们可以发现他是底部对齐的，只需改变他的对其方式即可。vertical-align: top;
.wrapper .left {
display: inline-block;
width: 200px;
height: 300px;
background: #faa;
vertical-align: top;/*添加*/
}
.wrapper .right {
display: inline-block;
width: 200px;
height: 500px;
background: #afa;
vertical-align: top;
}
.wrapper .content {
width: calc(100% - 400px);
display: inline-block;
height: 400px;
background-color: #aaf;
vertical-align: top;
}
结果:
3.采用flex布局
.wrapper {
width: 100%;
margin-bottom: 30px;
border:2px solid red;
box-sizing: border-box;
display: flex;
}
.wrapper .left {
width: 200px;
height: 300px;
background: #faa;
}
.wrapper .right {
width: 200px;
height: 500px;
background: #afa;
}
.wrapper .content {
flex:;
height: 400px;
background-color: #aaf;
}
接下来就是大名鼎鼎的 圣杯布局 和 双飞翼布局了。
这两个布局非常重要，性能什么的都要比上面好很多，主要是为了让content内容区域优先加载。
1.圣杯布局
<!-- 圣杯布局 -->
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
上面是html，发现了吧，middle写在最前面，这样网页在载入时，就会优先加载。
具体实现思路，通过给 container 左右固定的padding来预留出left和right的空间
看一下css部分：
.container {
position: relative;;
height: 300px;
background: #ddd;
padding: 0 300px 0;
}
.container .middle{
float: left;
width: 100%;
height: 300px;
}
.container .left{
float: left;
position: relative;
height: 300px;
width: 300px;
margin-left: -100%;
left: -300px;
}
.container .right {
float: left;
position: relative;
width: 300px;
height: 300px;
margin-left: -300px;
left: 300px;
}
所以内部元素都是左浮动的，主要区域宽度100%;
左侧区域通过margin-left:100%;使它浮动到左方，然后更具自身定位 left：-300px;将之移动到父容器的padding中
右侧同理，只不过只需要margin自己本身的宽度。
结果：左右固定宽度300px，中间自适应
2.双飞翼布局
双飞翼布局和圣杯差不多，主要是将padding换成了margin而且只需要包裹middle即可，
<div class="container">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
css：
.container{
float: left;
width: 100%;
height: 300px;
background: #ddd;
}
.container .middle{
height: 300px;
margin: 0 300px;
}
.left{
float: left;
position: relative;
width: 300px;
height: 300px;
margin-left: -100%;
}
.right{
float: left;
position: relative;
width: 300px;
height: 300px;
margin-left: -300px;
}
差距不大，看代码就完事了。
最后，我们就可以自嗨了！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin:0;
padding: 0;
}
.wrapper {
width: 100%;
display: flex;
}
.wrapper .left {
width: 200px;
height: 90vh;
background: #faa;
}
.wrapper .left .left-box {
width: 90%;
height: 120px;
margin: 30px auto;
background: #ff4;
}
.wrapper .left .left-box2 {
height: 50%;
}
.wrapper .right {
width: 200px;
height: 90vh;
background: #afa;
}
.wrapper .right .card {
width: 80%;
margin: 20px auto;
background-color: #f42
}
.wrapper .content {
flex: 1;
min-height: 90vh;
background: #aaf;
column-count: 3;
column-gap: 10px;
}
.wrapper .card {
width: 100%;
height: 100px;
background: #c44;
font-size: 18px;
text-align: center;
line-height: 100px;
margin:5px 0;
break-inside: avoid;
}
header,footer {
height: 5vh;
background: #424242;
}
h2 {
text-align: center;
color: #f8f8f8;
} @media screen and (max-width: 800px) {
.wrapper .content {
column-count: 2;
}
}
</style> </head>
<body>
<!-- 头部 -->
<header><h2>头部</h2></header>
<div class="wrapper">
<div class="left">
<div class="left-box"></div>
<div class="left-box left-box2"></div>
</div>
<div class="content">
<div class="card" style="height: 100px">1</div>
<div class="card" style="height: 200px">2</div>
<div class="card" style="height: 150px">3</div>
<div class="card" style="height: 210px">4</div>
<div class="card" style="height: 120px">5</div>
<div class="card" style="height: 180px">6</div>
<div class="card" style="height: 160px">7</div>
<div class="card" style="height: 136px">8</div>
<div class="card" style="height: 120px">9</div>
</div>
<div class="right">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<footer><h2>底部</h2></footer>
</body>
</html>
CSS布局大全的更多相关文章
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- Html 之div+css布局之css基础
Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...
- CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera
CSS Hack大全-教你如何区分出IE6-IE10.FireFox.Chrome.Opera 转载自:http://www.jb51.net/article/50116.htm 现在的浏览器IE6- ...
- HTML CSS 属性大全
CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...
- CSS布局秘籍(2)-6脉神剑
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
随机推荐
- hihoCoder#1114 小Hi小Ho的惊天大作战：扫雷·一
原题地址 回溯+搜索 枚举每个位置上能否放地雷,当第i个位置枚举完成后,第i-1个位置的情况就确定了,此时,检查第i-1个位置是否满足要求,即左右间隔为1的范围内地雷数是否等于申明数字,如果满足条件, ...
- org.osgi.framework.BundleException: Exception in org.eclipse.core.resources.ResourcesPlugin.start()
http://freestyle21.cn 不知什么时候,启动eclipse的时候就一直不行,说是an error ..我查了下log 报错:org.osgi.framework.BundleExce ...
- 杜教筛--51nod1239 欧拉函数之和
求$\sum_{i=1}^{n}\varphi (i)$,$n\leqslant 1e10$. 这里先把杜教筛的一般套路贴一下: 要求$S(n)=\sum_{i=1}^{n}f(i)$,而现在有一数论 ...
- AtCoder Grand Contest 020 D - Min Max Repetition
q<=1000个询问,每次问a,b,c,d:f(a,b)表示含a个A,b个B的字符串中,连续A或连续B最小的串中,字典序最小的一个串,输出这个串的c到d位.a,b<=5e8,d-c+1&l ...
- msp430入门学习11
msp430的定时器--看门狗 msp430入门学习
- Linux下汇编语言学习笔记40 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- mybatis返回list很智能很简答的，只需要配置resultmap进行类型转换，你dao方法直接写返回值list<对应的object>就行了啊
mybatis返回list很智能很简答的,只需要配置resultmap进行类型转换,你dao方法直接写返回值list<对应的object>就行了啊 dao方法 public List< ...
- java监控工具jconsole
jconsole可以监控本地和远程进程 jvisualvm
- hdu oj 1285 确定比赛名次
hdu oj 1285 确定比赛名次 题目: 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- 阿里云CentOS7.3搭建多用户私有git服务器(从安装git开始)
起因 自己会有练手的不敢公开的项目,就自己搭建个服务器放自己的渣代码了. 在经历了连不上服务器.没有访问权限.没法提交以后,我打通了任督二脉. 我这个git服务器适合条件:1.就那么几个人小项目,不是 ...