css的简史和css布局历史
1.table布局,知道就好。
2.div+css布局,伴随着我们整个前端职业生涯,也是目前主流的布局方式,重点掌握。
3.flex布局,目前在移动端布局日渐成为主流,要会使用。
4.grid布局,这个关注就好,大家会在将来复杂布局中使用,目前兼容性不是很好,没有太多实际应用场景。
css布局的基石-浮动
重点掌握float
1.挤下去了的问题,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap{
width:1000px;
margin: 0 auto;
}
div{
border:5px solid #000;
}
#left{
width:200px;
background:red;
height: 300px;
float: left;
}
#right{
width:800px;
background:green;
height: 300px;
float: left;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">左侧</div>
<div id="right">右侧</div>
</div>
</body>
<html>
一般平常pc端切图用标准盒模型很多,移动端切图经常会用到 诡异盒模型的情况。
使用诡异盒模型方法,
box-sizing: border-box;
2.高度不够,工作中最常用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap{
width:1000px;
margin: 0 auto;
border:5px solid yellow;
overflow: hidden;
}
div{
border:5px solid #000;
}
#left{
width:200px;
background:red;
height: 300px;
float: left;
box-sizing: border-box;
}
#right{
width:800px;
background:green;
height: 300px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">左侧</div>
<div id="right">右侧</div>
</div>
</body>
<html>
黄色框线部分,支撑不开,这里就要用
overflow:hidden;
就撑开了。
清除浮动除了我文中说的是最经典常用的方式
常用的还有两种,这里我们把最常用的三种总结下:
1.添加新的元素 、应用 clear:both;
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
2.父级div定义 overflow: auto(注意:是父级div也就是这里的 div.outer)
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}
<div class="outer over-flow">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
3.:after 方法:(注意:作用于浮动元素的父亲)
这种方法是 面试的最佳答法,也是工作最常用方式。
css布局的基石-定位
1.四种定位。
static 默认 relative相对 absolute 绝对 fixed固定