学习本课程之前需要的知识:
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
- 公众号:前方录