当父元素无法确定子元素的高度，盒子里面的内容浮动起来，那么他就脱离标准流了，所以这时候父元素盒子就不能精确地检测到它内部的内容有多高，父元素中就相当于没有元素（父元素成为一条线）完全没有被撑开。

2.此时设置overflow:hidden;用于触发盒子的是否是布局属性haslayout，就可以精确检测内部的高度，盒子就会被撑开。
注意：overflow可以触发除了IE6以外的haslayout属性。为了兼容IE6，在overflow下增加一句zoom:1;可触发IE6 的haslayout属性。

背景属性background

background-image:url('背景图的地址')用于设置背景图
background-repeat设置背景图是否重复，为不重复no-repeat，为延y轴重复repeat-y
background-position设置背景图的位置为右下角right bottom
background-attachment设置附加条件，将背景固定fixed
background-color设置背景颜色

最后可以将这些属性合并为background这一个属性。如下：

边框阴影box-shadow

设置box-shadow
例子：box-shadow:5px 5px 5px rgba(22, 50, 80, 0.3);

CSS颜色

光的颜色有很多，所有的光线都是由三种基本的光线组成，分别是红（Red）绿（Green）蓝（Blue），网站的图片都是RGB模式，也就是说网页图片中任何一个颜色都由这三种颜色构成。

每个颜色的色值范围是0-255；因为用十进制表示会产生歧义，在实际中用2位的十六进制表示。

颜色的表示（颜色的色值必须以#开头），即#开头和6位十六进制数的组合，前两位表示红（Red）的色值，中间两位表示绿（Green）的色值，后两位表示蓝（Blue）的色值，即满足RGB模式。

例如：
#FF0000 红色
#00FF00 绿色 #001100 绿色 #002200 绿色
#000000 黑色
#FFFFFF 白色
#555555 灰色 #121212 灰色 #5c5c5c 灰色
#A503F5 由A5的红，03的绿，F5的蓝组成的颜色

关于颜色百分比
rgba(红色值,绿色值,蓝色值,透明度百分比其最大值为1即不透明)

边界属性margin

参数规则

margin:10px;表示上下左右全是10px；
margin:10px,50px;表示第一个参数是上下，第二个参数是左右；
margin:10px,auto,50px;表示第一个参数是上，第二个参数是左右，第三个参数是下；
margin:10px,20px,30px,40px;表示第一个参数是上，第二个参数是右，第三个参数是下，第三个参数是左，即顺时针顺序；

padding属性的参数规则同理

HTML5新增样式

伪对象选择器

:before在盒子的前面插入（内部的前面）
:after在盒子的后面插入（内部的后面）
content用于插入内容（如果没有内容，content也必须要写content:'';即为空）

具体使用如下：

注意： input不支持伪元素
参考链接：input不支持伪元素after、before

特殊情况使用

：hover操纵自己包含的子元素以外的元素

通过>与+来控制下个元素，子集元素，下个元素的子集元素的CSS

例子如下：

<html>
<body>
<style>
    #a {color : #FFFF00;}
    #a:hover > #b{color : #FF0000;}    
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>

display设置内容垂直对齐

用display实现内容垂直对齐。

具体使用如下：
笔记整理5 -- CSS 常用属性

inline-block间距问题
参考链接:【CSS】inline和inline-block的间距

笔记整理5 -- CSS 常用属性

笔记整理5 -- CSS 常用属性

定位属性position

绝对定位absolute

相对定位relative

固定定位fixed

静态定位static

浮动属性float

清除属性clear

溢出属性overflow