CSS2 从入门到精通

1. 经常使用的选择器

1. 元素选择器

• 做用：经过元素选择器能够选择指定的元素
• 语法：tag{}

p{
  color: red;
}
h1{
  color: red;
}
复制代码

2. id 选择器

• 做用：经过元素的id属性值选中惟一的一个元素
• 用法: #id{}

#p1{
	font-size: 20px;
}
复制代码

3.类选择器

• 经过元素的class属性值选中一组元素
• 语法：.class{}

.p2{
  color: red;
}
			
.hello{
  font-size: 50px;
}
复制代码

4. 选择器分组

• 经过选择器分组能够同时选中多个选择器对应的元素,简单来讲就是同时为这些选择的元素应用相同的样式。他也称做为 **并集选择器 **就是上面的每个逗号分开的至关于一个集合，那么至关于把他们合并起来到一个集合中只要元素命中其中一条规则就会应用样式。
• 语法：选择器1,选择器2,选择器N{}

#p1 , .p2 , h1{
  background-color: yellow;
}
复制代码

5. 通配选择器_ _

• 他能够用来选中页面中的全部的元素
• 语法：*{}

*{
  color: red;
}
复制代码

6. 交集选择器

• 做用：选择同时知足全部选择器规则的元素，因此也称做为交集选择器，元素必须命中全部的选择条件才能应用样式。下面的例子就至关于必须知足元素名为span而且拥有p3这个类
• 语法：选择器1选择器2选择器N{}

span.p3{
				background-color: yellow;
}
复制代码

7. 后代选择器

• 做用：选中指定元素的指定后代元素，下面的例子就是选择id为d1的span后代，注意后代是不用和祖先元素相邻。
• 语法：祖先元素 后代元素{}

#d1 span{
	color: greenyellow;
}
复制代码

8. 子选择器

• 做用：选中指定父元素的指定子元素,二者必须是相邻的
• 语法：父元素 > 子元素

div > span{
				background-color: yellow;
}
复制代码

Tips: 父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫作兄弟元素

9. 伪类选择器

伪类专门用来表示元素的一种的特殊的状态，好比：访问过的超连接，好比普通的超连接，好比获取焦点的文本框
当咱们须要为处在这些特殊状态的元素设置样式时，就可使用伪类

1. :link 表示普通的连接（没访问过的连接）

a:link{color: yellowgreen;}
复制代码

2. :visited 表示访问过的连接

浏览器是经过历史记录来判断一个连接是否访问过,因为涉及到用户的隐私问题，因此使用visited伪类只能设置字体的颜色

3. :hover伪类表示鼠标移入

4. :active表示的是超连接被点击的状态

5.:focus 光标为得到焦点

6.::selection选中的内容

这个伪类在火狐中须要采用另外一种方式编写::-moz-selection兼容火狐的

p::-moz-selection{background-color: orange;}
复制代码

兼容大部分浏览器的

p::selection{background-color: orange;}
复制代码

10. 伪元素选择器

使用伪元素来表示元素中的一些特殊的位置.

1. :first-letter 内容中的第一个字母

2. :first-line内容的第一行

3.:before表示元素最前边的部分

4. :after表示元素的最后边的部分

通常before和after都须要结合content这个样式一块儿使用， 经过content能够向before或after的位置添加一些内容
:after

11. 属性选择器

• 做用：能够根据元素中的属性或属性值来选取指定元素
• 语法：
  • [属性名] 选取含有指定属性的元素
  • [属性名="属性值"] 选取含有指定属性值的元素
  • [属性名^="属性值"] 选取属性值以指定内容开头的元素
  • [属性名$="属性值"] 选取属性值以指定内容结尾的元素

12. 子元素选择器

1. :first-child 能够选中第一个子元素:

2.last-child 能够选中最后一个子元素

body > p:first-child{background-color: yellow;}p:last-child{background-color: yellow;}
复制代码

3. :nth-child 能够选中任意位置的子元素

该选择器后边能够指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素

p:nth-child(odd){background-color: yellow;}
复制代码

:first-of-type,:last-of-type，:nth-of-type,:first-child这些很是的相似，只不过child，是在全部的子元素中排列而type，是在当前类型的子元素中排列

p:first-of-type{background-color: yellow;}
复制代码

13.兄弟选择器

为挨着的兄弟元素添加样式，其中 + 表示后一个，而 ~ 则表示前一个

span ~ p{
  background-color: yellow;
}
span + p{
  background-color: yellow;
}
复制代码

2. 样式继承

像儿子能够继承父亲的遗产同样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,利用继承，能够将一些基本的样式设置给祖先元素，这样全部的后代元素将会自动继承这些样式。可是并非全部的样式都会被子元素所继承，好比：背景相关的样式都不会被继承 边框相关的样式 定位相关的

3. 样式优先级

优先级的规则：

1. 内联样式 ， 优先级 1000
2. id选择器，优先级 100
3. 类和伪类， 优先级 10
4. 元素选择器，优先级 1
5. 通配* ， 优先级 0
6. 继承的样式，没有优先级
7. 并集选择器的优先级是单独计算
8. 能够在样式的最后，添加一个!important，则此时该样式将会得到一个最高的优先级，将会优先于全部的样式显示甚至超过内联样式，可是在开发中尽可能避免使用!important

4. 长度单位

1.像素 px

像素是咱们在网页中使用的最多的一个单位，一个像素就至关于咱们屏幕中的一个小点，咱们的屏幕实际上就是由这些像素点构成的可是这些像素点，是不能直接看见。不一样显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。

2. 百分比 %

也能够将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变在咱们建立一个自适应的页面时，常用百分比做为单位

3. em

em和百分比相似，它是相对于当前元素的字体大小来计算的 1em = 1font-size 使用em时，当字体大小发生改变时，em也会随之改变当设置字体相关的样式时，常常会使用em

4. 行间距

在CSS并无为咱们提供一个直接设置行间距的方式， 咱们只能经过设置行高来间接的设置行间距，行高越大行间距越大 使用line-height来设置行高 行高相似于咱们上学单线本，单线本是一行一行，线与线之间的距离就是行高， 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。
行间距 = 行高 - 字体大小

经过设置line-height能够间接的设置行高，
能够接收的值：
1.直接就收一个大小
2.能够指定一个百分数，则会相对于字体去计算行高
3.能够直接传一个数值，则行高会设置字体大小相应的倍数

p{
    line-height: 200%;
    line-height: 20px;
    line-height: 2;
}
复制代码

对于单行文原本说，能够将行高设置为和父元素的高度一致， 这样能够是单行文本在父元素中垂直居中

5. 文本样式

1. text-transform能够用来设置文本的大小写

可选值：

• none 默认值，该怎么显示就怎么显示，不作任何处理
• capitalize 单词的首字母大写，经过空格来识别单词
• uppercase 全部的字母都大写
• lowercase 全部的字母都小写
  

2.text-decoration能够用来设置文本的修饰

可选值：

• none：默认值，不添加任何修饰，正常显示
• underline 为文本添加下划线
• overline 为文本添加上划线
• line-through 为文本添加删除线

超连接会默认添加下划线，也就是超连接的text-decoration的默认值是underline若是须要去除超连接的下划线则须要将该样式设置为none

3.letter-spacing能够指定字符间距

4. word-spacing能够设置单词之间的距离

实际上就是设置词与词之间空格的大小

5.text-align用于设置文本的对齐方式

可选值：

• left 默认值，文本靠左对齐
• right ， 文本靠右对齐
• center ， 文本居中对齐
• justify ， 两端对齐经过调整文本之间的空格的大小，来达到一个两端对齐的目的
  

6.text-indent用来设置首行缩进

当给它指定一个正值时，会自动向右侧缩进指定的像素 若是为它指定一个负值，则会向左移动指定的像素, 经过这种方式能够将一些不想显示的文字隐藏起来 这个值通常都会使用em做为单位

6. 盒模型

使用width来设置盒子内容区的宽度，使用height来设置盒子内容区的高度。**width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定。 内联元素不能设置 height 和 width ，若是非要设置必须修改 display 。

1. 为元素设置边框

要为一个元素设置边框必须指定三个样式

1. border-width:边框的宽度

使用border-width能够分别指定四个边框的宽度若是在border-width指定了四个值，则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
若是指定三个值，则三个值会分别设置给 上 左右 下
若是指定两个值，则两个值会分别设置给 上下 左右
若是指定一个值，则四边全都是该值

2.border-color:边框颜色

和宽度同样，color也提供四个方向的样式，能够分别指定颜色

3. border-style:边框的样式

• none，默认值，没有边框
• solid 实线
• dotted 点状边框
• dashed 虚线
• double 双线

2. 内边距（padding）

指的是盒子的内容区与盒子边框之间的距离* 一共有四个方向的内边距,内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距.

3. 外边距

外边距指的是当前盒子与其余盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。因为页面中的元素都是靠左靠上摆放的，因此注意当咱们设置上和左外边距时，会致使盒子自身的位置发生改变。_
margin还能够设置为auto，auto通常只设置给水平方向的margin若是只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值垂直方向外边距若是设置为auto，则外边距默认就是0若是将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可使元素自动在父元素中居中，因此咱们常常将左右外边距设置为auto。

1. 垂直外边距重叠

垂直外边距的重叠在网页中相邻垂直方向的外边距会发生外边距的重叠所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和.
若是父子元素的垂直外边  距相邻 **了，则子元素的外边距会设置给父元素.

2. 如何解决外边距重叠

1. 在两个元素之家加其余元素
2. 添加 border
3. 添加 padding

注意：内联元素是不支持垂直方向的外边距的，其余的都和块级元素相同。

7. 元素展现方式

1. display

将一个内联元素变成块元素， 经过display样式能够修改元素的类型
可选值：

• inline：能够将一个元素做为内联元素显示
• block: 能够将一个元素设置块元素显示
• inline-block：将一个元素转换为行内块元素可使一个元素既有行内元素的特色又有块元素的特色既能够设置宽高，又不会独占一行
• none: 不显示元素，而且元素不会在页面中继续占有位置使用该方式隐藏的元素，不会在页面中显示，而且再也不占据页面的位置
  

2. visibility

能够用来设置元素的隐藏和显示的状态
可选值：

• visible 默认值，元素默认会在页面显示
• hidden 元素会隐藏不显示,使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，可是它的位置会依然保持

3. overflow

子元素默认是存在于父元素的内容区中，
理论上讲子元素的最大能够等于父元素内容区大小
若是子元素的大小超过了父元素的内容区，则超过的大小会在父元素之外的位置显
超出父元素的内容，咱们称为溢出的内容
父元素默认是将溢出内容，在父元素外边显示，
经过overflow能够设置父元素如何处理溢出内容：
可选值：
- visible，默认值，不会对溢出内容作处理，元素会显示
- hidden, 溢出的内容，会被修剪，不会显示
- scroll, 会为父元素添加滚动条，经过拖动滚动条该属性不论内容是否溢出，都会添加水平
- auto，会根据需求自动添加滚动条，须要水平就添加水平须要垂直就添加垂直都不须要就都不加

8. 文档流

文档流文档流处在网页的最底层，它表示的是一个页面中的位置，咱们所建立的元素默认都处在文档流中
元素在文档流中的特色

1.块元素

1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开

2.内联元素

1.内联元素在文档流中只占自身的大小，会默认从左向右排列，若是一行中不足以容纳全部的内联元素，则换到下一行，继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开

9. 浮动

块元素在文档流中默认垂直排列， 若是但愿块元素在页面中水平排列，可使块元素脱离文档流使用float来使元素浮动，从而脱离文档流
可选值：

• none，默认值，元素默认在文档流中排列
• left，元素会当即脱离文档流，向页面的左侧浮动
• right，元素会当即脱离文档流，向页面的右侧浮动

1. 浮动的规则

当为一个元素设置浮动之后（float属性是一个非none的值）， 元素会当即脱离文档流，元素脱离文档流之后，它下边的元素会当即向上移动 元素浮动之后，会尽可能向页面的左上或右上漂浮， 直到遇到父元素的边框或者其余的浮动元素
若是浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
浮动的元素不会超过他上边的兄弟元素，最多最多一边齐。
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围
在文档流中，子元素的宽度默认占父元素的所有当元素设置浮动之后，会彻底脱离文档流.块元素脱离文档流之后，高度和宽度都被内容撑开
    开启span的浮动内联元素脱离文档流之后会变成块元素

2. 浮动后高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。可是当为子元素设置浮动之后，子元素会彻底脱离文档流，此时将会致使子元素没法撑起父元素的高度，致使父元素的高度塌陷。因为父元素的高度塌陷了，则父元素下的全部元素都会向上移动，这样将会致使页面布局混乱。
 因此在开发中必定要避免出现高度塌陷的问题,咱们能够将父元素的高度写死，以免塌陷的问题出现，可是一旦高度写死，父元素的高度将不能自动适应子元素的高度，因此这种方案是不推荐使用的。

3. 解决高度塌陷问题

1. 开启BFC

根据W3C的标准，在页面中元素都一个隐含的属性叫作Block Formatting Context简称BFC，该属性能够设置打开或者关闭，默认是关闭的。当开启元素的BFC之后，元素将会具备以下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素能够包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动使用这种方式开启，虽然能够撑开父元素，可是会致使父元素的宽度丢失并且使用这种方式也会致使下边的元素上移，不能解决问题。这是由于开启浮动的会计元素宽高都是默认被撑起来的，除非自动设置宽高。
2.设置元素绝对定位
3.设置元素为inline-block能够解决问题，可是会致使宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
**推荐方式：将overflow设置为hidden是反作用最小的开启BFC的方式。 **
是在IE6及如下的浏览器中并不支持BFC，因此使用这种方式不能兼容IE6。在IE6中虽然没有BFC，可是具备另外一个隐含的属性叫作hasLayout，该属性的做用和BFC相似，所在IE6浏览器能够经过开hasLayout来解决该问题开启方式不少，咱们直接使用一种反作用最小的：直接将元素的zoom设置为1便可

• zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
• zoom:1表示不放大元素，可是经过该样式能够开启hasLayout
• zoom这个样式，只在IE中支持，其余浏览器都不支持

.parent{
	zoom:1;
  overflow: hidden;
}
复制代码

2. 清除浮动

能够直接在高度塌陷的父元素的最后，添加一个空白的div， 而后在对其进行清除浮动，   因为这个div并无受到浮动元素的影响，因此他应该处在原来的元素在的时候的位置这样就至关于原来的元素还在，因此是能够撑开父元素的高度的，这样能够经过这个空白的div来撑开父元素的 基本没有反作用使用这种方式虽然能够解决问题，可是会在页面中添加多余的结构。

.clear{
				clear: both;
}
复制代码

3. 伪类

经过after伪类，选中父元素的后边能够经过after伪类向元素的最后添加一个空白的块元素，而后对其清除浮动，这样作和添加一个div的原理同样，能够达到一个相同的效果，并且不会在页面中添加多余的div，这是咱们最推荐使用的方式，几乎没有反作用。

.clearfix:after{
				/*添加一个内容*/
				content: "";
				/*转换为一个块元素*/
				display: block;
				/*清除两侧的浮动*/
				clear: both;
			}
复制代码

4. 最佳实践

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
  clear: both;
}
			
.clearfix{
  zoom: 1;
}
复制代码

通过修改后的clearfix是一个多功能的,既能够解决高度塌陷，又能够确保父元素和子元素的垂直外边距不会重叠。子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素 使用空的table标签能够隔离父子元素的外边距，阻止外边距的重叠

4. 清除浮动

因为受到box1浮动的影响，box2总体向上移动了100px
咱们有时但愿清除掉其余元素浮动对当前元素产生的影响，这时可使用
clear能够用来清除其余浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响清除对他影响最大的那个元素的浮动

10. 定位

定位指的就是将指定的元素摆放到页面的任意位置 经过定位能够任意的摆放元素 经过position属性来设置元素的定位
可选值：

• static：默认值，元素没有开启定位
  
• relative：开启元素的相对定位
  
• absolute：开启元素的绝对定位
  
• fixed：开启元素的固定定位（也是绝对定位的一种）

当开启了元素的定位（position属性值是一个非static的值）时， 能够经过left right top bottom四个属性来设置元素的偏移量

• left：元素相对于其定位位置的左侧偏移量
  
• right：元素相对于其定位位置的右侧偏移量
  
• top：元素相对于其定位位置的上边的偏移量
  
• bottom：元素相对于其定位位置下边的偏移量
  

一般偏移量只须要使用两个就能够对一个元素进行定位， 通常选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

1. 相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位

1. 当开启了元素的相对定位之后，而不设置偏移量时，元素不会发生任何变化
2. 相对定位是相对于元素在文档流中原来的位置进行定位
3. 相对定位的元素不会脱离文档流
4. 相对定位会使元素提高一个层级
5. 相对定位不会改变元素的性质，块仍是块，内联仍是内联

2. 绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：

1. 开启绝对定位，会使元素脱离文档流
   
2. 开启绝对定位之后，若是不设置偏移量，则元素的位置不会发生变化
   
3. 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（通常状况，开启了子元素的绝对定位都会同时开启父元素的相对定位）若是全部的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4. 绝对定位会使元素提高一个层级
   
5. 绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开

3.  固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位 固定定位也是一种绝对定位，它的大部分特色都和绝对定位同样 不一样的是： 固定定位永远都会相对于浏览器窗口进行定位 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动IE6不支持固定定位.