文章目录
CSS
CSS 简介
CSS 通常称为 CSS 样式或层叠样式表（级联样式表）。主要用于设置 HTML 页面中的文本（字体、大小、对齐方式），图片（宽度、高度、边框、边距等）版面的布局。
CSS 是以 HTML 为基础的，提供丰富的各种功能，包括字体、颜色、背景的控制，整体的排版，而且还可根据不同的浏览器设置不同的样式。
CSS 样式规则
在 head 中定义：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
设置h1样式
设置body样式
设置div样式
-->
<style>
h1{
color: red;
font-size: 14px;
font-family:'微软雅黑', Courier, monospace;
}
body{
background-color: sienna;
}
div{
font: oblique 700 40px "微软雅黑";
}
</style>
</head>
规则：
- h1 和 body 是选择器，用于指定 css 样式作用的 HTML 对象，{} 内部是对该对象设置的具体样式。
- 属性和属性值之间以键值对的形式出现（background-color）
- 属性是对指定的对象设置样式属性
- 属性与属性值之间以英文的 " : " 连接（color: red）
- 多个键值对之间使用 " ; " 连接
CSS 字体样式属性
字体的大小（font-size）
设置字号：
- 相对长度单位（常见），推荐使用 px （像素）
- 绝对长度单位
常见的长度单位： in(英寸) cm(厘米) mm(毫米) pt(点)
在网页中，一般字号为 14px
font-size: 14px;
字体的设置（font-family）
font-family:'微软雅黑', Courier, monospace;
- 在表示字体的时候，可使用英文，也可使用中文，尽量使用系统默认的常规字体
- 字体名称若为单个单词可直接写，多个单词需要加单引号或双引号
- 中文字体一般需要用单引号或双引号
- 尽量使用偶数的数字字号，在IE6中对奇数的支持有 bug
- 各种字体之间要有 “,” 分割
- 可以同时设置多个字体，多个字体之间是备选关系
字体的粗细（font-weight）
- 不使用 css 设置字体粗细：
<body>
字体的粗细程度<br/>
<b class="si">字体的粗细程度</b><br/>
<strong class="si">字体的粗细程度</strong>
</body>
- 使用 css 设置字体粗细
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 35px;
font-weight:800;
}
</style>
</head>
<body>
<div>
<font>
字体的粗细程度
</font>
</div>
</body>
weight 的范围：100~900
一般使用：normal（400） bold（700） bolder lighter
字体风格（font-style）
<b><i>字体的粗细程度</i></b>
<strong><em>这是第二种设置字体的粗细</em></strong>
实例：
<body>
<div>
<b><i>字体的粗细，是否倾斜</i></b>
<hr/>
<strong><em>字体的粗细，是否倾斜</em></strong>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
font{
font-size: 35px;
font-weight: 500;
font-style: oblique;
}
</style>
</head>
<body>
<div>
<font>字体的粗细，是否倾斜</font>
</div>
</body>
- nomal 默认值，浏览器显示为标准字体
- italic 斜体的字体
- oblique 显示为倾斜
字体的综合设置
font: oblique 700 40px "楷体";
具体语法：
- 选择器：{font： font-style font-weight font-size font-family}
- 在使用的过程中 必须严格遵循上边的语法 顺序不能更换
- 其中的一些属性是可以省略，省略之后可以取他的默认值，但是必须保留 font-size 和font-family，否则 font 属性将不起作用
<style>
font{
font:oblique 700 30px "微软雅黑";
}
</style>
<body>
<div>
<font>字体的粗细，是否倾斜</font>
</div>
</body>
CSS 的注释
css 的注释：
/* */
html 的注释
<-- -->
选择器
标签选择器（元素选择器）
使用 HTML 标签名作为选择器。
语法：
标签名 元素名{属性：属性值;属性：属性值}
<style>
font{
font:700 30px "微软雅黑";
}
</style>
<body>
<div>
<font>字体的粗细，是否倾斜</font>
</div>
</body>
类选择器
类名选择器可以实现样式的复用。
语法：
.类名{
属性：属性值;属性：属性值
}
类选择器使用"."进行标识，后面加 类名 语法
实例：
完成如图样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 200px;
}
span {
font-size: 100px;
font-weight: 800;
}
.blue{
color: rgb(20, 81, 196);
}
.red{
color: red;
}
.yellow{
color: yellow;
}
.green{
color: green;
}
</style>
</head>
<body>
<div>
<span class="blue">G</span>
<span class="red">o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</div>
</body>
</html>
多类名选择器
class 中使用多个类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 200px;
}
span {
font-size: 100px;
font-weight: 800;
}
.blue{
color: rgb(20, 81, 196);
}
.red{
color: red;
}
.yellow{
color: yellow;
}
.green{
color: green;
}
.f{
font: 200px "楷体";
}
</style>
</head>
<body>
<div>
<span class="blue">G</span>
<span class="red f">o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red f">e</span>
</div>
</body>
</html>
运行结果：
id 选择器
语法：
#id{
属性：属性值;
属性：属性值;
}
- id 选择器是通过元素的 id 属性来进行选择，同时使用 id 选择元素时，需用 # 来进行标识。
- 当选择 id 选择器的时候，必须保证选择的元素具有 id 属性，id 属性是唯一的。
<style>
#d1{
width: 200px;
height: 200px;
background-color: greenyellow;
}
#d2{
width: 400px;
height: 400px;
background-color: hotpink;
}
</style>
<body>
<div id="d1">
今天天气很好
</div>
<div id="d2">
今天是晴天
</div>
</body>
ID选择器和类选择器的异同
- 相同点：
两者选择器均能够选取到DOM节点并给DOM节点添加样式 - 不同点
每个DOM节点允许有多个class,但是一般只允许拥有一个ID - ID选择器对DOM节点的样式控制的优先级高于类选择器
通配符选择器（*）
通配符选择器是所有选择器中作用范围最广的，可以匹配页面中的所有元素。
语法：
*{
属性值：属性;
属性值：属性;
}
实例：
<style>
#d1{
width: 200px;
height: 200px;
background-color: greenyellow;
}
#d2{
width: 400px;
height: 400px;
background-color: hotpink;
}
*{
/* 设置外边距 */
margin: 10px;
/* 设置内边距 */
padding: 10px;
}
</style>
<body>
<div id="d1">
今天天气很好
</div>
<div id="d2">
今天是晴天
</div>
</body>
伪类选择器
用于向某些选择器添加特殊的效果
链接伪类选择器
- link：未访问的连接
- visited：已访问的连接
- hover：鼠标移动到链接上
- active：选定的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
font-weight: 700;
font-size: 25px;
color: gray;
}
a:hover {
color: red;
}
a:visited {
color: green;
}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
结构（位置）伪类选择器
:first-child 选取属于父元素的首个子元素
:last-child 选取最后一个子元素
:nth-child(n) 选取属于父元素的第 n 个子元素
:nth-child(even) 选择偶数的元素
:nth-child(odd) 选择奇数的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
margin-left: 50px;
}
li{
font: 100px “微软雅黑;
}
li:first-child{
color: red;
}
li:last-child{
color: green;
}
li:nth-child(2){
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>红色</li>
<li>黄色</li>
<li>绿色</li>
</ul>
</body>
</html>
目标伪类选择器（:target）
可用于选择当前活动的目标元素。
点击 a 标签，使得 b 标签变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a1:target{
color: red;
}
</style>
</head>
<body>
<!-- 当点击a标签时，a是连接到h1的，所以此时h1就是a标签的目标 -->
<h1 id="a1">山西太原</h1>
<a id="a2" href="#a1">中北大学</a>
</body>
</html>
点击前：
点击后：
CSS 外观属性
文本颜色（color）
Color属性的取值方式有3种：
1 预定义颜色值 如：red green blue pink 等
2 十六进制 如 #ffffff 白色 #000000黑色 对于这种两位十六进制表示RGB中的一种颜色 如果相邻两位的十六进制相同 则可以省略 #fff #000
3 RGB表示方式，如红色rgb(255,0,0) 还可以使用百分数 rgb(100%,0%,0%) 当使用rgb表示颜色，且使用百分数的时， 即使取值为0 百分号也不能省略
div{
color: red;
color: rgb(255, 0, 0);
color: rgb(100%, 0%, 0%);
color: #ffffff;
}
间距与文字效果
| 类型 | 方式 |
|---|---|
| 行间距 | line-height:33px; |
| 水平对其方式 | text-indent:left; |
| text-indent:right; | |
| text-indent:center; | |
| 首行缩进 | text-indent:2em; |
| 字间距 | letter-spacing:20px; |
| 单词间距 | word-spacing:20px; |
| 颜色的半透明 | color:rgb(100%,0%,0%,0.8); |
| 字体阴影 | text-shadow:10px 10px 20px gray; |
注：
- 行距在设置的时候，一般根据字号来设置，一般行间距比字号大7~8个像素即可，行间距的设置，可以使用像素（px），百分比（%），em
- 水平对齐方式（text-align）相当于 html 中的 align 属性
- 设置段落首行缩进，属性值可以为不同单位的数值（像素，百分比），em 为字符的宽度，是一个相对值，2em 即为缩进两个汉字
- 字间距可以使用不同单位的数值，对于中文指的是两个汉字之间的空白间隙，而对于英文则是字母之间的间距
- 单词间距只针对英文单词之间的间距，对中文无效
- 透明度：color：rgba(r,g,b,a) a表示透明度 a的取值范围是0-1
- 字体阴影：text-shadow：水平位置 垂直位置 模糊距离 阴影颜色
水平位置和垂直位置必须设置 后边模糊距离和阴影颜色可省略
CSS 样式表的使用（style的书写位置）
行内样式表（内联式）
通过标签的 style 属性设置元素的样式，style 写在标签内部
html 是所有的 html 元素共同拥有的一个属性。
格式：
<标签名 style="属性名:属性值;属性名:属性值">
<p style="font-size: 20px;font-weight: 600;color: cornflowerblue;">
今天天气很好
</p>
内部样式表（内嵌式）
在head 中使用 style 标签来定义样式，一般位于 head 中，也可以位于其他位置。
<head>
……
<style>
div{
color: red;
}
</style>
</head>
外部样式表（外联式） <推荐>
将样式单独定义在一个 css 文件中，在需要使用的时候，引入该样式文件即可。
步骤：
- 创建一个样式文件，该文件拓展名为 .css
- 在样式文件中编写相应的样式
.css 文件（写完后记得保存）：
p{
font-size: 30px;
color: aqua;
text-align: center;
background-color: cadetblue;
}
html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<p>
今天天气不错。
</p>
</body>
</html>
运行结果：
三种方式的比较：
| 样式表 | 优点 | 缺点 | 优先级 |
|---|---|---|---|
| 行内样式表 | 书写方便 | 没有分离代码,不便于维护 | 最高 |
| 内嵌样式表 | 内部实现了分离 | 没有完全分离 | 次之 |
| 外部样式表 | 实现了彻底分离 | 需要单独引入 | 最低 |
如果要修改前端做出的页面，可选择使用优先级高的方式来修改所要修改的样式。
标签的显示模式
HTML 中的标签一般分为块标签和行内标签，称为块元素和行内元素。
块级元素
每一个块级元素通常都独占一行或者多行，可以对齐设置宽度、高度、对齐方式等属性 常用于网页布局和网页结构的搭建
常见的块级元素：标题标签<h1>~<h6> <p> <div> <ul> <ol> <li>
div是块级元素的典型代表
块级元素的特点：
- 总是从新行开始
- 宽、高、边距都是可控的
- 宽度默认是100%
- 可以容纳内联元素和其他的块元素
行内元素
行内元素不独占一行，该元素所占有的空间大小仅仅只是依靠其本身的内容来支撑。
一般不可以设置宽度、高度、对齐方式等属性 。
常用于控制页面中文本的样式
常见的行内元素：
- a(超链接)
- strong(重要的文本)
- b(粗体文本)
- em(被强调的文本)
- i(斜体文本)
- del(已删除的文本)
- s(加删除线的文本，HTML5不再支持，使用CSS代替)
- ins(插入的文本，有下划线，与del 配合使用)
- u(下划线，减少使用，避免与下划线混淆)
- span(组合文档中的行内元素)
span是行内元素的代表
del s 删除线 ins u 下划线
行内元素的特点：
- 和相邻元素位于同一行
- 宽高的设置是无效的 但内边距是可以设置 外边距设置时只能设置水平方向
- 默认的宽度就是本身所容纳的内容的宽度
- 行内元素只能容纳文本或者其他的行内元素（a特殊）
<body>
<!-- 常见的行内元素 -->
<a href="#">超链接</a>
<span><strong>重要文本</strong><b>加粗文本</b><em>强调的文本</em><i>斜体文本</i></span><hr/>
<span><del>已删除的文本</del><ins>插入的文本</ins><u>下划线</u><s>已删除</s></span>
</body>
行内块元素
行内元素中有几个特殊的标签：
- img （图像）
- input （输入字段，用户可在其中输入数据）
- td （表格中的一个单元格）
可以对他们设置宽度和对齐方式 ，有些地方 将其称为行内块元素。
行内块元素的特点
- 相邻元素在一行但是之间会存在缝隙
- 默认的宽度也是内容的宽度
- 宽度、行高、外边距依据内边都可以控制
转换标签的显示模式（display）
- 块级标签转换为行内标签 display:inline
- 行内标签可以转换为块级标签 display: block
- 转换为行内块标签 display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
/* 将块级标签转换为行内标签，将ul设置为导航栏 */
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">简介</a></li>
<li>关于我们</li>
</ul>
</body>
</html>
CSS 复合显示器
复合选择器就是将两个或两个以上的基础选择器，通过不同的方式组合而成，目的是为了可以更准确的选择目标元素。
交集选择器
由两个选择器构成，其中一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格（为"."）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1.c1{
font-size: 50px;
color: cyan;
}
</style>
</head>
<body>
<h1 class="c1">交集选择器</h1>
</body>
</html>
并集选择器
使用多个选择器，多个选择器之间使用 “,” 分割，可以是任意基础选择器（选择器可以为标签名称、id、class）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 并集选择器可以为标签名称、id、class */
h1,.c1,p,#d1{
font-size: 50px;
color: cyan;
}
</style>
</head>
<body>
<h1 class="c1">交集选择器</h1>
<h2 class="c1">并集选择器</h2>
<p>并集选择器</p>
<h3 id="d1">并集选择器</h3>
</body>
</html>
除 h 标签会自定加粗外，其他都相同。
后代选择器（包含选择器）
**用来选择元素或元素组的后代，**写法：把外层标签写在前面，内层标签写在后面，中间使用空格分割。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div h1{
color: cyan;
size: 50px;
}
</style>
</head>
<body>
<!-- 后代选择器 -->
<div>
<h1>后代选择器</h1>
<h2>后代选择器</h2>
</div>
</body>
</html>
可以看到只改变了div 中的 h1 的格式，h2并没有发生改变。
子元素选择器
只能选择作为某元素子元素的元素，写法：父级元素 > 子级元素（ > 的两端各有一个空格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul > li{
color: cyan;
}
</style>
</head>
<body>
<!-- 后代选择器 -->
<div>
<ul>
<li>首页</li>
<li>简介</li>
<li>联系方式</li>
</ul>
</div>
</body>
</html>
属性选择器
通过元素的属性来选择目标元素
| 选择器 | 意义 |
|---|---|
| E[attr] | 选择具有attr属性的元素 |
| E[attr=val] | 选择具有attr且值为val的元素 |
| E[attr*=val] | 选择属性值里包含val字符的且在任意位置 |
| E[attr^=val] | 属性值包含val且在开始位置 |
| E[attr$=val] | 属性值包含val且在结束位置 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li[type]{
/* border 宽度 样式 颜色 */
border: 1px solid gray;
}
li[type="vegetable"]{
background-color: green;
}
li[type*="m"]{
background-color: greenyellow;
}
</style>
</head>
<body>
<!-- 属性选择器 -->
<ul>
<li type="fruit" color="green">西瓜</li>
<li type="vegetable" color="greenyellow">西兰花</li>
<li type="meat">牛肉</li>
<li type="meat hot">猪肉</li>
</ul>
</body>
</html>
伪元素选择器
- E::first-letter 文本的第一个单词或字
- E::first-line 文本的第一行
- E::selection 可改变选中的文本的样式
- E::before 和 E:：after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
text-indent: 2em;
}
p::first-letter{
font-size: 20px;
color: greenyellow;
}
p::first-line{
color:grey;
}
p::selection{
color: hotpink;
font-size: 25px;
}
</style>
</head>
<body>
<p>
打雷下雨天，一定不要去树下，不然后果很严重的。
</p>
<p>
当地时间3月12日17时30分左右，印度首都新德里周边卫星城古尔冈的一个小区公园上演惊险一幕，4名男子聚在公园的一棵树下避雨，突然一道闪电从天而降，击中了避雨的树木并冒出了火光，树下的4人也随即应声倒地，整个雷电过程持续约两秒，这一惊险画面正好被小区公寓的摄像头纪录了下来。
</p>
<p>
据悉，这4人因雷击严重烧伤，但所幸并无生命危险，目前正在医院接受治疗。
</p>
<p>
一些网友纷纷表示，雷雨天气禁止在树底下躲雨这种常识都不知道吗，这四个人当时是在想什么？还有网友重申：雨天树下千万不要躲雨，危险系数百分百。
</p>
</body>
</html>
选中后的样式：
CSS 背景（background）
| 名称 | 说明 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
背景图片（background-image）
语法：
background-image:none|url(url)
none：无背景图（默认）
url：使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 300px;
width: 300px;
}
.p{
background-image: none;
}
.p1{
background-image: url("image/jiangxuan_5.jpg");
}
</style>
</head>
<body>
<div class="p">
无背景图
</div>
<div class="p1">
有背景图
</div>
</body>
</html>
背景平铺
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat：背景图像在纵向和横向上平铺（默认的）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 300px;
width: 300px;
}
.p{
background-image: url("image/zheng.jpg");
background-size: 50px 50px;
background-repeat: repeat;
}
.p1{
background-image: url("image/zheng.jpg");
background-size: 50px 50px;
background-repeat: no-repeat;
}
.p2{
background-image: url("image/zheng.jpg");
background-size: 50px 50px;
background-repeat: repeat-x;
}
.p3{
background-image: url("image/zheng.jpg");
background-size: 50px 50px;
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="p">
背景在横向上和纵向上平铺（默认）
</div>
<hr style="color: cadetblue;"/>
<div class="p1">
背景不平铺
</div>
<hr style="color: cadetblue;"/>
<div class="p2">
背景在横向上平铺
</div>
<hr style="color: cadetblue;"/>
<div class="p3">
背景在纵向上平铺
</div>
</body>
</html>
背景位置
语法：
background-position : length || length
background-position : position || position
length：百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position：top | center | bottom | left | center | right 说明。
设置或检索对象的背景图像位置，必须先指定background-image属性。默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注：
- position 后面是x坐标和y坐标，可以使用方位名词或者精确单位。
- 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标在后。
比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 300px;
width: 300px;
background-color: cadetblue;
}
.p{
background-image: url("image/zheng.jpg");
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 125px top;
}
.p1{
background-image: url("image/zheng.jpg");
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="p">
</div>
<hr style="color: cadetblue;"/>
<div class="p1">
</div>
</body>
</html>
背景附着
语法：
background-attachment : scroll | fixed
scroll：背景图像随对象内容滚动
fixed：背景图像固定
/* 设置是否随这个滚动条滚动 scroll fixed */
background-attachment: scroll;
实例：做一个如所示的网页
CSS 的三大特性
层叠、继承、优先级
CSS 层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p{
color: rebeccapurple;
}
#d{
color: red;
}
</style>
</head>
<body>
<div class="p" id="d" style="font-size: 40px;">
今天天气及其不好
</div>
</body>
</html>
最后设置字体为红色，所以运行出的结果为红色。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
CSS最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。
<style>
div > span{
color: red;
font-size: 30px;
}
</style>
<body>
<div>
<span>
今天天气很不好
</span>
</div>
</body>
字体为红色，字号也明显增大
CSS 优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
- 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
- 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
- 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
- CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级
优先级：
- 规则（1）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。
- 规则（2）：important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。另外权重会叠加，所以为了便于理解，权重设置如下： - 1 表示标签选择器的权重；- 10 表示类选择器的权重；- 100 表示 id 选择器的权重；- 1000 表示内联样式的权重。
注：权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。所有都相同时，声明靠后的优先级大。
<style>
div{
color: red !important;
font-size: 30px;
}
</style>
<body>
<div style="color: rosybrown;">
今天天气很不好
</div>
</body>
因为 div 标签中使用了 color: red !important; 所以在 div 的行内样式的权重再高也没有显示出来
盒子模型（重点）
CSS 三大模块：盒子模型、浮动、定位
首先，css中的盒子模型的组成有：margin(外边距)、border(边框)、padding(内边距) 和 content(内容) 组成的。
而在盒子模型中分为两种模型：1、IE盒子模型（怪异盒模型） 2、W3C标准盒子模型
W3C标准盒子模型：
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高
div实际宽=width+（padding+border+margin）*2
div实际高=height+（padding+border+margin）*2
IE盒子模型：
CSS中的宽（width）=内容(content)的宽 + (border+padding) *2
CSS中的宽（width）=内容(content)的高+(border+padding) *2
div实际宽=width + margin2
div实际高=height+ margin2
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由：
- 元素的内容
- 内边距（padding）
- 边框（border）
- 外边距（margin）
看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: rgb(25, 120, 197);
width: 200px;
height: 200px;
border: 5px dotted red;
padding: 30px 30px;
margin: 30px 30px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
边框（border）
盒子边框（border-width）
语法：
border : border-width || border-style || border-color
/* 对于边框的综合设置 宽度 样式 颜色 */
border: 5px dotted red;
border-style 常用属性值：
• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线
• double：边框为双实线
实例：
<style>
div{
width: 200px;
height: 200px;
/* 设置边框 */
border-width: 5px;
border-style: double;
border-color:turquoise;
/* 分别设置上边线 为单实线 */
border-top-width: 2px;
border-top-style: solid;
border-top-color: rgb(255, 67, 139);
}
</style>
</head>
<body>
<div>
</div>
</body>
圆角边框（border-radius）
语法：
border-radius: 水平半径/垂直半径；
一般垂直半径都是省略的默认和水平半径一样。
border-radius: 左上角 右上角 右下角 左下角;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 190px;
height: 190px;
font-size: 20px;
}
.p1{
/* 设置边框 */
border-width: 5px;
border-style: double;
border-color: turquoise;
border-radius: 50%;
}
.p2{
/* 设置边框 */
border-width: 5px;
border-style: double;
border-color: turquoise;
border-radius: 20% 40%;
}
.p3{
/* 设置边框 */
border-width: 5px;
border-style: double;
border-color: turquoise;
border-radius: 10% 30% 50%;
}
</style>
</head>
<body>
<div class="p1">
设置一个值，四个角都相同
</div>
<hr/>
<div class="p2">
设置两个值：第一个值=左上和右下 第二个值=左下和右上
</div>
<hr/>
<div class="p3">
设置三个值：从左上开始，顺时针方向，依次取值
</div>
</body>
</html>
边距
内边距（padding）
指的是边框（border）与内容之间的距离。
格式：
距离左上角偏离（左、上偏离相同的值）
padding:20px;
距离上、左边线偏离
padding:20px 30px;
距离上、左右、下边线偏离
padding:20px 30px 30px;
距离上、右、下、左偏离（顺时针）
padding:20px 30px 40px 50px;
外边距（margin）
设置外边距在元素之间产生的空白，通常不能放置其他内容。
语法：
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
实现盒子居中：
margin: 0 auto;
盒子居中满足的条件：
- 必须是块级元素
- 盒子必须指定宽度（width）
- 左右外边距（margin）都设置为 auto ，就可是块级元素水平居中
<style>
div{
width: 190px;
height: 190px;
font-size: 20px;
}
.p1{
/* 设置边框 */
border-width: 5px;
border-style: double;
border-color: turquoise;
margin: 0 auto;
}
</style>
<body>
<div class="p1">
盒子居中
</div>
</body>
盒子模型的布局稳定性
按照优先使用，宽度 （width） ，其次使用内边距（padding）， 再次外边距（margin）
width > padding > margin
原因：
- margin 会有外边距合并 还有 ie6下面margin会有bug，所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算，故其次使用。
- width 没有问题，我们经常使用宽度剩余法，高度剩余法来做。
CSS3 盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
- box-sizing: border-box 盒子大小为 width 是盒子总计占有的空间大小
- box-sizing: content-box 盒子大小为 width + padding + border
设置的width是盒子的内容所占的宽度,盒子总计占有的空间大小width + padding + border
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
版心和布局流程
在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
设计一个网页,第一步需要确定版心的宽度
布局流程：
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
- 确定页面的版心（可视区）。
- 分析页面中的行模块，以及每个行模块中的列模块。
- 制作HTML页面，CSS文件。
- CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
网页布局
表格布局
框架集之 Frameset 与 Iframe
框架集的作用：实现在一个页面中访问多个 HTML 页面的目的。
frame的属性有：
- src 指在此框架窗口中要显示的网页档案的链接
- name 指这个框架窗口的名称
- framespacing 指框架和框架之间保留的空白的距离
- scrlling 指该框架窗口是否要显示滚动条
- noresize 指框架的尺寸不能被随意拖动，改变大小
- marginheight 指框架顶部和底部边缘所保留的空间的大小
- marginwidth 指框架左右两边边缘所保留的空间的大小。
frameset的属性有：
- cols 它是把整个画面竖向分割成几个画面
- rows 它是把整个画面横向分割成几个画面
- frameborder 它表示设定这个框架的边框值。它的值只有两个0或者1.0表示不显示边框，1表示显示边框。
- border 它表示了边框的宽度
- bordercolor 它是设定了框架边框的颜色
frame有一个重要的值是target，它表示在指定的框架中打开网页,而target有四个值:
- blank 它表示在一个新的窗口中打开链接网页
- top 它表示在本窗口中打开链接网页
- parent 在上一层的框架中打开链接网页
- self 在超链接中打开链接网页
- noframes 指当浏览器完全显示不出这个框架时，页面就会显示出<noframes>内的内容
iframe的属性：
- name 是框架窗口的名称
- align 是框架窗口中内容的对齐方式
- width 是框架窗口的宽，单位是pixels
- height 是框架窗口的长，单位是pixels
- marginwidth 是插入的文件和框架左右边缘所保留的空间
- marginheight 是插入的文件和框架上下边缘所保留的空间
- frameborder 是指是否显示边框。
1表示显示边框，0表示不显示边框 - scrolling 是指是否允许使用滚动条。
<iframe src="bgimg.html" width="100%" height="200px"></iframe>
frame和iframe的区别：
- frame不能脱离frameSet单独使用，iframe可以；
- frame不能放在body中；
- 嵌套在frameSet中的iframe必需放在body中
- 不嵌套在frameSet中的iframe可以随意使用；
- frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制
div+css布局
Div+CSS标准的优点 :
- 大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
- 结构清晰，容易被搜索引擎搜索到，天生优化了seo
- 缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
- 强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
- CSS非常容易编写。你可以像写html代码一样轻松地编写CSS。
- 提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
- 可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
- 更好的控制页面布局。不用多说。
- 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
- 更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
- Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
- 另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
- Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
- 在几乎所有的浏览器上都可以使用。
- 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
- 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
- 你可以轻松地控制页面的布局 。
- 你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
浮动（float）
普通流（normal flow）（或文档流，标准流）：标准流指一个网页中内标签元素正常从上到下，从左到右的排布方式。比如块级元素独占一行，行内元素会按顺序排列。
CSS 的定位机制：普通流（标准流）、浮动和定位
浮动与标准流的位置关系：
- 第一个浮动，第二个不浮动，则第二个仍处于标准流；浮动之后不占有空间，只占有位置（相当于浮动后处于 PS 中一个新的图层，且在原图层的上方，透明度为0）
- 两个都浮动，则两个浮动元素顶端对齐
- 第一个浮动，第二个不浮动，则第一个占据自己本身的位置，第二个在自己原来的位置浮动
浮动注意：
- 浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动
- 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少
- 浮动根据元素书写的位置来显示相应的浮动。
浮动总结：浮漏特
- 浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
- 漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏，给了标准流的盒子。
- 特：特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。
实例：
当所有标签都不浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
background-color: blueviolet;
}
.d2{
width: 100px;
height: 100px;
background-color: cyan;
}
.d3{
width: 200px;
height: 100px;
background-color: cadetblue;
}
.d4{
width: 150px;
height: 150px;
background-color: darkgray;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
</div>
<div class="d4"></div>
<p>
法国卫生总局16日宣布，法国布列塔尼大区阿摩尔滨海省拉尼用医院发现一种新的变异新冠病毒。2月22日布列塔尼的一家企业内部发现聚集性感染。3周后，拉尼用医院在这宗集群感染中共确诊患者79名，其中8例携带首次发现的变异新冠病毒。这8名患者虽然有典型的感染症状，但其鼻咽样本核酸测试(PCR检测)结果呈阴性。
核酸检测为何无法甄别新毒株，法国流行病学家帕斯卡尔·克雷佩表示，这可能来自两种情况：一种是在上呼吸道未检测到病毒，可能是病毒感染已迅速迁移到肺部，这也意味着其传染性较小；另一种情况令人不安，核酸检测结果为阴性可能意味着该病毒已发生足够的突变以致难以被检测，这将破坏整个接触者跟踪策略。
</p>
</body>
</html>
将 d2 与 d3 浮动：
.d2{
width: 100px;
height: 100px;
background-color: cyan;
float: left;
}
.d3{
width: 200px;
height: 100px;
background-color: cadetblue;
float: left;
}
可以看到，当 d2 ，d3 浮动后，顶端对其，d1 不显示，d4 上移，且位于d2 与 d3 的下方。
浮动就是让元素脱离标准流，占据空间但是不占据标准流的位置；清除浮动，是为了保证父容器中的子容器在浮动之后，使得父容器的高度为0，而不会对后面元素的布局产生影响。
父级添加overflow属性方法：
- 可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
- 优点： 代码简洁
- 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
.ex{
overflow: scroll;
}
<p class="ex">文字<p/>
使用after伪元素清除浮动：
使用方法：在父级元素上设置伪元素
- 优点： 符合闭合浮动思想,结构语义化正确
- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
- 代表网站： 百度、淘宝网、网易等
style中：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
body中：
<div class="clearfix"></div>
使用 CSS 清除浮动：
选择器{clear:属性值};
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
清除前（相当于从此处截断浮动对标准流的影响）：
清除后：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
background-color: blueviolet;
}
.d2{
width: 100px;
height: 100px;
background-color: cyan;
float: left;
}
.d3{
width: 200px;
height: 500px;
background-color: cadetblue;
float: left;
}
.d4{
/* 清除浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
</div>
<div class="d4"></div>
<p>
法国卫生总局16日宣布，法国布列塔尼大区阿摩尔滨海省拉尼用医院发现一种新的变异新冠病毒。2月22日布列塔尼的一家企业内部发现聚集性感染。3周后，拉尼用医院在这宗集群感染中共确诊患者79名，其中8例携带首次发现的变异新冠病毒。这8名患者虽然有典型的感染症状，但其鼻咽样本核酸测试(PCR检测)结果呈阴性。
核酸检测为何无法甄别新毒株，法国流行病学家帕斯卡尔·克雷佩表示，这可能来自两种情况：一种是在上呼吸道未检测到病毒，可能是病毒感染已迅速迁移到肺部，这也意味着其传染性较小；另一种情况令人不安，核酸检测结果为阴性可能意味着该病毒已发生足够的突变以致难以被检测，这将破坏整个接触者跟踪策略。
</p>
</body>
</html>
定位
定位指在元素浮动的基础之上，给元素一个适当的位置。
元素的定位属性
定位 = 定位模式 + 边偏移
- 边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
- 定位模式
格式：
选择器{position:属性值;}
position 的常用值：
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
静态定位(static)
静态定位是所有元素的默认定位方式，当 position 属性的取值为 static 时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
作用：清除定位 使原来有定位的盒子，消除其定位
相对定位relative(自恋型)
相对定位是将元素相对于它在标准流中的位置进行定位，当 position 属性的取值为 relative 时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
注意： 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
在定位中，如果 div 没有父容器 则是相对于 body 进行偏移。如果子 div 包含在父 div 中 则子 div 的偏移是相对于父div的偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
float: left;
width: 100px;
height: 100px;
}
.d1{
background-color: blueviolet;
width: 500px;
height: 500px;
position: relative;
top: 100px;
left: 100px;
}
.d2{
background-color: cyan;
position: relative;
left: 200px;
top: 100px;
}
.d3{
background-color: cadetblue;
position: relative;
top: 200px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="d3"></div>
</div>
</div>
<div></div>
</body>
</html>
绝对定位 absolute (拼爹型)
注：如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为 absolute 时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
float: left;
background-color: darkgray;
}
.a1{
position:absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div>
<p>
absolute (拼爹型)
[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
absolute (拼爹型)
[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
absolute (拼爹型)
[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
</p>
<div class="a1">
</div>
</div>
</body>
</html>
可以看到，砖红色原来在整个图片的左上角，通过移动，并没有影响文字的排版，只是遮盖在了文字上方，所以说完全不占位置。
父级没有定位： 若所有父元素都没有定位，以浏览器为准对齐(document文档)。
**父级有定位：**绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
**绝对定位的盒子没有边偏移：**如果只是给盒子指定了定位，但是没有给予边偏移，则该盒子以标准流来显示排序，和上一个盒子的底边对齐，但是不占有位置。
子绝父相
子级是绝对定位的话， 父级要用相对定位。
首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。
就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。
在布局中，父容器用来做页面的整体规划，在父容器中，子容器用来显示内容。因此只有父容器采用相对定位，才可以保证整个页面的布局不会错乱 ；子容器采用绝对定位，可以保证在父容器中，内容灵活排列。
所以，我们可以得出如下结论：
- 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。
- 父盒子布局时，需要占有位置，因此父亲只能是 相对定位。
这就是子绝父相的由来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.r1{
width: 200px;
height: 200px;
position: relative;
background-color: grey;
top: 100px;
}
.a1{
width: 50px;
height: 50px;
position: absolute;
background-color: lightcoral;
}
.r2{
width: 200px;
height: 200px;
position: relative;
background-color:khaki;
top: 200px;
left: 200px;
}
.a2{
width: 100px;
height: 100px;
position: absolute;
background-color: lightseagreen;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="r1">
<div class="a1">
</div>
</div>
<div class="r2">
<div class="a2">
</div>
</div>
</body>
</html>
绝对定位的盒子水平/垂直居中
- 设置 left，top 值均为50%，同时margin-left设置为绝对定位元素 width 的一半取负， margin-top 设为其height的一半取负。
例如，绝对定位元素的width:100px;height:100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
position: absolute;
margin-bottom: -50px;
margin-right: -50px;
bottom: 50%;
right: 50%;
- 利用绝对元素的自动伸缩性的特性实现
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
第二种方法：
- 设置 margin:auto；
- 设置 left 和 right 的值相等，top 和 bottom 的值相等
- 注意：left 和 right 的值不能超过其相对元素 width 减去它自身 widt h的一半,否则绝对定位元素会优先取 left 值进行定位(前提是文档流是从左向右)，但是 top 和 bottom 的值却没有这个限制。
固定定位 fixed
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
- 固定定位的元素跟父亲没有任何关系，只认浏览器。
- 固定定位完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index）：
- 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
- 在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2;
注意：
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.a1{
position: fixed;
top: 0;
width: 99%;
z-index: 10;
}
.a2{
position: absolute;
top: 50px;
width: 99%;
}
.a3{
width: 60px;
height: 510px;
position:fixed;
top: 50%;
left: 40px;
margin-top:-205px;
}
</style>
</head>
<body>
<div>
<img class="a1" src="img/top.png" alt="">
<img class="a2" src="img/1.png" alt="">
<img class="a3" src="img/2.png" alt="">
</div>
</body>
</html>
当滚动页面时，侧边的导航栏与顶部的栏不会发生移动。
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态 static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位 relative | 不脱标，占有位置 | 可以 | 相对自身位置移动 |
| 绝对定位 absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| 固定定位 fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
定位模式转换
跟浮动一样， 元素添加了绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为行内块模式， 因此比如行内元素，如果添加了绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。
元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display、visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。
display 显示：
- display 设置或检索对象是否及如何显示。
- none 隐藏对象
- block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
visibility 可见性：
- 设置或检索是否显示对象。
- visible : 对象可视
- hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
overflow 溢出：
- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
- visible : 不剪切内容也不添加滚动条。
- auto : 超出自动显示滚动条，不超出不显示滚动条
- hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
- scroll : 不管超出内容否，总是显示滚动条
鼠标样式 cursor：
- 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
- cursor : default 小白 | pointer 小手 | move 移动 | text 文本
轮廓 outline：
- 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
- outline : outline-color ||outline-style || outline-width
- 但是我们都不关心可以设置多少，我们平时都是去掉的。
- 最直接的写法是 ： outline: 0;
防止拖拽文本域 resize：
- resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
文字的居中设置：
/* 设置文字的行高等于容器的高度 则文字可以垂直居中 */
line-height: 200px;
/* 设置文本水平居中 */
text-align: center;
vertical-align 垂直对齐：
- 让带有宽度的块级元素居中对齐：margin: 0 auto；
- 让文字居中对齐：text-align: center；
- vertical-align 垂直对齐；
img {
vertical-align: middle;
}
实例：
display的使用（通过函数实现按动按钮来隐藏图片）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function buttonClick(){
var mychar = document.getElementById("b");
mychar.style.display="none"; // 不显示，隐藏
}
</script>
</head>
<body>
<div>
<div>
<img src="img/zheng.jpg" alt="" id="b">
</div>
<input type="button" value="隐藏" onclick="buttonClick()">
</div>
</body>
</html>
点击前：
点击后（图片消失）：
overflow （溢出）的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1{
width: 200px;
height: 150px;
background-color: lightsteelblue;
overflow: visible;
}
</style>
</head>
<body>
<div class="a1">
<p>
- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
- visible : 不剪切内容也不添加滚动条。
- auto : 超出自动显示滚动条，不超出不显示滚动条
- hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
- scroll : 不管超出内容否，总是显示滚动条
</p>
</div>
</body>
</html>
鼠标样式（cursor）：
<style>
.a{
width: 100px;
height: 50px;
background-color: mediumaquamarine;
cursor: pointer;;
}
</style>
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
