学习本课程之前需要的知识:
css3弹性盒子flex和inline-flex的用法和区别视频
一、弹性盒子和弹性盒子的区别
1.1.效果
1.1.1.弹性盒子中的所有子元素水平排成一行
1.1.2.非弹性盒子的每一个块级子元素自己占一行;
1.2.弹性盒子的代码：
<!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">
<title>无弹性盒子和有弹性盒子的不一样</title>
<style>
.flex {
width: 800px;
background: gray;
height: 300px;
display: flex;
}
.flex .content {
width: 200px;
height: 200px;
background: green;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>
</html>
二、行内弹性盒子和块级弹性盒子的区别
2.1.区别
2.1.1.弹性盒子不设置宽度时行内和块级弹性盒子才会有区别;
2.1.2.弹性盒子不设置宽度时，行内弹性盒子宽度是内容的宽度;
2.1.3.弹性盒子不设置宽度时，块级弹性盒子宽度为父级的宽度;
2.2.案例演示请看视频;
三、当弹性盒子设置的宽度小于其内容宽时，子元素内容宽会重新被浏览器设置
3.1.当弹性盒子宽度装不下内容时，内容宽会自动调节
3.1.1.子元素新内容宽 = 父级宽度 – 子元素左右外边距 – 子元素左右边框宽 – 子元素的左在内边距;
3.1.2.子元素原来设置的内容宽度会失效;
3.2.案例演示请看视频;
四、弹性盒子制作响应式三栏布局
4.1.知识点;
4.1.1.弹性盒子要设置margin: 0 auto; 最大宽度为一个固定值，宽度设置成百分百;
4.1.2.弹性盒子中元素的宽度要设置成百分比，这样就可以响应式布局了;
4.2.案例演示请看视频;
博主联系方式:
- 微信：34419369
- QQ: 34419369
- 公众号：前方录