标签：
|
CSS规则声明里，包含三种类型的值
1、文本值
div { visibility: hidden; }
2、数字值
div { width: 200px; }
3、颜色值
1、颜色名。例如红色（red）、蓝色（blue）等。 参考：W3C颜色名定义，https://www.w3.org/TR/css3-color/#html5
2、十六进制颜色。红色（#ff0000） 说明：6位数字前两位代表红色，中间两位代表绿色，末两位代表蓝色。
3、RGB颜色值（Red, Green, Blue）。红色 rgb(250, 0, 0) 或者 rgb(100%, 0, 0)
4、RGBA颜色值（Red, Green, Blue, Alpha）。红色50%的透明度 rgb(250, 0, 0, .5 )
|
.png) |
.png) (优先级顺序).png) |
|
 找到元素，呈现样式。
.png) .png) #号选择id .选择class
.png) .png) .png) .png) .png) 4.4.1 上下文选择器
.png) 4.4.2、特殊上下文选择器： 子选择符
>
.png) 4.4.3 特殊上下文选择器： 紧邻同胞元素
+ :之后相邻的
.png) 4.4.4、 特殊上下文选择器： 一般同胞元素 ~ :之后隔开的所有
4.4.5、特殊上下文选择器： 通用选择符 * : 选中所有
|
.png) .png) ID属性选择符 : 在页面中唯一的标识一个元素。 类属性选择符：标识一组具有共同特征的元素。
1、不要为每个标签重复的样式。
2、利用继承和上下文选择符能够让不同的标签共享样式。从而降低需要编写和维护CSS的工作量。
.png) .png) .png) |
|
伪类:(类似selector)
实际上并没有标签附加到元素的标签上。
UI伪类：当元素处于某一状态时，为该元素应用样式。
.png)
a:hover//悬浮时
a:link//默认 a:active//单机时 a:visited//被点击(访问)后 .png) .png) .png) 作为目标被链接到后的变化
.png) 结构化伪类：元素标记存在一定的逻辑关系，为符合这种关系的元素应用样式。
.png) .png) .png) .png) .png) .png) |
.png) .png) .png) .png) .png) .png) .png) .png) |
|
3.1、理解盒子模型 ： 外边距设置
margin: 5px 10px 8px 9px;
margin: 5px 10px;
margin: 10px
margin-left: 10px
3.1、理解盒子模型 ： 内边距设置 (同上)
3.1、理解盒子模型 ： 边框宽度 /样式/颜色
.png) .png) .png) .png) |
.png) .png) 边框颜色
.png) 边框圆角
.png) |
.png) .png) .png) .png) 给浮动元素的父元素添加 overflow:hidden。
同时浮动父元素。
父元素的的最后一个子元素，是一个非浮动的具有清除样式（clear: both / clear: left ）的元素。 使用 :after 添加清除元素。
.png) .png) .png) .png) .png)  .png) .png) .png) |
.png) .png) .png) .png) 包裹浮动元素的方法
.mainWrapper{
border: 1px solid red; /*包裹浮动元素：方法一*/ /*overflow: hidden;*/ /*包裹浮动元素：方法二 比翼双飞也浮动*/ /*float: left;*/ } /*包裹浮动元素：方法三 使用伪元素（元素）*/ .mainWrapper::after{ content: "."; display: block; clear: both; visibility: hidden; height: 0; } |
|
注意点
|
居中显示:
width: 100%;
vertical-align: middle;
text-align: center; |
.png) .png) |
.png) |
标签：
原文地址：http://blog.csdn.net/u011200604/article/details/51893404
