学习本课程之前需要的知识:

盒子模型F12调试代码编辑器相对长度单位

css3弹性盒子flex和inline-flex的用法和区别视频

高清学习视频及资料百度网盘链接:

https://pan.baidu.com/s/1krDjWWewtFlVXeX-vuhNAQ

提取码:mg5p

一、弹性盒子和弹性盒子的区别

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
  • 公众号:前方录

Leave a Reply

邮箱地址不会被公开。 必填项已用*标注