目录
一、背景
对于css学习一直停留在大学期间，毕业之后一直从事后端开发(C语言+Java无界面)，一直没有机会深入学习css技术。很多标签在使用时也不规范严谨，甚至是瞎用。最近有点时间，打算花上一两周时间系统学习一下，本篇博客只是记录相关重点知识
二、css选择器
css一大特点就是利用选择器，设置对应容器(元素)样式，选择分为：基本选择器和复合选择器
| 类别 | 种类 | 备注 |
| 基本选择器 | 标签选择器 | 例如： div {color:red;} 、p {color:red;} |
| 类选择器 | 例如：.myfont {font-size:16px;} | |
| id选择器 | 例如： #myfont{font-size:16px;} | |
| 伪类选择器 | 链接伪类选择器:a:link、a:visited、a:hover、a:active（顺序必须是这样） | |
| 结构伪类选择器：E:first-child、E:last-child、E:nth-child(n)、E:nth-last-child(n) | ||
| 目标伪类选择器：E:target，结合锚点方式设置属性 | ||
| 复合选择器 | 交集选择器 | E.class名字{//属性设置}，例如：p.one {}，选择类是one且是p标签的，此选择器不常用 |
| 并集选择器 | 主要用于抽出相同样式代码，各个选择器用逗号分割，这些选择样式是相同的，例如： .classA, #one,div {//属性设置} | |
| 后代选择器 | 用于选择某元素的子元素，用空格分割， 父类元素在前，子类元素在后 | |
| 子元素选择器 | 用于选择直接子元素，即孙子级别不在选择， 用>表示，例如： .classA > p | |
| 属性选择器 | 用方括号进行选择，例如： 1）a[title] { color: red; }，表示选择a中带有属性title | |
| 伪元素选择器 (css3特性) | ::after 在元素内部结束位置创建一个元素，该元素为行内元素且必须要结合content属性使用，本质是创建一个行内元素 | |
| ::before 在元素内部开始位置创建一个元素，该元素为行内元素且必须要结合content属性使用 | ||
| ::selection 用鼠标拖拉选中后，例如：p::first-letter {color:orange;} | ||
| ::first-line 第一行，例如：p::first-line {color:green;} | ||
| ::first-letter 第一个字，例如：p::first-letter {color:red;} |
三、css元素分类
在css中元素分为：块级元素、行内元素、行内块元素
| 常见元素 | 特点 | |
| 块级元素 | div、p、h1~h6、ul、ol、li | 1）总是从新的一行开始 5）p、h1～h6、dt这些标签内不能在放其他块级元素 |
| 行内元素 | a、span、strong、b、em、i、del、s、ins、u、img、input | 1）和相邻行内元素在一行上 注意：img input比较特殊，可以设置宽高，通过margin 0 auto来设置img是无效的，必须将其转成block块元素 |
| 行内块元素 | img、input、td可以设置宽度、高度、对齐属性 | 1）和相邻行内元素（行内块）在一行上，但是之间会有空间缝隙
|
我们可以通过display属性，来改变元素显示模式：
- display:inline 将 块级元素 转成 行内元素
- display:block 将 行内元素 转成 块级元素
- display:inline-block 将块、行内元素 转成 行内块元素
四、CSS三大特性
CSS三大特行包括：层叠性、继承性、优先级
层叠性：一般情况下，如果样式出现出冲突，则按照css书写顺序为准。
继承性：子标签会继承父标签的某些样式，如字体、字号、颜色可以继承而边框、外边距、内边距、定位、元素高度、浮动等属性不可继承。
优先级：和权重挂钩，权重越大优先级越高
css特殊性：
权重表示：0,0,0,0 （从左往右权重越小）
| 选择器 | 权重 |
| 标签选择器 | 0,0,0,1 |
| 类、伪类选择器 | 0,0,1,0 |
| #id选择器 | 0,1,0,0 |
| 内嵌样式，即在标签中增加style="..." | 1,0,0,0 |
| !import， 例如： div {color: orange!import;} 优先执行 | 最高 |
权重叠加：如下所示，最终显示red颜色，
<style>
ul li {/* ul权重 0,0,0,1 li权重 0,0,0,1 => 最终叠加后的权重 0,0,0,2*/
color:red;
}
li {/* li权重 0,0,0,1 */
color:green;
}
</style>继承的权重为0：
<style>
li {/* 权重 0,0,0,1 */
color:orange;
}
.daohang {/* 权重 0,0,1,0 */
color:red;
}
</style>
<nav class="daohang">
<ul>
<li>继承的权重为0--最后为orange</li>
</ul>
</nav>五、CSS三大模块
CSS的三大模块包含：盒子模型、浮动、定位，这部分是无论如何都必须要掌握的。
5.1、盒子模型
网页布局就是摆盒子过程，盒子三元素：边框(border)、内边距(padding)、外边距(margin)。
内边距：只盒子里的内容与边框的距离，可以通过padding-top、padding-right、padding-bottom、padding-left来设置
外边距：盒子的边框与其他盒子的边框距离，可以通过margin-top、margin-right、margin-bottom、margin-left来设置。行内元素（例如span）只有左右外边距，没有上下外边距。内边距上下是有问题的。因此行内元素不建议设置上下内外边距。
盒子空间尺寸：
高度 = content height + padding + border + margin 宽度 = content width + padding + border + margin
内盒子尺寸：
高度 = content height + padding + border 宽度 = content width + padding + border
注：一个盒子的没有指定宽度\高度 或者 子盒子继承父盒子的宽度\高度，则padding不会影响本盒子的大小
注：我们在使用ul标签的时候，默认情况下ul有内外边距，因此我们经常将内外边距清0
5.2、浮动-float
最早浮动float，是用来实现文字环绕效果（例如：文字环绕图片），我们只需要给img增加float:right（float:left）即可。但是后来float也用于将任何盒子（块级元素，例如div）在一行排列显示，因此float常用于网页布局。
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
| float取值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动 |
浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动。
浮动使用方式
我们在使用浮动的时候，往往需要定义一个标准流的盒子（即没有float属性）作为父级元素，在父级元素内添加我们的浮动元素，这样能保证后面元素不会被被覆盖。
浮动特性
1、浮动的元素总是找离它最近的父元素进行对其并且不会超过内边距。
2、一个父盒子里面的子盒子，如果想要子盒子在一行显示，必须将所有子盒子设置为浮动
3、设置float属性的元素，具有行内块特性，例如div（块级元素）添加了float，可以在一行显示多个div，再或者span元素添加了float，可以对其进行宽度和高度的设置。
清除浮动
某些场景，父级元素在没有设置高度场景下，子级元素浮动会引起一些问题。例如如下代码：
<style>
.father {/* 父级元素 不设置高度 */
border: 1px solid red;
}
.damao {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.ermao {
width: 150px;
height: 100px;
background-color: purple;
float: left;
}
.xiaoming {
width: 300px;
height: 200px;
background-color: black;
}
</style>
<div class="father">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="xiaoming">小明</div>div小明，就会出现被覆盖现象，例如如下：
解决方法有两种：
1）给父级元素指定高度，但是有些时候不方便给父级元素高度，例如新闻页，无法提前获知新闻内容大小。
2） 清除浮动clear属性 -- 推荐方法
| clear取值 | 说明 |
| left | 清除左侧浮动的影响 |
| right | 清除右侧浮动的影响 |
| both | 同时清除左右两侧浮动的影响，推荐使用这个 |
清除浮动4种方式
1）额外标签法：在最后一个浮动元素后面添加一个空的标签，例如<div style="clear:both"></div>，不推荐这种方式
2）父级元素添加overflow属性， .father { overflow:hidden; /* 触发BFC，BFC可以清除浮动 */ }
3）使用after伪元素清除浮动，实际是额外标签法的升级版本，具体代码如下：
<style>
.clearfix:after {
content: "."; /* 内容随意 尽量不空，避免兼容器问题 */
display: block; /* 转换为块级元素 */
height: 0; /* 设置高度为0 */
visibility: hidden; /* 隐藏盒子，相当于隐藏 content内容 */
clear: both; /* 清除浮动 */
}
.clearfix {/* 解决兼容器 ie6 ie7 处理方式 */
/**
* 1、*代表ie6/ie7能识别的特殊符号 带有这个*的属性 只有ie6/ie7才执行
* 2、zoom就是ie6/ie7 清除浮动的方法
*/
*zoom: 1;
}
</style>
<!-- 父级元素引用 clearfix类 -->
<div class="father clearfix">
...
</div>4）使用before和after双伪元素清除浮动 -- 推荐方法
.clearfix:before, .clearfix:after {
content: ""; /* 内容为空 */
display: table; /* 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 */
}
.clearfix:after {
clear: both;
}
.clearfix {/* 解决兼容器 ie6 ie7 处理方式 */
/**
* 1、*代表ie6/ie7能识别的特殊符号 带有这个*的属性 只有ie6/ie7才执行
* 2、zoom就是ie6/ie7 清除浮动的方法
*/
*zoom: 1;
}5.3、定位
元素的定位属性主要包括边偏移和定位模式两部分，只有同时设置这两个属性才能起到定位的效果，即完整定位=边偏移+定位模式。
5.3.1、边偏移
| 边偏移属性 | 描述 | 备注 |
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 | 在同一个元素中，两者只能出现一个 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 | |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 | 在同一个元素中，两者只能出现一个 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
使用：top:100px; left:30px;
5.3.2、定位模式
所谓定位模式实际是定位类型，在CSS中使用position属性对其进行定位设置，语法格式：选择器 {position:属性值}，position属性值如下：
| 取值 | 描述 | 备注 |
| static | 静态定位，默认方式。 | 边偏移对该模式是无效的，所以一般用于清除定位的。 |
| relative | 相对定位，相对于其原文档流的位置进行定位 | 每次移动都以自己的左上角为起点，开始移动。注意：通过它改变位置，原来占有的位置继续占有。即其他元素不能占用空缺位置，相对定位不脱离标准流，如图5-1所示。 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 | 绝对定位是脱离标准流的，不占有原有位置，原有位置会被其他元素替补，如图5-2所示 |
5.3.2.1、相对定位模式
<style>
.father {
background-color: black;
width: 300px;
height: 400px;
}
.father div {
width: 100px;
height: 100px;
background-color: yellow;
}
.child2 {
top:100px;
left:150px;
position: relative;/* 以自己为左上角为基准点 自我为核心模式 占坑不拉屎角色 */
}
</style>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>
<div class="child3">child3</div>
</div>
5.3.2.2、绝对定位模式
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 130px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;/* 给大儿子 设置定位*/
top: 30px;
left: 30px;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
在absolute模式（绝对定位）下，有两种场景：
1）父级元素没有定位，子元素有定位，则子元素定位以浏览器左上角为基准点
2）父级元素有定位（例如position=relative、position=absolute），子元素有定位，则子元素定位以父元素左上角为基准点
绝对模式下如何让盒子水平居中、垂直居中：
注意：加了绝对定位的盒子，在使用"margin X auto" 将无效，不能使其水平居中。
可以使用如下算法进行设置，可以达到水平、垂直居中：以水平居中为例：
1、父元素设置相对定位：position:relative; 子元素设置绝对定位：position:absolute;
2、子元素left值等于元素的width的一半，例如父元素width:800px， 那么left等于400px；也可以设置为left:50%
3、子元素设置margin-left为负值，且数值为子元素width的一半，例如子元素width:100px， 那么margin-left:-50px;
或者使用transform: translate(-50%); 这里的50%是自己的width的一半，这样能够解决width不是偶数场景，免去计算过程
总结：
1） 浮动float的主要目的是将多个块级元素在一行显示，
定位主要是移动位置，让盒子到我们想要位置上。
2）相对定位：占有位置，不脱标准流
绝对定位：不占有位置，脱离标准流
3）子绝父相：在网页中我们通常这样使用定位，子元素用绝对定位，父元素用相对定位，即为子绝父相。
5.3.2.3、固定定位模式
固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有三点：
1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱离标准流，不占有位置（其他盒子会替补到遗留出的位置），不随着滚动条滚动。
3. 固定定位的盒子一定要指定宽和高，除非由内容自动撑开
5.4 定位总结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 | 备注 |
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 | |
| 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） | |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） | 默认转成行内块元素 |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） | 默认转成行内块元素 |
我们可以通过z-index指定叠放次序，数值越大，越在上层显示。叠放次序有点像PS中图层概念。z-index只有在相对定位、绝对定位和固定定位下有作用，其他场景均无效。
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
