前端：bootstrap基本样式，css3定位，响应式布局
Css3中的position属性：css3的定位方式
Css3的几种定位方式：流定位、浮动定位、相对定位、绝对定位、固定定位，默认为流定位。
- 流定位
页面中的块级元素框从上到下一个接一个地排列。每一个块级元素都会出现在一个新行
中（比如<p>元素、<div>元素）。元素框之间的垂直距离是由框的垂直外边距计算出来的。
行内元素将在一行中从做到右排列水平布置，不需要从新行开始，可以使用水平内边距、边框和外边距调整他们的间距。
2.浮动定位
浮动定位是指：让元素脱离普通流定位，将浮动元素放在父元素的左边或者右边，浮动元素依旧位于父元素之内。
父元素中有三个元素框，如果把框1向右浮动，则它会脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
右浮动</h1>
<div class=”outter”>
<div class=”inner d1”>d1</div>
<div class=”inner d2”>d2</div>
<div class=”inner d3”>d3</div>
</div>
浮动定位时，观察我的位置<p>
.d1,d2,d3{
Float:right
}
浮动效果如下：
当框1向左浮动时，它脱离流定位并且向左移动，直到它的左边缘碰到父元素的左边缘。因为框1不在处于流定位中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。效果如下图：
如果需要设置框浮动在父元素的左边或者右边，可以通过float属性来实现。Float属性定义元素在那个方向浮动，在CSS中，任何元素都可以浮动
float：none/left/right;
clear属性用来清楚浮动所带来的影响。定义了元素在哪边上不允许出现浮动元素.
Clear:none/left/right/both
.d1,.d2,.d3{
float:left
}
P{
clear:left
}
- 相对定位元素原本所占有的空间不释放，元素框会相对于它原来的位置偏移某个距离。设置垂直或水平位置，让元素相对于它的七点进行移动。首先需要设置position属性的值为relative，然后使用left属性或者right属性设置水平方向的偏移量，也可以使用top属性或者bottom属性设置垂直方向的偏移量。
<h1>相对定位</h1>
<div>d1</div>
div{
position:relative;
left:50px;
Top:50px;
}
- 绝对定位
将元素的内容从当前定位中移除，释放空间，并使用偏移属性来固定该元素的位置。相对于最近的已定为祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初包含它的块，比如body元素。
设置元素为绝对定位，首先要设置position属性的值为absolute,然后使用left属性或者right属性设置元素的水平位置，也可以设置top属性或者bottom属性设置元素的垂直位置。
<h1>绝对定位</h1>
<div class=”outter”>
<div class=”d1”>d1</div>
</div>
.outter{
position:relative
}
.d1{
position:absolute;
bottom:10px;
right:10px
}
5.固定定位
将元素的内容固定在页面的某个位置。元素从普通流中完全移除，不占用页面空间，当用户向下滚动页面时元素框并不随着移动。
设置固定定位，首先要设置position属性的值为fixed。通过left、top、right以及bottom这些偏移属性来定义元素的位置。
<div class=”top”><a href=”#”>TOP<a></div>
.top{
background-color:#ccc;
width:30px;
text-align:center;
position:fixed;
bottom:10px;
right:5px;
}
- 堆叠顺序
一旦修改了元素的定位方式，则元素就有可能会发生堆叠。可以使用z-index属性来控制元素框出现的重叠顺序。
属性：数值越大表示堆叠顺序更高，即离用户更近，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面，即元素的显示会接近页面表面。可以设置为负值，表示离用户更远。
<div class=”heap”>
<img src=”../images/1.jpg” class=”img1/”>
<img src=”../images/2.jpg” class=”img2/”>
<img src=”../images/3.jpg” class=”img3/”>
</div>
.heap{
width:10px;
height:10px;
border:1px solid:red;
margin:200px 500px;
position:relative;
}
.img1{
position:absolute;
z-index:3
}
.img1{
position:absolute;
left:-250px;
z-index:2;
}
.img1{
position:absolute;
left:-250px;
top:-50px;
z-index:1;
}
效果如下：
定位属性：
属性 | 说明 |
position | 规定元素的定位类型，可取值： Static/relative/absolute、fixed |
偏移属性 | top、bottom、left、right属性，用于定义元素框的偏移位置 |
z-index | 设置元素的堆叠顺序 |
float/clear | 浮动定位属性 |
页面元素高度、宽度什么时候用像素？什么时候用百分比？
根据实际情况需要，看表格是不是要全屏（占满这个网页的宽度），如果要达到全屏用百分比100%，用百分比的好处就是网页能根据电脑桌面的分辨率来调整宽度。如果用像素，就会把表格宽度固定死，像素的大小要根据你的网页来确定了，一般情况下整个网页的宽度是1024像素。
bootstrap栅栏布局
Bootstrap需要为页面和栅格系统包裹一个.container容器。有两个作用于此处的类。由于padding等属性原因，这两种容器类不能互相嵌套。
.container类用于固定宽度并支持响应式布局的容器。
<div class=”container”>
...
</div>
或者：
<div class=”container-fluid”>
...
</div>
栅格参数
通过下表可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 （<768px） | 小屏幕 平板 (>=768px) | 中等屏幕 桌面显示器 (>=992px) | 大屏幕 大桌面显示器 (>=1200px) | |
栅格系统行为 | 总是水平排列 | 开始是堆叠一起的，当大于这些阈值时将变为水平排列C | ||
.container最大宽度 | None(自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽宽 | 30px(每列左右均有15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 | |||
使用单一的一组.col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ”.row 内。
.col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 | .col -md-1 |
.col-md-8 | .col-md-4 |
.col-md-4 | .col-md-4 | .col-md-4 |
.col-md-6 | .col-md-6 |
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
列偏移
使用.col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
.col-md-4 |
.col-md-4 |
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
.col-md-3 .col-md-offset-3 |
.col-md-3 .col-md-offset-3 |
.col-md-6 .col-md-offset-3 |
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>