一、px、em、rem、vw、vh有什么区别？
1.基本概念
px(像素):是pixel的缩写
em:相对元素,1em等于当前元素的1font-size的大小
rem:是css3新增的相对单位,1rem等于html的font-size大小
vw和vh:是相对单位,1vw是视口宽度1%,1vh是视口高度的1%
vmax vh和vw中较大的值
vmin vh和vw中较小的值
如果某个元素在手机横评和竖屏大小保持一致,可以考虑使用vmax或vmin
2.什么是视口?
视口不等于屏幕大小,视口去掉浏览器头尾
3.代码示例
二、css选择器优先级的理解
1.常用的css选择器
id、class、标签、伪类、通配符
2.选择优先级的计算方式
1. important! > 行间样式 > id > class > 标签 > 通配
注意：继承的优先级永远没有直接给的优先级高
2. 组合起来：ABCD
伪类=class
看不懂？这里有图↓
三、css哪些样式可以继承?
1.css中可以继承的样式
2.使用谷歌调试工具验证
代码:
3.行高(line-height)
line-height:200px 直接继承
line-height:1.5 根据自己的字体大小进行计算
line-height:200% 根父级的字体大小进行计算
四、BFC
1.什么是BFC
BFC 是 Block Formatting Context （块级格式上下文）的缩写
BFC是一个独立的空间，里面子元素的渲染不影响外面的布局
2.BFC作用
1.解决margin塌陷
2.清浮动
3.如何触发BFC
overflow：hidden
display:inline-block/table-cell/flex
position:absolute/fixed
4.margin塌陷
可以看到上面两个section之间的边距重合了
解决办法
<style>
* {
margin: 0;
padding: 0;
}
.box {
background-color: blanchedalmond;
overflow: hidden;
}
.div1 {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 20px;
}
.div2 {
width: 200px;
height: 200px;
margin: 20px;
background-color: aquamarine;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
</div>
<div class="div2"></div>
</body>
第二种
<style>
* {
margin: 0;
padding: 0;
}
.box {
background-color: blanchedalmond;
display: inline-block;
}
.div1 {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 20px;
}
.div2 {
width: 200px;
height: 200px;
margin: 20px;
background-color: aquamarine;
}
.div1{
float: left;
}
.div2{
float: right;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
五、盒子模型
1.什么是盒子模型？
盒子模型就是元素在网页中实际占用的大小
2.盒子模型的计算方式
盒子模型=width/height+padding+border
注意:没有margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
/* 盒子模型=200+20+10 */
div{
width: 200px;
height: 200px;
padding: 10px;
border: 5px red solid;
background-color: beige;
}
</style>
<body>
<div id="div1">测试代码</div>
<script>
let w=document.getElementById("div1").offsetWidth;
console.log(w);
</script>
</body>
</html>
代码效果和js运行结果
3.box-sizing
当box-sizing的值为border-box时,会改变盒子模型的计算方式
盒子模型=width/height=内容宽高+border+padding
div{
width: 200px;
height: 200px;
padding: 10px;
border: 5px red solid;
background-color: beige;
box-sizing: border-box;
}
此时的div的盒子模型只有宽和高相加的大小
4.offsetWidth
JavaScript中获取盒子模型的方式是 obj.offsetWidth/offsetHeight
<script>
let w=document.getElementById("div1").offsetWidth;
console.log(w);
</script>
六、当margin变成负值是会发生什么？
1.margin负值有什么效果?
margin-left负值,元素自身向左移动
margin-top负值,元素自身向上移动
margin-right负值,右边的元素向左移动
margin-bottom负值,下面的元素向上移动
代码:
//margin-left负值,元素自身向左移动
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px;
border: 5px solid red;
}
.div1 {
width: 200px;
height: 200px;
background: green;
margin-left: -50px;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
</div>
</body>
代码:
//margin-top负值,元素自身向上移动
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px;
border: 5px solid red;
}
.div1 {
width: 200px;
height: 200px;
background: green;
margin-top: -50px;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
</div>
</body>
//margin-bottom负值,下面的元素向上移动
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px;
border: 5px solid red;
}
.div1 {
width: 200px;
height: 200px;
background: green;
margin-bottom: -50px;
}
.div2 {
width: 150px;
height: 150px;
background: #ccc;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
//margin-right负值,右边的元素向左移动
<style>
* {
margin: 0;
padding: 0;
}
.box {
overflow: hidden;
margin: 50px;
border: 5px solid red;
}
.div1 {
float: left;
width: 200px;
height: 200px;
background: green;
margin-right: -50px;
}
.div2 {
float: left;
width: 150px;
height: 150px;
background: #ccc;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
2.margin负值的应用
增加宽度
圣杯布局
双飞翼布局
增加宽度
我给每个li添加了margin-right:10px;
因为ul的宽不够,所以图片3被挤到下面一行了
代码
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 620px;
margin: 50px auto;
border: 5px solid red;
}
.box ul{
overflow: hidden;
background-color: #ccc;
}
.box li{
float: left;
width: 200px;
height: 200px;
background-color: green;
margin-right: 10px;
}
</style>
<body>
<div class="box">
<ul>
<li>图片1</li>
<li>图片2</li>
<li>图片3</li>
</ul>
</div>
</body>
解决办法
<style>
.box{
overflow: hidden;/*将多余部分隐藏*/
}
.box ul{
margin-right: -10px; /*给父级添加右侧负值边距,使这个盒子被撑开*/
}
</style>
七、圣杯布局
1.什么是圣杯布局
两边固定宽度，中间自适应宽度
2.难点
margin-left:-100%; 是父级宽度的100%
margin-right:150px;其他元素当他宽度少了150px
代码:
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
overflow: hidden;
padding-left: 200px;
padding-right: 150px;
background-color: #ccc;
}
.item {
float: left; /*公共class添加浮动 */
color: #fff;
font-size: 20px;
}
.content {
width: 100%;
/* 使内容随页面自适应 */
height: 200px;
background-color: green;
}
.left-item {
width: 200px;
margin-left: -100%; /* margin-left设置负值 */
position: relative; /* 相对定位 */
right: 200px;
background-color: red;
}
.right-item {
width: 150px;
margin-right: -150px;
/* 如果一个元素的右边距设置成负值,对其他元素来讲就认为这个元素的宽度减少了此负值 */
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="content item">主体内容</div>
<div class="left-item item">左侧内容</div>
<div class="right-item item">右侧内容</div>
</div>
</body>
八、双飞翼布局
什么是双飞翼布局
左右宽度固定，中间宽度自适应，中间的内容优先加载
<style>
* {
margin: 0;
padding: 0;
}
.box{
padding-top: 200px;
overflow: hidden;
}
.item {
float: left;
color: #fff;
font-size: 20px;
}
.container {
width: 100%;
background-color: #ccc;
}
.content {
margin-left: 200px;
margin-right: 150px;
height: 200px;
background-color: green;
}
.left-item {
width: 200px;
margin-left: -100%;
background-color: red;
}
.right-item {
width: 150px;
margin-left: -150px;
background-color: blue;
}
</style>
<body>
<div class="box">
<div class="container item">
<div class="content">主体内容</div>
</div>
<div class="left-item item">left-item</div>
<div class="right-item item">right-item</div>
</div>
</body>
总结：相同点和不同点
相同点
两者功能相同，都是为了实现两侧宽度固定，中间宽度自适应的三栏布局
不同点
在解决中间部分被挡住的问题时，采取的解决办法不同。主要区别是圣杯布局使用了padding，则双翼布局没有
九、清浮动
1.清除浮动的方法
父级加overflow：hidden
父级设置clearfix
父级也浮动
2.手写clearfix
.clearfix::after{
content: "";
display: block;
clear: both;
}
十、垂直居中
常见的垂直水平居中的办法
1.position+margin负值的办法(宽高固定)
2.position+margin:auto(固定宽高)
3.display:table-cell + vertical-align:middle (固定宽度)
4.position+tranform(不需要固定宽高)
5.flex(不需要固定宽高)
//共用代码
<body>
<div class="box">
<div class="item">测试文字</div>
</div>
</body>
1.position+margin负值
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 500px;
height: 500px;
border: 5px solid red;
}
.item{
position: absolute;
left: 50%;
top: 50%;
margin: -100x 0 0 -15px;
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
2.position+margin:auto
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 500px;
height: 500px;
border: 5px solid red;
}
.item{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 200px;
background-color: #ccc;
}
3.display:table-cell + vertical-align:middle
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: table-cell;
vertical-align: middle;
width: 500px;
height: 500px;
border: 5px solid red;
}
.item{
margin: auto;
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
4.position+tranform
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 500px;
height: 500px;
border: 5px solid red;
}
.item{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #ccc;
}
</style>
5.flex
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
border: 5px solid red;
}
.item{
background-color: #ccc;
}
</style>
