引入到HTML
<link rel="stylesheet" type="text/css" href="css/style.css"/>
常用选择器
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
- 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素叫做兄弟元素
元素选择器
- 作用：通过元素选择器可以选则页面中的所有指定元素
- 语法：标签名 {}
p{
color: red;
}
h1{
color: red;
}
id选择器
- 通过元素的id属性值选中唯一的一个元素
- 语法：#id属性值 {}
#p1{
font-size: 20px;
}
类选择器
- 通过元素的class属性值选中一组元素
- 语法：.class属性值{}
.p2{
color: red;
}
.hello{
font-size: 50px;
}
选择器分组(并集选择器)
- 通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器1,选择器2,选择器N{}
#p1 , .p2 , h1{
background-color: yellow;
}
复合选择器（交集选择器）
- 作用：可以选中同时满足多个选择器的元素
- 语法：选择器1选择器2选择器N{}
span.p3{
background-color: yellow;
}
后代元素选择器
- 作用：选中指定元素的指定后代元素
- 语法：祖先元素 （空格）后代元素{}
#d1 span{
color: greenyellow;
}
子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法：父元素 > 子元素
#head > span{
background-color: yellow;
}
:first-child 可以选中第一个子元素:last-child 可以选中最后一个子元素:nth-child可以选中任意位置的子元素,该选择器后边可以指定一个参数，指定要选中第几个子元素,even 表示偶数位置的子元素,odd 表示奇数位置的子元素:first-of-type在当前类型的子元素中排列:last-of-type:nth-of-type
body > p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
p:nth-child(odd){
background-color: yellow;
}
伪类选择器
- 伪类专门用来表示元素的一种的特殊的状态
:link表示普通的链接（没访问过的链接）:visited表示访问过的链接,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色:hover表示鼠标移入的状态,也可以为其他元素设置:active表示的是超链接被点击的状态,也可以为其他元素设置::selection给选中的内容使用样式p:first-letter为p中第一个字符来设置一个特殊的样式p:first-line为p中的第一行设置一个特殊的样式:before表示元素最前边的部分:after表示元素的最后边的部分- 一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容
p:before {
content:"我会出现在整个段落的最前边";
color: red;
}
p:after {
content:"我会出现在整个段落的最后边";
color: orange;
}
- 否定伪类：可以从已选中的元素中剔除出某些元素
- 语法：:not(选择器)
p:not(.hello){
background-color: yellow;
}
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
属性选择器
- 作用：可以根据元素中的属性或属性值来选取指定元素
- [属性名] 选取含有指定属性的元素
p[title]{
background-color: yellow;
}
- [属性名=”属性值”] 选取含有指定属性值的元素
p[title="hello"]{
background-color: yellow;
}
- [属性名^=”属性值”] 选取属性值以指定内容开头的元素
p[title^="ab"]{
background-color: yellow;
}
- [属性名$=”属性值”] 选取属性值以指定内容结尾的元素
p[title$="c"]{
background-color: yellow;
}
- [属性名*=”属性值”] 选取属性值以包含指定内容的元素
p[title*="c"]{
background-color: yellow;
}
兄弟元素选择器
- 作用：可以选中一个元素后紧挨着的指定的兄弟元素
- 语法：前一个 + 后一个
span + p{
background-color: yellow;
}
- 选中后边的所有兄弟元素
- 语法：前一个 ~ 后边所有
span ~ p{
background-color: yellow;
}
选择器的优先级
-
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定,优先级高的优先显示。
-
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。并集选择器的优先级是单独计算。可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
-
优先级的规则: 内联样式 ， 优先级 1000 id选择器，优先级 100 类和伪类， 优先级 10 元素选择器，优先级 1 通配* ， 优先级 0 继承的样式，没有优先级
-
涉及到a的伪类一共有四个：而这四个选择器的优先级是一样的。定义顺序如下
:link:visited:hover:active
单位
长度单位
-
像素 px
一个像素就相当于我们屏幕中的一个小点
-
百分比 %
根据其父元素的样式来计算该值
使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
-
em
em和百分比类似，它是相对于当前元素的字体大小来计算的
1em = 1font-size
使用em时，当字体大小发生改变时，em也会随之改变
当设置字体相关的样式时，经常会使用em
颜色单位
/*
* 颜色单位：
* 在CSS可以直接使用颜色的单词来表示不同的颜色
* 红色：red
* 蓝色：blue
* 绿色：green
* 也可以使用RGB值来表示不同的颜色
* - 所谓的RGB值指的是通过Red Green Blue三元色，
* 通过这三种颜色的不同的浓度，来表示出不同的颜色
* - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
* - 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
* 使用百分数最终也会转换为0-255之间的数
* 0%表示0
* 100%表示255
* 也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
* 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
* 每组表示一个颜色 ,第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围是00-ff
* 第三组表示蓝色的浓度，范围00-ff
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中255
* 红色：
* #ff0000
* 像这种两位两位重复的颜色，可以简写
* 比如：#ff0000 可以写成 #f00
* #abc #aabbcc
*
*/
字体样式
-
color:设置字体颜色
-
font-size：设置文字的大小,浏览器中一般默认的文字大小都是16px
-
font-family：指定文字的字体，该样式可以同时指定多个字体，多个字体之间使用,分开
-
font-style：用来设置文字的斜体。normal，默认值，文字正常显示；italic 文字会以斜体显示；oblique 文字会以倾斜的效果显示
-
font-weight：设置文本的加粗效果。normal，默认值，文字正常显示；bold，文字加粗显示
-
font-variant：设置小型大写字母。normal，默认值，文字正常显示；small-caps 文本以小型大写字母显示
-
line-height：设置行高来间接的设置行间距，行高越大行间距越大。行间距 = 行高 - 字体大小
对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中
-
text-transform：用来设置文本的大小写
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
-
text-decoration：用来设置文本的修饰
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline，如果需要去除超链接的下划线则需要将该样式设置为none
-
letter-spacing：可以指定字符间距
-
word-spacing：可以设置单词之间的距离
-
text-align：用于设置文本的对齐方式
left 默认值，文本靠左对齐
right ， 文本靠右对齐
center ， 文本居中对齐
justify ， 两端对齐
-
text-indent：用来设置首行缩进
盒子模型
- 使用width来设置盒子内容区的宽度，使用height来设置盒子内容区的高度。width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定
边框
-
border-width:边框的宽度
指定了四个值，则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
指定三个值，则三个值会分别设置给 上 左右 下
指定两个值，则两个值会分别设置给 上下 左右
指定一个值，则四边全都是该值
CSS中还提供了四个border-xxx-width，xxx的值可能是top right bottom left
-
border-color:边框颜色
-
border-style:边框的样式
none，默认值，没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线
内边距
- 内边距（padding），指的是盒子的内容区与盒子边框之间的距离
- 可以通过：padding-top，padding-right，padding-bottom，padding-left来设置四个方向的内边距
- 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,盒子的大小由内容区、内边距和边框共同决定
外边距
- 外边距（margin）指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。
- 盒子有四个方向的外边距：margin-top，margin-right，margin-bottom，margin-left
- 外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
- 由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置
- margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只指定左外边距或右外边距的margin为auto则会将外边距设置为最大值。垂直方向外边距如果设置为auto则外边距默认就是0。如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
- 垂直外边距的重叠：在网页中相邻的垂直方向的外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
- 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
- 使用空的table标签可以隔离父子元素的外边距，给父元素设置可以阻止外边距的重叠
.box1:before{
content: "";
/*
* display:table可以将一个元素设置为表格显示
*/
display: table;
}
<div class="box1 clearfix">
<div class="box2"></div>
</div>
经过修改后的clearfix是一个多功能的,既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
内联元素盒子
- 内联元素不能设置width和height
- 内联元素可以设置水平方向的内边距
- 内联元素可以设置垂直方向内边距，但是不会影响页面的布局
- 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
- 内联元素支持水平方向的外边距，内联元素不支持垂直外边距
- 水平方向的相邻外边距不会重叠，而是求和
默认样式
- 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。清除浏览器的默认样式
*{
margin: 0;
padding: 0;
}
display和visibility
-
通过display样式可以修改元素的类型
inline：可以将一个元素作为内联元素显示
block: 可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none: 不显示元素，并且元素不会在页面中继续占有位置
-
visibility：可以用来设置元素的隐藏和显示的状态
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏不显示，隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持
overflow
-
通过overflow可以设置父元素如何处理溢出内容
-
子元素默认是存在于父元素的内容区中，论上讲子元素的最大可以等于父元素内容区大小，如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容，父元素默认是将溢出内容，在父元素外边显示
-
visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
hidden, 溢出的内容，会被修剪，不会显示
scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容，该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
auto，会根据需求自动添加滚动条
文档流
- 文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
- 块元素 1.块元素在文档流中会独占一行，块元素会自上向下排列。 2.块元素在文档流中默认宽度是父元素的100% 3.块元素在文档流中的高度默认被内容撑开
- 内联元素 1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。 2.在文档流中，内联元素的宽度和高度默认都被内容撑开
- 当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
浮动
-
使用float来使元素浮动，从而脱离文档流
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
-
当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动，元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素，浮动的元素不会超过他上边的兄弟元素，最多一边齐
-
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
-
当元素设置浮动以后，会完全脱离文档流
块元素脱离文档流以后，高度和宽度都被内容撑开
内联元素脱离文档流以后会变成块元素
清除浮动
-
clear可以用来清除其他浮动元素对当前元素的影响
-
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动
高度塌陷
- 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
解决方式一
-
根据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，但是具有另一个隐含的属性叫做hasLayout，直接将元素的zoom设置为1即可，zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1;
overflow: hidden;
解决方式二
- 可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
- 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
<div class="box1">
<div class="box2"></div>
<div class="clear" style="clear:both;"></div>
</div>
解决方式三
- 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
<div class="box1 clearfix">
<div class="box2"></div>
</div>
定位
-
定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素
-
通过position属性来设置元素的定位
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
相对定位
-
当元素的position属性设置为relative时，则开启了元素的相对定位
-
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
-
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
-
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
绝对定位
-
当position属性值设置为absolute时，则开启了元素的绝对定位
-
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
固定定位
-
当元素的position属性设置fixed时，则开启了元素的固定定位
-
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
-
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动（比如广告）
IE6不支持固定定位
层级
- 如果定位元素的层级是一样，则下边的元素会盖住上边的
- 通过z-index属性可以用来设置元素的层级，可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
- 对于没有开启定位的元素不能使用z-index
- 父元素的层级再高，也不会盖住子元素
背景
透明
-
opacity可以用来设置元素背景的透明，它需要一个0-1之间的值
-
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
-
opacity属性在IE8及以下的浏览器中不支持
图片
-
使用background-image来设置背景图片
-
语法：background-image:url(相对路径);
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
-
background-repeat用于设置背景图片的重复方式
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat ，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
-
通过background-position可以调整背景图片在元素中的位置
可以使用 top right left bottom center中的两个值指定一个背景图片的位置
top left 左上，bottom right 右下，如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量
-
background-attachment用来设置背景图片是否随页面一起滚动
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动