盒模型与浮动布局

盒子由几部分组成：
物品 + 填充物 + 外包装 + 外边距
content + padding + border + margin

/* margin 后面接多个值 */
/*        上   右    下   左  */
margin:50px
30px40px
20px;
/*        上   左右  下 */
margin:50px
30px
40px;
/*       上下   左右 */
margin:50px
30px;
/* 上下左右 */
margin:50px;
通常情况下：
父子关系产生边距一般用padding
兄弟关系产生边距一般用margin 

p标签的基本样式
p{
font-family:"微软雅黑";
/* em */
font-size:1em;
/* 
italic 斜体
oblique 倾斜
*/
font-style:oblique;
/* 100 - 900 */
/* bold 加粗 */
/* lighter */
/* normal */
font-weight:lighter;

/* 复合属性 */
font:italic
9002em
"宋体";

/* 文本设置 */
/* underline */
/* overline */
/* line-through */
/*text-decoration: line-through;*/

/* 缩进 */
/* 数值，可用用px 也可用 em，可以为负值 */
text-indent:-10px;

/*left, right, center*/
/* justify 两边对齐 */
text-align:justify;

/* 行间距 */
/* 如果一行内容的情况下，可以用作垂直居中 */
line-height:-1px;

/* 字(单词)间距 */
/* 可以为负值 */
word-spacing:-50px;

/* 字符间距 */
/* 可以为负值 */
letter-spacing:-5px;
}

插入背景图片

/* 背景图片，平铺 */
background-image:url("img/1.gif");
/* 背景图片是否重复 x y */
background-repeat:repeat-y;
/* 背景图片大小     宽     高 */
/*background-size: 100% 100%;*/

/* 1. 可以使用像素值
2. 可以使用方向值
3. 可以使用百分比
*/
background-position:30%
80%;
}

/* 伪类
hover 鼠标悬停
*/
.div1:hover{
width:400px;
height:400px;
}
css基本样式一览

css 属性名：
width: 宽度
height: 高度
margin: 外边距
padding: 内边距
border: 边框
background: 背景
display: 显示方式
font: 字体
font-weight 文字着重
font-family 字体
font-size  文字大小
font-style 文字样式
letter-spacing 字母间距
word-spacing 单词间距
text-align 文本对齐方式
text-decoration 文本修饰
text-indent 首行缩进
background-repeat 背景图片重复
background-image 背景图片
background-size 背景图片大小
float 浮动

浮动布局

float: left   左浮
float：right   右浮

 清除浮动的方式：
1. clear:both;
2. 在父级中加上overflow:hidden; 变为BFC(单独布局的小单位)
3. 用浮动去清浮动。
文档流：在当前文档下，给元素排列时所占用的位置。
浮动：元素直接脱离文档流，按照指定的方向移动。直到遇到父级的边界，或者其他的浮动元素停止。