文章目录
Chrome 调试工具
在浏览器任意网页中，单击鼠标右键css3的弹性盒布局，选择“检测”，打开调试工具。 或者 f12 键。
打开后可以看到如下界面：
简单介绍一下各元素的作用：
第二个图标模拟手机/平板电脑上的显示效果。
控制台：控制Taipei可以执行js的代码，也可以看到js的日志~
复活节彩蛋~
在CSS中，HTML标签的显示方式有很多种。 本文主要介绍两种：块型和内联型。
block：块级元素 inline：行内元素
块级元素
块级元素（块元素）占据浏览器中的整行，并排除位于同一行的其他元素。
即块级元素间距为100%。
常见的块级元素如下：
行内元素
内联元素也称为行内元素（内联块）。 可以与浏览器中的其他内联元素共享一行。
只有当多个元素的长度小于浏览器的长度时，才会换行显示。
常见的内联元素如下：
注：这里的排他行是指元素在浏览器中的操作效果。 它不是编辑器中的一行。
在编辑器中，无论你如何编写代码，都不会影响其在浏览器中的性能。
img 是一种特殊类型，既不是内联元素，也不是块级元素，称为“内联块元素”。
对于任何元素，都可以通过display属性改变其显示模式~
块级元素和行内元素的区别
（经典前端笔试题）
display可以改变当前元素的显示方式~
实际开发中，经常需要将行内元素转换为块级元素（方便布局）
将块级元素转变为内联元素的情况很少见。
盒子模型
html 元素中的每个元素都是一个圆圈。
矩形上可以包含一些内容，就像一个“盒子”。
一个包由以下几部分组成：
分别对应下面的1、2、3、4
边界
**border-width:**边框的厚度
**border-style:** 边框的样式
**border-style:** 边框的颜色
如何使用：
<body>
<div class="parent">
hello
</div>
<style>
.parent{
width:500px;
height:300px;
background-color: green;
border-width: 20px;
border-style: dotted;
border-color: black;
/*复合写法：border: 20px #666 solid;*/
}
</style>
设置边框后，可能会拉伸袋子，并且尺寸会添加到盒子间距中。
如果你不想让包变大，你可以通过 box-sizing 属性改变浏览器的行为，让边框不再变成一个大包。
*{
box-sizing:border-box;
}
内行间距填充
是指袋子内容物到袋子边框的距离。 内线间距一共有4个。
padding-xxx（顶部/底部/左/右）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.box1{
/* 设置盒子内容区的长和宽*/
width:100px;
height:100px;
/*内容区的背景颜色*/
background-color: #bfa;
border:10px dashed red;
}
</style>
<div class="box1"></div>
</body>
</html>
效果图：
添加行间距：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.box1{
/* 设置盒子内容区的长和宽*/
width:100px;
height:100px;
/*内容区的背景颜色*/
background-color: #bfa;
border:10px dashed red;
padding-top:20px;
}
</style>
<div class="box1"></div>
</body>
</html>
padding影响bag可见框架的大小，内容区域的背景延伸到padding
内容区域可以放置内容，但不能放置内行间距。 通过放置元素，可以间接看到分割线，但并不明显。 如下图：（子元素与父元素之间的行间距很重要）
利润
控制袋子与袋子之间的距离。
margin：外行间距，设置外行间距后css3的弹性盒布局，元素之间会产生“空白”，空白处不能放置其他内容。
复合写作：
margin: 上外行间距 右外行间距 下外行间距 左外行间距
块级元素水平居中
指定长度并将水平边距设置为自动。 （如果不指定长度，则默认与父元素相同）
写法如下：
左边距：自动；
右边距：自动
边距：自动
保证金：0 自动
注意：
这里的水平居中和text-align属性不一样
margin: auto 适用于块级元素。
text-align:center 是将行内元素或行内块元素水平居中。
垂直居中时，不能使用“上下边距自动”的形式...
如何消除浏览器默认样式
浏览器会给元素添加一些默认样式，特别是内、外行距。 不同的浏览器有不同的默认样式。
为了保证代码在不同浏览器上能够基于统一的风格，我们通常选择通过转义选择器来清除浏览器风格：
*{
保证金：0；
填充：0；
flex 布局（弹性布局）
flex:flexible box - 弹性布局，用于为盒子模型提供最大的灵活性。
页面布局：元素能否放置在合适的位置。 布局规则：先按行布局，再按列布局~
任何容器都可以是弹性布局
。盒子{
显示：柔性；
内联元素也可以使用flex布局
。盒子{
显示：内联柔性；
基本概念
注意：父元素设置为Flex布局后，子元素的float、clear、vertical-aglin属性将失效
共同属性
证明内容合理
设置子元素在主轴上的排列方式
数值描述
弹性启动
默认值。该项目位于容器的开头
弯曲端
该物品位于容器的末端
中心
该物品位于容器的中央
之间的空间
项目在行之间留下间隙
周围空间
项目在行前、行间和行后留出空间
使用演示：
<html>
<head>
<style>
#main {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: flex-end;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h1>justify-content 属性</h1>
<p>The "justify-content: flex-end;" 在容器末尾对齐弹性项目：</p>
<div id="main">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 justify-content 属性。</p>
</body>
</html>
对齐项目
设置元素在横轴上的排列方式
（flex容器中的项目指定默认的对齐方式）
使用：
对齐项目：拉伸|中心|弯曲开始|弯曲结束|基线|初始|继承；
可能的值：
数值描述
拉紧
默认情况下。项目会拉伸以适合容器
中心
该物品位于容器的中央
弹性启动
在容器的开头
弯曲端
该物品位于容器的末端
基线
项目定位到容器的基线
代码演示：
<html>
<head>
<style>
#main {
width: 220px;
height: 300px;
border: 1px solid black;
display: flex;
align-items: center;
}
#main div {
flex: 1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">有更多内容的绿色 div</div>
</div>
<p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 align-items 属性。</p>
</body>
</html>
文章参考：
%257B%2522request%255Fid%2522%253A%2522164666037616780366593778%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&re quest_id=164666037616780366593778&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2alltop_positive~default-1 - 107947175.pc_search_result_control_group&utm_term=%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80&spm=1018.2226.3001.4187
