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 又分为 ...
随机推荐
- [luoguP1045] 麦森数（快速幂 + 高精度）
传送门 这道题纯粹是考数学.编程复杂度不大(别看我写了一百多行其实有些是可以不必写的). 计算位数不必用高精时刻存,不然可想而知时间复杂度之大.首先大家要知道一个数学公式 logn(a*b)=logn ...
- TCP/IP学习笔记（4）------ICMP，ping，traceroute
IMCP协议介绍 当传送IP数据包发生错误--比如主机不可达,路由不可达等等,ICMP协议将会把错误信息封包,然后传送回给主机.给主机一个处理错误的机会,这 也就是为什么说建立在IP层以上的协议是可能 ...
- [bzoj1207][HNOI2004]打鼹鼠_动态规划
打鼹鼠 bzoj-1207 HNOI-2004 题目大意:题目链接. 注释:略. 想法: $dp_i$表示打到了第$i$个鼹鼠时最多打了多少个鼹鼠. $O(n)$转移即可. 总时间复杂度$O(n^2) ...
- [bzoj4712]洪水_动态dp
洪水 bzoj-4712 题目大意:给定一棵$n$个节点的有根树.每次询问以一棵节点为根的子树内,选取一些节点使得这个被询问的节点包含的叶子节点都有一个父亲被选中,求最小权值.支持单点修改. 注释:$ ...
- A Simple Problem with Integers-POJ3468
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...
- Flink本地安装和创建Flink应用
本篇文章首发于头条号Flink本地安装和创建Flink应用,欢迎关注我的头条号和微信公众号"大数据技术和人工智能"(微信搜索bigdata_ai_tech)获取更多干货,也欢迎关注 ...
- springboot-jjwt HS256加解密(PS：验证就是解密)
最近项目需要用到类似access token进行加解密.验签的需求,本人在此做个小笔记记录一下,以供他人参考. 一共会用到2中加解密,HS256 和 RS256,本文只是对 HS256做个备注,好了直 ...
- mysql转oracle注意事项
1.mysql中有自增长,oracle用新建sequence代替. 2.在实体类的id要指定相关的sequence @GeneratedValue(strategy=GenerationType.SE ...
- MongoDB小结22 - id生成规则
MongoDB的文档必须有一个_id键. 目的是为了确认在集合里的每个文档都能被唯一标识. ObjectId 是 _id 的默认类型. ObjectId 采用12字节的存储空间,每个字节两位16进制数 ...
- [Spring Boot ] Creating the Spring Boot Project : Demo: Creating a REST Controller
In Spring boot, define a REST API endpoint is pretty easy. package com.globomatisc.bike.controllers; ...