~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：html+css3
作者：张海锋
撰写时间：2019-1-1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在学习前端的过程中，我觉得最重要的就是对网页的布局得有一条清晰的思路。所以我们要对布局方法有一定的了解。下面简要的说说几种常见的布局。
1.Flex弹性布局，可以简便、完整、响应式地实现各种页面布局。
而传统解决方案，基于盒状模型，需要position属性 或者float属性才能实现与其相同的布局。如图：
flex布局代码：(只需在父元素上加display：flex；就能令子元素 并排显示)
.box{
height: 210px;
width: 100%;
background: #eee;
display: flex;
}
position属性 或者float属性代码：（需在每个子元素上加浮动才能令其并排显示）
.box div{
width: 200px;
height: 200px;
background: #EF9799;
margin: 5px;
text-align: center;
line-height: 200px;
color: #fff;
}
而flex弹性布局还有一个属性：随屏幕宽度的改变其子元素也会随之伸缩。2.响应式布局：媒体查询（是一种CSS语法。可以根据浏览器的特性，
一般是屏幕或浏览器容器宽度提供CSS规则。）
在刚开始学习前端时，自己做了一个静态网页。本来做出来的效果在自己电脑上看觉得很完美，但考在别人的电脑上看时样式全乱了。然后就上网查找了原因才知道，电脑的分辨率不同会导致样式的混乱，后来才知道用响应式布局：媒体查询的方法可以解决。~~最后果然弄好了。3.栅格响应式布局（引用bootstrap）
顶部代码：
引用bootstrap ：
//row代表一行
//总共12格，自行分配
// 总共12格，自行分配
以上几种是学习前端最基础的~也是最实用的布局手法。。。。◆◆
开发工具与关键技术：html+css3
作者：张海锋
撰写时间：2019-1-1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在学习前端的过程中，我觉得最重要的就是对网页的布局得有一条清晰的思路。所以我们要对布局方法有一定的了解。下面简要的说说几种常见的布局。
1.Flex弹性布局，可以简便、完整、响应式地实现各种页面布局。
而传统解决方案，基于盒状模型，需要position属性 或者float属性才能实现与其相同的布局。如图：
flex布局代码：(只需在父元素上加display：flex；就能令子元素 并排显示)
.box{
height: 210px;
width: 100%;
background: #eee;
display: flex;
}
position属性 或者float属性代码：（需在每个子元素上加浮动才能令其并排显示）
.box div{
width: 200px;
height: 200px;
background: #EF9799;
margin: 5px;
text-align: center;
line-height: 200px;
color: #fff;
}
而flex弹性布局还有一个属性：随屏幕宽度的改变其子元素也会随之伸缩。2.响应式布局：媒体查询（是一种CSS语法。可以根据浏览器的特性，
一般是屏幕或浏览器容器宽度提供CSS规则。）
在刚开始学习前端时，自己做了一个静态网页。本来做出来的效果在自己电脑上看觉得很完美，但考在别人的电脑上看时样式全乱了。然后就上网查找了原因才知道，电脑的分辨率不同会导致样式的混乱，后来才知道用响应式布局：媒体查询的方法可以解决。~~最后果然弄好了。3.栅格响应式布局（引用bootstrap）
顶部代码：
引用bootstrap ：
//row代表一行
//总共12格，自行分配
// 总共12格，自行分配
以上几种是学习前端最基础的~也是最实用的布局手法。。。。◆◆
