float（浮动）
定义
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在css中，任何元素都能浮动。浮动元素会生成一个块级框，而不论它本身世任何元素
可能的值
left：元素向左移动
right：元素向右浮动
none：默认值。元素不浮动，并会显示在其文本中出现的位置
inherit：规定应该从父元素继承float属性的值
position属性
定义和用法
position属性规定元素的定位类型
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可易定位。不过绝对或者固定元素会生成一个块级框，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移
可能的值
absolute：生成绝对定位的元素，相对于static定位意外的第一个父元素进行定位。元素的位置通过“left”，“top”，“right”，“bottom”属性进行规定
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”，“top”，“right”，“bottom”属性进行规定
relative：生成相对定位的元素，相对于其正常位置进行定位
overflow属性
定义和用法
overflow属性规定当内容溢出元素框时发生的事情
说明
这个属性定义溢出元素内容区的内容会如何处理。
可能的值
visible：默认值，内容不会被修剪，会呈现在元素框之外
hidden：内容会被修剪，并且其余的内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit：规定应该从父元素继承overflow属性的值
CSS中，设置背景颜色透明，而字体颜色不变：
background-color: rgba(0,0,0,.4);前面三个表示颜色的rgb，而最后一个数字表示透明度（0-1之间）
background-repeat用法
background-repeat:no-repeat ：背景图片不重复
background-repeat:repeat：重复背景图片x方向和y方向同时重复
background-repeat:repeat-x：x方向即水平方向重复
background-repeat:repeat-y：y方向即垂直方向重复
background-position
background-position：背景位移
其后面有两个属性，第一个是水平方向的位置，第二个是垂直方向的位置，这里应该注意两个元素属性的顺序
比如说：background-position:left-29px;（当中的left指从图片的最左端读起，-29px就是将图片向上移动29px，然后开始读）
再比如：background-position:15px 20px;（指的是将图片向右移15px，向下移20px），简单的说，就是以图片的左上角顶点为原点，往下和右都为正值，反之为负值
栅格系统（网格系统）
Bootstrap框架的网格系统工作原理如下：
(1)数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和边距(padding)
(2)在行(.row)中可以添加列(column)，但是列数之和不能超过平分的总列数
(3)具体内容应当放置在列容器(column)之内，而且只有列(column)才可以作为行容器(.row)的直接子元素
(4)通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。
块级元素和行内元素
我们在做页面布局的时候，一般会将html元素分为两种，即块级元素和行内元素
块级元素：
块级元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常用的块级元素有div,h1-h6等
行内元素：
行内元素不可易设置宽（width）和高（height），但是可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般是由元素内部的字体大小决定，宽度由内容的长度控制。常用的行内元素有a,em,strong等。
行内元素和块级元素之间的转换
我们可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现
另外，如果我们即想让一个元素可以设置高度和宽度，又项让它以行内形式显现，这时我们可以设置display的值为inline-block。
css中子元素浮动，无法自动撑开父元素的解决方法
<div>
<div style="float:left;">left</div>
<div style="float:right;">right</div>
</div>
如图所示，父div的高度不会随着两个子div的增高而增高。#####解决方法：给父div加一个overflow:hidden属性即可，如下
<div style="overflow:hidden;">
<div style="float:left;">left</div>
<div style="float:right;">right</div>
</div>
CSS中实现元素的绝对居中
元素的绝对居中方法如下：
.node{
width: 300px;
height:400px;
position:absolute;
left:50%;
right:50%;
margin-left:-150px;/一半的高度/
margin-top:-150px;/一半的宽度/
}
还有一种CSS3的方法：
.node{
width:600px;
height:400px;
position:absolute;
left:50%;
right:50%;
transform:translate(-50%,-50%);
/50%为自身尺寸的一半/
}
第三种方式是margin:auto；
.node{
width:600px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto; /*有了这段代码就自动居中了*/
}
