CSS基本原理与选择器

原理

优先原则：后解析的内容 会覆盖掉之前解析的内容

1. 同一个选择器内：从上往下执行，解析
2. 同一类型选择器：从上往下执行
3. 不同类型的选择器：从低优先级->高优先级执行（* div class id）
4. 外部样式 内部样式 先合并之后再一起解析，先外部=>内部=>内联
5. 加了important 字段的，最后执行

继承原则：嵌套里面的标签，拥有外部标签的某些样式，子元素可以继承父元素的属性

1. 跟文字相关的文本，样式 才可以被继承
2. 子块级元素的宽度 不被设置的情况下子元素可以继承最接近的父元素的宽度

组合选择器：

1. 分组选择器：如：div,p,ul
2. 嵌套选择器：如：div p (上几级元素为div的p都生效)
3. 子选择器：如： div>p (仅父级元素为div的p都生效)
4. （相邻）同级别选择器：如：div+p (平级元素为div的p都生效)

属性选择器：

• 基本[属性]
• [属性=值]
• [属性~=值]属性中包含这个值的标签生效（多个属性值用空格隔开）
• [属性^=值]属性以这个值开头的标签生效
• [属性$=值]属性以这个值结尾的标签生效

伪元素选择器

我们写的HTML标签内容其实里面默认加入了一些元素，不过一般是看不到的，话不多说，为了直观，直接上例子（左边是HTML，右边是CSS）：

上图的before和after标签就是伪元素，是默认非显示存在的，当手动添加了"before"或者"after"内容之后就可以给选定的标签添加样式了。如：
还有一种，可以指明元素后不需要添加内容，就可以直接对目标元素内容进行操作，如图：

伪类选择器

伪类选择器是CSS中规定的一些属性，有很多种，下面说一下超链接中的：
还有:focus，:first-child，lang（语言）等，常用的是前面几种。

块、行级元素的使用规则

块元素:独立成一行，可以设置宽高，默认宽高100%

1. 文字类块元素：p h1~h6
2. 容器类块元素: div table tr td th form ul li ol dl dt

行元素:不独立成一行,不可以设置宽高，宽高由内容决定

1. a img input strong em del span

特殊字符:文字 br  
元素可以浮动，相对自己的上级元素，左浮动float:left，右浮动float:right

• 元素的定位：
  相对定位（position :relative）：该元素相对于自己原有位置，偏移一定距离。相对的是自己。
  绝对定位（position :absolute）：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要设置了position属性。从最近的父元素开始找，如果没找到，一直找到body位置为止。

盒子模型介绍

一个盒子a里放进去一个更小的盒子b，盒子旁边还有一个c盒子。以a盒子为对象，a和c盒子边框之间的距离就是a的外边距：margin，a和b盒子边框之间的距离就是a的内边距：padding，边框也有厚度：border；
以margin为例，可以设置上下左右外边距的距离，
margin-top：上外边距离
margin-right：右外边距离
margin-bottom：下外边距离
margin-left：左外边距离
也可以有各种简写：直接在margin后面添加像素，按照CSS规定的顺序排列。