css 各种样式属性详解

一、 css 重要性

1. html 掌握三部分，就可以上手项目了，一个 html 页面的各种元素(控件)。
   比如： <div> <span> <li> <link ><a> <img> ....等等 。

2. css 样式布局，样式布局是页面的灵魂，没有样式的页面看起来一塌糊涂，乱七八糟，给人的感觉是糟糕。
而拥有好的样式的布局的页面给人的感觉是愉快的，看起来舒服。

3. js 文件和 响应事件 

所以可想而知，熟知css 中的各种样式属性的作用是特别重要的。能让你快速的布局出漂亮的网页页面。

二、css 样式属性

// 这里我会讲一些比较常用、简单的样式属性，复杂一点的，我会另外写文章单独去讲，请读者关注笔者其他文章。

margin -- 控件边缘相对父空间的边距。
margin: 0:  指上下左右距离0。
margin: 0  10px： 指上下距离0，左右距离为 10px。

padding -- 控件的内容相对控件的边缘的边距。
padding: 0  指内边距上下左右为0
padding: 0  10px： 指上下内边距为0，左右内边距为 10px。

color -- 字体颜色
color: red  指字体的颜色为红色。

background-color -- 背景的颜色
background-color: red  指背景的颜色为红色。

border -- 边框的宽度
border: 2px   指边框的宽度为2px。

table的border-collapse属性与border-spacing属性
border-collapse:collapse; 表示边框合并在一起。
border-collapse:separate;表示边框之间的间距，间距的大小用border-spacing:px;定义大小。

font-size -- 字体的大小
font-size: 14px   指字体的大小为14px。

text-decoration -- 下划线
text-decoration: none  无文本修饰，定义标准的文本。
text-decoration: underline  定义文本下的一条线。
text-decoration: overline  定义文本上的一条线。
text-decoration: line-through 定义穿过文本的一条线。
text-decoration: blink  定义闪烁的文本。
text-decoration: inherit 规定应该从父元素继承 text-decoration 属性的值。

width -- 宽度
width: 100px  指控件宽度为100px。

min-width -- 最小宽度
min-width: 100px 定义元素(控件)最小宽度，常和width 一起使用

height -- 高度
height: 100px  定义元素的高度为100px。

line-height -- 文字行高
line-height: 20px  定义文字的行高为20px。 

overflow --  元素溢出部分是否隐藏
overflow: hidden 定义元素溢出部分隐藏。

float -- 元素在哪个方向浮动，
float: left 元素朝左边方向浮动。
float: right 元素朝右边方向浮动。 float: left 和 float: right 常一起使用。

vertical-align  --  元素的垂直对齐方式
vertical-align: middle 定义元素垂直居中对齐。