1. 布局 (div ul>li )
1) 行级布局
利用块级元素的特点
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
2) 列级布局
块元素在一行中显示
在默认文档流中，块独占一行空间。
浮动可以使得一个元素脱离默认文档流。
1) 宽度，高度都由内容决定
2) 多个浮动元素在一行中排布
2.1 子元素浮动后无法支撑父元素
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
::after
</ul>
<div class="content">
</div>
<style>
ul>li {
float:left;
}
</style>
1）one two three在一行中排布
2）ul的高度为0
2.2 两个兄弟元素中其中一个元素浮动，一个不浮动
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.content > div {
height:100px;
}
.content > .left {
float:left;
width:100px;
}
.content > .right {
width:200px;
}
</style>
1) left right
2) content高度为100px
2.3 多个浮动在一行，如果父元素的一行中无法容纳这么多元素
换行
2. 定位布局
position:static; 默认布局，表示静态布局
position:relative/absolute/fixed
定位元素。可以使用left/right/top/bottom
relative:
相对定位
1.相对于自身原来所在位置；
2.不脱离文档流
absolute
绝对定位
1. 相对于距离它最近的父定位元素，如果没有父定位元素，相对于浏览器视口. 不仅仅移动的时候参照定位元素，百分比也参照定位元素而非父元素。
2. 脱离文档流
fixed
固定定位
3. display
display:none 隐藏
----------------------------------------
宜家
奕欧来
奢侈 （打折） 别墅区 lv 蔻驰
7条产品数据
$.get('',function(data){
list = [{},{},{},{},{},{},{}]
})
<ul>
<li v-for='product in list'></li>
</ul>
<div class="products">
<div class="left">
<img src="" alt="" list[0]>
</div>
<div class="right">
<ul>
<li v-fo></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>