CSS常用选择符

     1. 标签选择符：标签名称

直接以html标签的标签名作为选择符对象；如h1{ font-size:20px;}；主要用于对网页文档中的基础标签进行统一的标准化设定。

     2. id选择符：#id名

以html标签的唯一标识符id属性的值作为对象。html语言中：id属性是html标签的通用属性，但id值的命名是唯一的，不允许重复。在css语言中，#代表后面的名称是id值，id选择符主要用于针对具有唯一性的html对象。

3. class类选择符：.class名

将一组css样式归纳成为一个类，作为css应用的对象。html语言中：class属性是html标签的通用属性，可以定义多个类，类名之间用空格分隔。css语言中：class选择符主要用于需要调用相同css样式的多个html对象。

优先级关系：id选择符>class选择符>标签选择符

id和class的命名规则：

1. id属性和class属性的值命名都为自定义

2. 不允许用数字开头，不允许使用特殊字符

3. 命名最好具有语义化，可使用-或者_来连接词组（主流使用-）

CSS组合选择符

1. 通配选择符：*

适配文档中的所有html对象；用于定义html文档中所有对象的基础样式（消除浏览器默认设置的基础样式）；根据就近原则，要放在css代码的首行；最常见的用法：*{margin:0;padding:0;}  /*消除所有html标签默认存在的内外边距*/

2. 包含选择符：父级对象a 子级对象b

根据html对象的嵌套关系，指定某个父级元素的子级元素样式；选择符对象可以是多重包含，即一层层的包含下去，样式仅作用于最后的内部对象。元素对象之间用空格分隔。

如：div p { color : red ;}  /*div对象中的所有p对象被指定了红色的样式*/

#box p a { color : blue ; }  /*id为box的对象中的p对象中的a对象被指定蓝色样式*/

3. 群组选择符：对象a，对象b，对象c......

将同样的样式用于多个选择符对象，选择符对象之间用逗号隔开。这里的对象并不一定得是标签，可以是class，id等

4. 指定选择符：标签名.class类名

将class类选择符和标签选择符结合在一起使用。主要适用于在使用了某个class类的所有html对象中特别指定某一类标签。如：<h1>和某个<p>标签调用了important这个类，但是只想给调用了important的p对象添加样式时使用。

CSS：float浮动属性

作用：将页面元素浮动起来，使其能够向左或者向右排列；应用：实现页面中布局的左右排版，实现图文环绕的版式效果。

值	说明
left	元素本身向左浮动
right	元素本身向右浮动
none	元素不浮动（默认值）

原理：浮动元素将脱离默认的文档流，漂浮在默认文档流之上。浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止。

特点：1. 对齐方式（不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。）

           2. 一旦元素浮动起来，就可以直接适用CSS盒子模型属性。（行间元素脱离默认文档流的行间限制。）

3. 对内容的影响（尽管浮动元素脱离了默认文档流，但仍然会影响到默认文档流中的盒子里面装的“内容”（图文），这些“内容”会给浮动元素留出占位。盒子还是那么大，但是内容给浮动元素让出了位置。内容为王。）

CSS：clear清除浮动

作用：规定某个元素的某一侧不允许存在浮动元素。

应用 ：清除其他浮动元素对其产生的影响。

原理：设置了clear的元素将不再像前一个浮动元素对齐，换行重新开始。

相对定位

CSS position属性用于指定一个元素在文档中的定位方式。

top ， right ， bottom 和  left 属性则决定了该元素的最终位置

特性

1. 不使元素脱离文档流 文档流：正常元素的流体布局，从上至下 这里有两种说法，一种占文档流自身的位置还在 一种不占文档流确实层级比较高 可以理解成占据自己的位置 同时提高了层级

2.不影响元素本身特性，行内还是行内，块级还是块级

3.层级未设置时，后来居上，后面设置的定位层级在上面。

绝对定位

相对于已经定位的父元素进行定位

特性

1. 完全脱离文档流

2. 行内元素支持宽高

3. 块级元素内容撑开宽高，不会超过定位父级边界的临界点

4. 没有祖先元素则相对于body

5. 一般配合相对定位使用

6. 绝对定位的元素的位置相对于最近的已定位祖先元素

7. margin:auto;失效

固定定位 fixed

position:fixed;

相对浏览器窗口定位

z-­index

层级只有定位元素才有

1.z-­index 可以调换两个层的上下位置关系

2.值可以为正，也可以为负，值越大，越在上面 默认值=0

3.只能同级元素对比 你在大楼里面，你自己不能和大楼比谁高！

4.z­-index:只对定位的元素有效，其它元素均无效！

CSS常用选择符

     1. 标签选择符：标签名称

直接以html标签的标签名作为选择符对象；如h1{ font-size:20px;}；主要用于对网页文档中的基础标签进行统一的标准化设定。

     2. id选择符：#id名

以html标签的唯一标识符id属性的值作为对象。html语言中：id属性是html标签的通用属性，但id值的命名是唯一的，不允许重复。在css语言中，#代表后面的名称是id值，id选择符主要用于针对具有唯一性的html对象。

3. class类选择符：.class名

将一组css样式归纳成为一个类，作为css应用的对象。html语言中：class属性是html标签的通用属性，可以定义多个类，类名之间用空格分隔。css语言中：class选择符主要用于需要调用相同css样式的多个html对象。

优先级关系：id选择符>class选择符>标签选择符

id和class的命名规则：

1. id属性和class属性的值命名都为自定义

2. 不允许用数字开头，不允许使用特殊字符

3. 命名最好具有语义化，可使用-或者_来连接词组（主流使用-）

CSS组合选择符

1. 通配选择符：*

适配文档中的所有html对象；用于定义html文档中所有对象的基础样式（消除浏览器默认设置的基础样式）；根据就近原则，要放在css代码的首行；最常见的用法：*{margin:0;padding:0;}  /*消除所有html标签默认存在的内外边距*/

2. 包含选择符：父级对象a 子级对象b

根据html对象的嵌套关系，指定某个父级元素的子级元素样式；选择符对象可以是多重包含，即一层层的包含下去，样式仅作用于最后的内部对象。元素对象之间用空格分隔。

如：div p { color : red ;}  /*div对象中的所有p对象被指定了红色的样式*/

#box p a { color : blue ; }  /*id为box的对象中的p对象中的a对象被指定蓝色样式*/

3. 群组选择符：对象a，对象b，对象c......

将同样的样式用于多个选择符对象，选择符对象之间用逗号隔开。这里的对象并不一定得是标签，可以是class，id等

4. 指定选择符：标签名.class类名

将class类选择符和标签选择符结合在一起使用。主要适用于在使用了某个class类的所有html对象中特别指定某一类标签。如：<h1>和某个<p>标签调用了important这个类，但是只想给调用了important的p对象添加样式时使用。

CSS：float浮动属性

作用：将页面元素浮动起来，使其能够向左或者向右排列；应用：实现页面中布局的左右排版，实现图文环绕的版式效果。

值	说明
left	元素本身向左浮动
right	元素本身向右浮动
none	元素不浮动（默认值）

原理：浮动元素将脱离默认的文档流，漂浮在默认文档流之上。浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止。

特点：1. 对齐方式（不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。）

           2. 一旦元素浮动起来，就可以直接适用CSS盒子模型属性。（行间元素脱离默认文档流的行间限制。）

3. 对内容的影响（尽管浮动元素脱离了默认文档流，但仍然会影响到默认文档流中的盒子里面装的“内容”（图文），这些“内容”会给浮动元素留出占位。盒子还是那么大，但是内容给浮动元素让出了位置。内容为王。）

CSS：clear清除浮动

作用：规定某个元素的某一侧不允许存在浮动元素。

应用 ：清除其他浮动元素对其产生的影响。

原理：设置了clear的元素将不再像前一个浮动元素对齐，换行重新开始。

相对定位

CSS position属性用于指定一个元素在文档中的定位方式。

top ， right ， bottom 和  left 属性则决定了该元素的最终位置

特性

1. 不使元素脱离文档流 文档流：正常元素的流体布局，从上至下 这里有两种说法，一种占文档流自身的位置还在 一种不占文档流确实层级比较高 可以理解成占据自己的位置 同时提高了层级

2.不影响元素本身特性，行内还是行内，块级还是块级

3.层级未设置时，后来居上，后面设置的定位层级在上面。

绝对定位

相对于已经定位的父元素进行定位

特性

1. 完全脱离文档流

2. 行内元素支持宽高

3. 块级元素内容撑开宽高，不会超过定位父级边界的临界点

4. 没有祖先元素则相对于body

5. 一般配合相对定位使用

6. 绝对定位的元素的位置相对于最近的已定位祖先元素

7. margin:auto;失效

固定定位 fixed

position:fixed;

相对浏览器窗口定位

z-­index

层级只有定位元素才有

1.z-­index 可以调换两个层的上下位置关系

2.值可以为正，也可以为负，值越大，越在上面 默认值=0

3.只能同级元素对比 你在大楼里面，你自己不能和大楼比谁高！

4.z­-index:只对定位的元素有效，其它元素均无效！