文章目录
## css基础
css 基本认识
- CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。也会称之为 CSS 样式表或级联样式表。
- CSS 是也是一种标记语言。
- HTML 主要做结构,显示元素内容；CSS 美化 HTML ,布局网页。
1.css语法基本结构
选择器 {
声明1；（属性：值；）
声明2；（属性：值；）
...
}
-
属性名，属性值关键字全部使用小写字母。
-
css声明后加“;”，表示语句结束。
-
CSS的最后一条声明后的“;”可写可不写，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上。
-
CSS 做了两件事：
①找到标签。 选择器（选对人）。
②设置这些标签的样式，比如颜色为红色（做对事）。
CSS 的注释： CSS 中的注释以“ /* ”开头，以“ */ ”结尾。
/* 需要注释的内容 */
2.css引入的三种方式
1.行内样式（写在标签上的样式）（一般不用）
<h1 style="color:red;">xxx</h1>
2.内部样式（写在head标签中） （推荐使用）
<style>
h1{color: green; }
</style>
3.外部样式link （在 head 标签中引入外部css文件，可以多个网页文件共用）（强烈推荐使用）
<link href="css文件路径" rel="stylesheet" type="text/css" />
rel="stylesheet" type="text/css"
优先级：行内样式>内部样式表>外部样式表 （就近原则）
3.css基本选择器
选择器(选择符)就是根据不同需求选择不同标签用的。
标签选择器：
标签名 {
xxx;
}
类选择器：
① 标签加属性 class <div class="类名"></div>
② .类名 {
xxx
}
(用标签的类名写选择器注意加点“.”)
Id选择器：
① 标签加属性 id <div id="id名"></div>
② #id名 {
xxx
}
(用标签的id名写选择器注意加点“#”)
通配符选择器：
通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）
特殊情况才使用,如清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}
优先级：
id选择器>类选择器>标签选择器
选择器命名要求：
①可以理解为给这个标签起了一个名字，来表示。
② 长名称或词组可以使用中横线来为选择器命名。
③ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
④命名要有意义，尽量使别人一眼就知道这个类名的目的。
⑤参考命名神器网站：https://unbug.github.io/codelf/
css选择器高级使用：
多类名选择器
我们可以给一个标签指定多个类名，从而达到更多的选择目的。简单理解就是一个标签有多个名字。
多类名使用方式：
-
在标签class 属性中写 多个类名 。
-
多个类名中间必须用空格分开。
-
这个标签就可以分别具有这些类名的样式。
并集选择器
- 并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。
- 并集选择器是各选择器通过英文逗号（,）连接而成，逗号可以理解为和的意思。
- 任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2 { 样式声明 }
如：ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
链接伪类选择器
- 链接伪类选择器注意事项
- 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
- 记忆法：love hate 或者 lv 包包 hao 。
- 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
input:focus {
background-color:yellow;
}
4.CSS高级选择器（css3新增）
层次选择器
| 选择器 | 类 型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E |
| E:last-child | 作为父元素的最后一个子元素的元素E |
| E F:nth-child(n) | 选择父级元素E的第n个子元素F， （n可以是1、2、3），n或者为关键字 ：even（偶数）、odd(奇数) |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
- E F:nth-child(n)和E F:nth-of-type(n)区别：
- E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
- E F:nth-child(n)在父级里从一个元素开始查找，不分类型
属性选择器
| 属性选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 |
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择器 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before 和 after 创建一个元素，但是属于行内元素。
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
- 语法： element::before {}。
- before 和 after 必须有 content 属性。
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。
- 伪元素选择器和标签选择器一样，权重为 1。
案例
伪元素字体图标:
p::before {
position: absolute;
right: 20px; top: 10px; content: '\e91e'; font-size: 20px;
}
仿土豆效果:
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
display: block; /* 而是显示元素 */
}
5.css文本样式
5.1字体系列
font-family：字体类型
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
-
各种字体之间必须使用英文状态下的逗号隔开
-
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
-
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
-
最常见的几个字体：
body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
font-size:字体大小
单位： ① px
② em(em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元 素的 1 个文字大小。)
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给 body 指定整个页面文字的大小
font-weight:字体粗细
值：①数字：（100~900）不要带单位 （400是正常 700是粗体 大于700是更粗 小于400是细体）数字不要带单位
②单词： lighter（更细）、 normal（默认）、 bold（加粗）、 bolder（更粗）
font-style:字体样式
值：normal(默认，正常的意思) ，italic(倾斜，字体的倾斜属性) ，oblique(强制字体倾斜)
合写：font: 风格 粗细 大小 类型；（风格粗、大小雷）注意：不能更换顺序,注意中间是空格。
body {
font: font-style font-weight font-size/line-height font-family;
}
5.2CSS 文本属性
文字颜色
div {
color: red;
}
值：①单词（red、green…）
②16进制颜色码（#ff00ff） 十六进制码(1,2,3,4,5,6,7,8,9,0,A,B,C,D,E,F)
③rgb(红色值,绿色值,蓝色值) 三个颜色值的范围都是 0~255
④rgba(红色值,绿色值,蓝色值,透明值) 三个颜色值的范围都是 0~255 透明值是 0~1
⑤transparent 透明
对齐文本
text-align:文本水平位置
值： left 左、center 中间、right 右 、 justify 两端对齐文本
div {
text-align: center;
}
小妙招： text-align 可以设置行内元素在父容器中的位置。
文本缩进
text-indent:段落的首行缩进
值的单位： px、em
行高
line-height:行高
（注意:不是文字的高度，是上间距+文字高度+下间距）–测量方式：上行文字顶部到下行文字顶部
值的单位：px
小妙招：单行文字垂直居中 ：让文字的行高（line-height）与所在盒子高度(height)相同
装饰文本
text-decoration:文字装饰
值： none （没有装饰线）
underline (下划线)
overline(上划线)
line-through(删除线)
div {
text-decoration：underline；
}
小妙招：超链接去除下划线用（text-decoration:none;）
单行文字与图像中间对齐
vertical-align:middle; (值：top 顶部 middle中间 bottom 底部)
注意：这个属性加在图像标签上。
文本阴影
text-shadow:水平位移（像素，可正可负） 垂直位移（像素，可正可负） 模糊半径（像素） 阴影颜色；
注意：中间用空格隔开
6.列表样式
-
list-style(常用)
值 说明 语法示例 none 无标记符号 list-style-type:none; disc 实心圆，默认类型 list-style-type:disc; circle 空心圆 list-style-type:circle; square 实心正方形 list-style-type:square; decimal 数字 list-style-type:decimal
li {
list-style:none; /*去除列表前面的小黑点*/
}
- list-style-type
- list-style-image
- list-style-position
7.背景
7.1 背景颜色
background-color: 值同color 的一样。
7.2背景图像
背景图像引入：
background-image:url(“背景图像路径”)；
背景图像重复：
background-repeat:
值：①repeat;(默认水平、垂直平铺)
②no-repeat;(不平铺)
③repeat-x;(水平平铺)
④repeat-y;(垂直平铺)
背景图像位置：
background-position:
值：① 水平像素 垂直像素；
② n%（水平百分比） n%（垂直百分比）；
③ left、center、right(水平位置) top、center、bottom(垂直位置);
注意：两个值中间用空格隔开，一个值只表示水平方向。
背景图像固定（背景附着）：
可以制作视差滚动的效果：
background-attachment : scroll | fixed；
scroll ：背景图像随着对象内容滚动
fixed：背景图像固定
背景简写：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
背景图片的大小：
background-size:
值：①auto;(默认图像大小)
②n%;(背景图像宽度占据所在盒子的宽度百分比)
③cover;(图片等比例放大至所在盒子大小)
④contain;(图片等比例缩小至所在盒子大小)
背景渐变：
线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等。
background-image:linear-gradient(渐变方向，渐变颜色1，渐变颜色2，渐变颜色3...);
方向：to left(到左边)
to right(到右边)
to top(到顶部)
to bottom(到底部)
注意：小括号内词组用逗号隔开；
径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。
- 默认情况下，渐变的中心是center（表示在中心），渐变的形状是ellipse（表示椭圆形），变天的大小是farthest-corner（表示到最远的角落）。
- 也可以指定渐变中心、形状（圆形或椭圆形）、大小。
radial-gradient(圆心位置 角度[单位为deg] 径向渐变的形状[“circle”和“ellipse”] 渐变的起止颜色 )
background: radial-gradient(#f00,#ff0,#0f0);
渐变兼容前缀：
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
8.盒子模型
页中的标签都可以看做是盒子，盒子包括:
（网页元素、内边距（padding）、边框（border）、外边距（margin））(从里面----->外边)
8.1边框
盒子模型边框属性：
border-color(边框颜色)
分开写：
border-top-color(顶部边框):值和color一样。
border-right-color(右边边框)：值；
border-bottom-color(下边边框)：值；
border-left-color(左边边框):值;
合写：
border-color: 1个值（上、右、下、左颜色一样）；
border-color: 值1（上下一样颜色） 值2（左右颜色一样）；
border-color: 值1（上颜色） 值2（左右颜色一样） 值3（下颜色）；
border-color: 值1（上） 值2（右） 值3（下） 值4（左）；
border-width(边框粗细)
值是像素单位。 (单独写和合写规则和 border-color 一样)
分开写：
border-top-width(顶部边框):值。
border-right-width(右边边框)：值；
border-bottom-width(下边边框)：值；
border-left-width(左边边框):值;
合写：
border-width：1个值（上、右、下、左一样）；
border-width：值1（上下一样） 值2（左右一样）；
border-width：值1（上） 值2（左右一样） 值3（下）；
border-width：值1（上） 值2（右） 值3（下） 值4（左）；
border-style(边框风格)
(分开写和合写规则同上)
值：none;(无)
hidden;(隐藏)
dotted;(点状虚线)
dashed;(虚线)
solid;(实线)
double;(双实线)
border边框简写：
border:边框粗细 边框风格 边框颜色；（没有顺序）
border: 1px solid red;
border-top（顶边框合写）:值和border一样。
border-right（右边框合写）:值和border一样。
border-bottom（底边框合写）:值和border一样。
border-left（左边框合写）:值和border一样。
8.2表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse:collapse; /*collapse 合并,表示相邻边框合并在一起*/
8.3内边距：
padding:（盒子内容与边框之间的距离）
值 px;
padding-top(顶部外边距):值 px;
padding-right（右侧外边距）：值 px;
padding-bottom（底部外边距）：值 px;
padding-left（左侧外边距）：值 px;
注意：内边距会影响盒子的宽度和高度。
小妙招： 导航条文字个数不一样，但是文字间隔保持一致。
做法：不给各个盒子宽度，把各个盒子内边距（padding）值设置一样。
8.4外边距
margin:
值 px;
margin-top(顶部外边距):值 px;
margin-right（右侧外边距）：值 px;
margin-bottom（底部外边距）：值 px;
margin-left（左侧外边距）：值 px;
小妙招： 让行级盒子水平居中，加代码：
margin:0 auto;
注意：网页居中对齐的必要条件
①行级盒子
②盒子必须指定了宽度（width）。
小妙招： 行内盒子和行内块盒子 水平居中
text-align:center;
8.5外边距合并问题
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。 主要有两种情况:
-
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的
较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加 margin 值。
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌 陷较大的外边距值。
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加overflow:hidden。
④浮动、固定，绝对定位的盒子不会有塌陷。
8.6盒子类型
box-sizing(盒子类型设置):
值： content-box；内容盒子：宽度和高度是中间内容的宽度和高度 （默认）
border-box; 边框盒子：宽度和高度是中间内容+内边距+边框
盒子模型的总尺寸:
- 盒子模型总尺寸=border(上、下、左、右)+padding(上、下、左、右)+margin(上、下、左、右)+内容宽度
- 注意：width(宽度)、height(高度)不是盒子的最终尺寸。
8.7圆角边框属性
border-radius:
值： 像素 px或百分比。
值1（四个角）
值1（左上、右下 对角） 值2（右上、左下 对角）
值1 （左上） 值2（右上、左下对角） 值3（右下）
值1（左上） 值2（右上）值3（右下）值4（左下） 顺时针方向
小妙招：圆形制作
①盒子是正方形
②border-radius:50%；
8.8 盒子阴影（CSS3 新增）
box-shadow: 内阴影可选（inset） 水平位移（像素，可正可负） 垂直位移（像素，可正可负） 模糊半径（像素） 阴影颜色；
注意：中间用空格隔开 外阴影的话不用写outset。
盒子四条边框阴影效果，属性值中间用逗号分隔。（添加多组）如下
box-shadow: 10px 10px 10px black, -10px -10px 10px black;
盒子四条边没有缺角阴影效果：（0偏移）
box-shadow: 0px 0px 10px black;
9.元素的显示模式和转换
9.1元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
网页中有三种：
- 行内盒子（内联元素）
- 行级盒子（块元素）
- 行内块盒子
1.行内盒子：
①多个可以在同一行，但是有间隙。（标签中间没有空格和换行就没有间隙）。
②设置宽度和高度都不管用。
③默认宽度和高度是中间内容的宽度和高度。
④行内元素只能容纳文本或其他行内元素。（不能放块元素（行级盒子））
常见标签：
<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>
注意： a链接里面不能再放链接,a 链接如果要放块元素，要转为块级模式。
2.行级盒子（块盒子）：
①单独占一行。
②可以设置宽度和高度，外边距以及内边距。
③默认高度是中间内容的高度，宽度是父元素的100%；
④块盒子中间可以放块盒子也能放行内盒子。
常见标签：
<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>
3.行内块盒子：
①可以多个在一行，但是会有间隙。（行内盒子特点）
②默认宽度高度是中间内容的宽度高度；（行内盒子特点）
③可以设置宽度和高度，外边距以及内边距。（块元素特点）
常见标签：
<img />、<input />、<td>
9.2元素显示模式转换
元素的显示模式的设置：
display:
值： block;(块盒子、行级盒子)
inline;(行内盒子)
inline-block;(行内块盒子)
none;(默认，不显示)
小妙招 ：如何让块盒子处于同一行？
display:inline-block;// 转为行内块盒子，方便调整宽度高度。
注意： 盒子变为行内块盒子有间隙，不好控制。推荐使用浮动。
小妙招： 如何清除行内盒子和行内块盒子的间隙？
方式①：标签中间没有空格和换行就没有间隙。（标签多的时候，影响阅读，不推荐）
方式②：把元素所在的父盒子 font-size:0; 然后重新设置子盒子的 font-size（文字大小）。
10.浮动
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)
- 普通流（标准流）
- 浮动
- 定位
浮动： 创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘元素浮起来了。
float:
值： left;
right；
none;(默认不浮动)
浮动的特性：
-
浮动后脱离标准文档流（脱标），原来位置不保留，但是还在文档流中（字围效果）。
-
统一向一个方向浮动的盒子会顶部对齐，盒子之间没有间隙，排在同一行；如果一行放不下，自动换行。 （如：float：left;）
-
浮动后的盒子会有行内块的特点（能设宽度高度边框边距、一行显示多个、默认高度由内容决定）
但是，没有间隙。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
-
浮动元素经常和标准流父级搭配使用，先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧。
-
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动（一浮动，全浮动）
-
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
网页布局第二准侧：先设置盒子的大小, 之后设置盒子的位置。
小妙招：浮动后父级坍塌问题解决？
子盒子浮动又不占有位置，最后父级盒子高度为 0
招式①:给父级元素设置高度。
招式②:额外标签法(隔墙法)。
浮动元素末尾添加一个空的标签。例如 <div style="clear:both"></div>，或者其他标签（如<br />)。
招式③:清除浮动 (闭合浮动)
clear: both;
| 属性 | 描述 |
|---|---|
| left | 清除左侧的浮动 |
| right | 清除右侧的浮动 |
| both | 清除两侧的浮动 |
招式④:父级添加 overflow 属性
给父级添加 overflow 属性: 值设置为 hidden、 auto 或 scroll 。
缺点：无法显示溢出的部分。
overflow 属性表
| 属性 | 描述 |
|---|---|
| visible | 不剪切也不隐藏 |
| hidden | 不显示超出部分，溢出隐藏 |
| auto | 不超出不显示滚动条，超出自动显示滚动条 |
| scroll | 不管超不超出总是显示滚动条 |
招式⑤：父级添加after伪元素
不设父元素高度，给父元素加伪类，高度自适应。
父选择器:after{
content: ''; /*在父类后面添加内容为空*/
height: 0; /*不要看见这个元素*/
visibility: hidden; /*不要看见这个元素*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
父选择器 { /* IE6、7 专有 */
*zoom: 1;
}
招式⑥：父级添加双伪元素
父选择器:before,父选择器:after {
content:"";
display:table; /*转换为块级元素并且一行显示*/
}
父选择器:after {
clear:both;
}
父选择器 {
*zoom:1;
}
11.定位
浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
11.1定位组成
定位=定位模式+偏移
11.2定位模式
position:
值： static; 默认值，无定位
relative; 相对定位
absolute; 绝对定位
fixed; 固定定位
sticky；粘性定位（了解）
偏移：
top: 像素值；（距离父元素顶部多少像素，值可正可负）
bottom：像素值；（距离父元素底部多少像素，值可正可负）
left:像素值；（距离父元素左侧多少像素，值可正可负）
right:像素值；（距离父元素右侧多少像素，值可正可负）
- 定位模式用于指定一个元素在文档中的定位方式。
- 边偏移则决定了该元素的最终位置。
11.3相对定位
- 相对自己原来的位置，通过偏移达到新的位置。（自恋型）
- 偏移后原来位置还保留，虽然能压住别的盒子，但是并没有脱离标准文档流。
注意：很少单独使用，多配合别的定位使用。
11.4绝对定位
- 脱离标准文档流，原来的位置不保留。
- 绝对定位后，具有行内块盒子的特性。（宽高边距都可以调整）
- 绝对定位以他的最近的“已经定位”祖先元素（父亲、爷爷等）为基准进行定位；
如果祖先元素没有定位，以浏览器窗口为基准进行定位。（绝情型）
小妙招： 父亲相对定位（不偏移）+儿子绝对定位的搭配进行制作特效。（父相子绝）
注意:父亲相对定位只定位不偏移。
11.5固定定位
-
脱离标准文档流，原来的位置不保留。
-
固定定位后，具有行内块盒子的特性。（宽高边距都可以调整）
-
以浏览器窗口为基准进行定位。
11.6粘性定位 sticky（了解）：
粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的。
选择器 { position: sticky; top: 10px; }
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加 top 、left、right、bottom 其中一个才有效 跟页面滚动搭配使用。 兼容性较差，IE 不支持。
11.7定位后的特性
-
行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
-
脱标的盒子（绝对或者固定定位）不会触发外边距塌陷。
-
绝对定位（固定定位） 会压住下面标准流所有的内容（包括文档流）
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。
11.8定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。使用 z-index 来控制盒子的重叠。
z-index：调整元素定位时重叠层的上下位置
- z-index属性值：整数，默认值为0，z-index值大的层位于其值小的层上方。
- 只有定位的盒子才有 z-index 属性。
11.9绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
-
left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
-
margin-left: -100px; 让盒子向左移动自身宽度的一半。
12.元素的显示与隐藏
让一个元素在页面中隐藏或者显示出来。
- display 显示隐藏 (隐藏元素后，不再占有原来的位置)
- display: none ；隐藏对象
- display：block ；除了转换为块级元素之外，同时还有显示元素的意思
- visibility 可见性 显示隐藏 (隐藏元素后，继续占有原来的位置)
- visibility：visible ; 元素可视
- visibility：hidden; 元素隐藏
- overflow 溢出显示隐藏
- overflow:hidden 因为它会隐藏多余的部分
13.CSS3 函数
13.1 filter滤镜
filter: 函数();
例如： filter: blur(5px); blur模糊处理 数值越大越模糊
filter:alpha(x%) ； x值为0~100，值越小越透明 （兼容性先不推荐）
网页元素透明度也可为 :opacity:x ；x值为0~1，值越小越透明
13.2calc 函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算。
14.css3 2D动画
14.1 transform变形函数使用
transform:变形函数；
变形函数如下：
- translate(水平像素值，垂直像素值)：平移函数，基于X、Y坐标平移
- scale(水平倍数,垂直倍数)：缩放函数 倍数是数字，不是像素
- rotate(旋转度数deg):旋转函数 （deg是度数单位）
- skew(水平倾斜度数deg,垂直倾斜度数deg):扭曲函数 扭曲函数会将元素变形
变形函数过度效果：
① transition-property: xx; （要过渡的属性，背景颜色，宽，高; all 都支持）
② transition-duration: 5s; (过渡时长)
③ transition-delay: 2s; （过渡延迟时间）
④ transition-timing-function: ease; （过渡快慢效果）
值： ease：速度由快到慢（默认值）
linear：匀速运动
ease-in：速度越来越快
ease-out：速度越来越慢
ease-in-out：速度先加速再减速
可定义伪类使用：
①定义触发选择器
如： div:hover {}
②使用函数
div:hover {
transform:变形函数；
}
14.2 动画效果
需要定位（如：position；absolute;）
1.定义关键帧
写法一： @keyframes 帧名 {
from {css声明}
n% {css声明}
to {css声明}
}
写法二： @keyframes 帧名 {
0% {css声明}
20% {css声明}
...
100% {css声明}
}
2.调用
div:hover{
animation-name:帧名； // 动画帧名，必须加
animation-duration:2s; // 动画执行时间，必须加
animation-delay:1s; // 动画执行延迟时间
animation-iteration-count:infinite; //播放次数（infinite 无限播放），默认是1次
animation-timing-function：ease; // 动画播放快慢
}
15.css三大特性
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。
15.1层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突 的 问题。
层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
CSS 层叠性口诀：长江后浪推前浪，前浪死在沙滩上。
15.2继承性
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
- 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
- 继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞
行高的继承性
body {
font:12px/1.5 Microsoft YaHei；
}
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为 1.5
- 此时子元素的行高是：当前子元素的文字大小 * 1.5
- body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
15.3优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下表：
| 选择器 | 举例 | 权重 |
|---|---|---|
| 继承的、通配符、子选择器、相邻选择器等 | * 、>、 + | 0000 |
| 标签选择器、伪元素选择器 | div p 、::first-line | 0001 |
| 类，伪类、属性选择器 | .content 、:hover、 [type=‘text’] | 0010 |
| ID选择器 | #content | 0100 |
| 内联样式 | style="…" | 1000 |
| !important | 无穷大 |
优先级注意点:
- 权重是有4组数字组成,但是不会有进位。
- 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大。
- 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
权重叠加：
如果是复合选择器，则会有权重叠加，需要计算权重。
| div ul li | ------> | 0,0,0,3 |
|---|---|---|
| .nav ul li | ------> | 0,0,1,2 |
| a:hover | -----—> | 0,0,1,1 |
| .nav a | ------> | 0,0,1,1 |
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
