标签：
一、.container没有设置宽度，则@media，来获取宽度。如果自己设置了宽度，则width就为设置的值。
.containter: width = .row: width; //这个等式是默认的
以下的width都是指.row宽度，width:
1.对于.col-xs-?:
不管.row宽度多少，始终水平排列，.col-xs-?的宽度 = ?*row.width/12
2.对于.col-sm-?:
当width < 750，垂直排列，即堆叠在一起，.col-sm-?的宽度为row的宽度，不管？是多少
当width >= 750，水平排列，float:left，.col-sm-?的宽度=?*row.width/12，.col-sm-6:50%;
3.对于.col-md-?:
当width < 970，垂直排列，即堆叠在一起，.col-md-?的宽度为row的宽度，不管？是多少
当width >=970，水平排列，float:left，.col-sm-?的宽度=?*row.width/12，.col-sm-6:50%;
4.对于.col-lg-?
当width < 1200，垂直排列，即堆叠在一起，.col-lg-?的宽度为row的宽度，不管？是多少
当width >=1200，水平排列，float:left，.col-sm-?的宽度=?*row.width/12，.col-sm-6:50%;
注意：
(1)width宽度包含了padding的宽度。
(2)媒体的查询宽度跟.container的宽度不同
二、每一行row，分成12个col
box模型，最里面的长度就是内容的长度，设为content_width
每一个col占据的宽度(包括border+paddig+最里面的部分) = content_width/12 //为什么不包括margin?
三、盒子模型
div: width
margin_width
border_width
padding_width
content_width(可以再嵌套)
四、响应式布局
<!-- 实例：手机、平板、桌面 -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn‘t match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
讲解：
当row宽度 >= 970：col-md-8, col-md-4
750<当row宽度 < 970，col-md-?垂直排列，宽度等于row；但是col-sm-6还是水平排列，float:left；col-xs-6的宽度是自动的，随col-sm-6；
当row宽度 < 750，col-sm-?垂直排列，宽度等于row；但col-xs-?把其分成了12等份；
五、文档流、块级元素、内联元素
有的属性只能用于块级或内联？比如内联元素不能设置宽高。
块级元素和内联元素的互相转换
文档流：将窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素，即为文档流。
内联元素(又叫行内元素inline element):
(1)不占据一整行，随内容而定，有以下特点
(2)不可以设置宽高，也不可以设置行高，其宽度随着内容而增加，高度随着字体大小而改变
(3)可以设置外边界margin，但是外边界不对上下起作用，只能对左右起作用。
(4)也可以设置内边界padding，也可以设置边框border
常用内联元素：a, span, img, input, label, select, br, b, em, font, i, small, strong, strike
块级元素：
(1)总是在新行上开始，占据一整行
(2)宽高，行高以，内外边距和边框都可以设置 //宽高与内容无关
(3)它可以容纳内联元素和其他块元素
常用的块级元素：div, p, h1, hr, form, ul, ol, li, dl, dt, dd
使用display来转换内联和块级特性。
六、浮动
浮动就是设置元素脱离文档流，其后的元素自动填充上来。
float: left; 或 float: right; 元素的定位是以窗口的左右来定位的。
设div A 设置float: right;
如果它上面的元素没有设置float属性，A将脱离文档流，浮动到窗口右边，对齐上面元素的顶部；下面元素填充其原来文档流。
如果它上面的元素设置了float属性，首先会跟到它的后面(排列顺序窗口的左边或右边就是前头)；在根据自身的left或right属性定位。
清除浮动：
1.设置了或未设置float属性的元素都可以用吗？
2.它只能用于自己身上，自己调用自己，让自己被迫下移。
3.其值
none: 默认，左右两边都可以有浮动元素
left: 清除左边浮动，即左边不能有浮动元素。如果左边有浮动元素，那么自己将被迫下移。
right: 清除右边浮动，即右边不能有浮动元素。如果右边有浮动元素，那么自己将被迫下移。
both: 两边都不能有浮动元素。// 其实用这个属性，是不确定那边有浮动的时候最好了。
七、定位(相对，绝对，固定)
div A 设置了position属性：
relative：相对于本身原来的文档流，保留问文档流
fixed：相对于浏览器窗口，脱离文档流。后面元素自动填充
absolute：相对于祖先中设置了position: relative;或position: absolute;的元素，采取就近原则，脱离文档流
static：默认不写的值，文档流
三维坐标：正方形的四个点(由top, bottom; left, right决定)，坐标的箭头构成的区域就是div，加上index属性
------------->
|
|
|
|
标签：
原文地址：http://www.cnblogs.com/htmlphp/p/5103349.html
