CSS详细
CSS简介
一、CSS的语法规范
使用HTML时，要遵从一定的语法规范，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>CSS的语法规范</title>
<style>
/* 选择器 {样式} */
/* 也可以理解成：给谁修改样式 { 修改什么样式} */
p {
/* 修改颜色为蓝色 */
color: blue;
/* 修改字体大小为15px */
font-size: 15px;
}
</style>
</head>
<body>
<p>我要修改p标签里文字的颜色为蓝色</p>
</body>
</html>
① 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象修改的具体样式
② 属性与属性值是以键值对的形式出现
③ 属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色等
④ 属性与属性值之间用英文":"隔开
⑤ 多个键值对之间用英文";"进行区分
二、CSS代码风格
符合实际开发时的书写规范
1、样式格式书写
① 紧凑格式
<h1> {color: red; font-size: 15px;}
② 展开格式（推荐使用）
<h1> {
color: red;
font-size: 15px;
}
2、样式大小写：推荐选择器、属性名、属性值关键字全部使用小写进行编写，特殊情况除外。
3、空格规范
① 属性值前面，冒号后面保留一个空格
② 选择器和大括号中间保留空格
三、选择器的作用
选择器就是根据不同的需求把不同的标签选出来。简单来说，就是选择标签来使用的。
1、 选择器的分类
选择器分为基础选择器和符合选择器两个大类
基础选择器是由单个选择器组成的
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
1> 标签选择器
标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
① 作用
标签选择器可以把某一类的标签全部选择出来
② 优点
能够快速为页面中同类型的标签统一设置样式
③ 缺点
不能设计差异化样式，只能选择全部的当前标签
<head>
<style>
/* 选择器 {样式} */
/* 也可以理解成：给谁修改样式 { 修改什么样式} */
p {
/* 修改颜色为蓝色 */
color: blue;
/* 修改字体大小为15px */
font-size: 15px;
}
</style>
</head>
<body>
<p>我要修改p标签里文字的颜色为蓝色</p>
<p>我要修改p标签里文字的颜色为蓝色</p>
</body>
2> 类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
语法
<head>
<style>
.green {
color: aqua;
font-size: 15px;
}
.se {
color: blue;
font-size: 15px;
}
</style>
</head>
<body>
<ol>
<li class="green">我可以调用类选择器</li>
<li class="se">我可以调用类选择器</li>
</ol>
</body>
注意：
① 类选择器使用"."(英文点号)进行标识，后面紧跟类名（自定义，我们自己命名的）
② 长名称或词组可以使用中横线为选择器命名
③ 不要使用纯数字、中文等命名，尽量使用英文字母来表示
④ 命名要有意义，尽量让别人一眼就知道这个类名的目的
3> 多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单来说就是一个标签有多个名字
① 多类名的使用方式
<!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>多类名的使用</title>
<style>
.box {
width: 200px;
height: 200px;
color: blue;
background-color: aquamarine;
}
.red {
font-size: 20px;
}
.black {
font-size: 20px;
}
</style>
</head>
<body>
<div class="box red">独善其身</div>
<div class="red box">兼济天下</div>
</body>
</html>
② 多类名的使用场景
可以把一些标签相同的样式（共同部分）放在同一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省CSS代码，统一修改也非常方便
③ id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中的id选择器以"#"来定义
id选择器只允许一个被调用一次
④ 通配符选择器
在CSS中，通配符选择器使用"*"来定义，它表示选取页面中所以元素的标签
通配符选择器不需要调用，自动给所有的元素使用样式
<style>
* {
属性: 属性值;
...
}
</style>
四、CSS字体属性
CSS Fonts属性用于定义字体系列，大小、粗细和文字样式
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，要加单引号
尽量使用系统默认自带字体保证在人格用户的浏览器中都能正确显示
1、使用font-weight属性设置文本字体的粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值，不加粗的 |
| bold | 定义粗体，加粗的 |
| 100-900 | 400等同于normal，700等同于bold，这个数字后面不跟单位 |
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的像素单位是px， 一定要写上单位 |
| font-family | 字体 | 实际工作中按照实际需求来写文本颜色 |
2、color属性用于定义文本的颜色
<style>
div {
color: red;
}
</style>
| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red、green、blue |
| 十六进制 | #FF0000、#FF6600 |
| RGB代码 | rgb(255,0,0) 对齐文本 |
3、text-align属性用于设置元素内文本内容的水平对齐方式
<style>
div {
text-align: center;
}
</style>
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐装饰文本 |
4、text-decoration属性
text-decoration属性规定添加到文本的装饰，可以给文本添加下划线、删除线、上划线等
<style>
div {
/* 自带下划线 */
text-decoration: underline
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
/* 取消默认的下划线 */
text-decoration: none;
}
</style>
5、文本缩进
text-indent属性用来指定文本的首行缩进，通常是将段落的首行缩进
<style>
div {
text-indent: 2em;
}
</style>
em是一个相对单位，就是当前元素一个文字的大小，如果当前元素没有设置大小，则会按照父元素一个文字的大小。
6、行间距
line-height用来设置行间的距离，可以控制文字行与行之间的距离
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1PHt11vR-1652893137146)(D:/classnote/picture.png/image-20220510225345318.png)]
<style>
div {
line-height: 26px;
}
</style>
五、CSS的引入样式
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混些 | 较少 | 可控一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 可控一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 可控多个页面 |
在开发中，我们都使用外部样式表，是应于样式比较多的情况。核心是：样式写在CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表分为两步：
新建一个后缀名为“.CSS”样式的文件，把所有的CSS代码放入到此文件中。
在HTML中，使用link标签引入这个文件。
<link rel="stylesheet" href="CSS的文件路径">
六、Emmet语法
快速生成HTML结构语法
1、生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成
<div> </div>
2、如果想要生成多个相同标签加上星号就可以了比如div*3 就可以快速生成3个div
3、如果有父子级关系的标签,可以用>，比如ul> li就可以了
4、如果有兄弟关系的标签,用 就可以了比如div p
5、如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
6、如果生成的div类名是有顺序的，可以用自增符号$
7、如果想要在生成的标签内部写内容可以用{}表示
七、什么是复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上, 对
基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、 并集选择器、伪类选择器等等
1、后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，中间用空格分隔，内层标签就成了外层标签的后代。
语法：
<style>
元素1 元素2 {样式声明}
</style>
- 元素1和元素2用空格隔开
- 元素1是父级，元素2是子级，我们最终选择的是元素2
- 元素2可以是子级，也可以是子级的子级，只要是元素1的后代即可
- 元素1和元素2可以使任意的基础选择器子选择器
2、子元素选择器
子选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素
语法：
<style>
元素1>元素2的{样式声明}
</style>
- 元素1和元素2中间用大括号隔开
- 元素2是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子重孙子之类都不归它管
3、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如：给链接添加特殊的特殊效果或祖安泽第一个或者第n个元素
伪类选择器书写最大的特点是用冒号(:)表示，比如：hover、first-child。
因为伪类选择器很多，比如有链接伪类，结构伪类等。
链接伪类
链接伪类选择器注意事项
链接伪类选择器注意事项
- 为了确保生效,请按照LVHA的循顺序声明:link - :visited - :hover - :active。
- 因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际开发中的写法
<style>
a:link {
/* 把未访问过的来链接选出来 链接没有点开之前的颜色*/
color: #333;
text-decoration: none;
}
/* 把已经访问过的链接选出来 链接点开后会变色*/
a:visited {
color: chartreuse;
}
/* 鼠标悬停会变色 */
a:hover {
color: red;
}
/* 正在打开链接且还未打开链接会变色 */
a:active {
color: yellow;
}
</style>
八、CSS元素显示模式
HTML一般分为：块元素和行内元素两种类型
1、块元素
常见的块元素
<h1>~<h6>、<p>、 <div>、 <ul>、 <o|>、 <li>其中<div>标签是最典型的块元素。
块级元素的特点:
① 比较霸道,自己独占一行。
② 高度、宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器(父级宽度)的100%。
④ 是一个容器及盒子,里面可以放行内或者块级元素。
注意点：
文字类的元素不能使用块级元素
p标签主要用于存放数字，因此p里面不能放块级元素，特别是不能放div标签
同理，h1-h6等都是文字类块级标签，里面也不能放其他块级元素
2、行内元素
常见的行内元素有
<a>、<strong>、 <b>、 <em>、<i>、<del>、 <S>、 <ins>、 <u>、 <span>
其中<span>标签是最典型的行内元素
有的地方也将行内元素称为内联元素。
行内元素的特点:
① 相邻行内元素在- -行上, - -行可以显示多个。
② 高、宽直接设置是无效的。
③ 宽度就是它本身内容的宽度。
④ 只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接
特殊情况a链接里面可以放块级元素，但是给a转换一下块级模式最安全。
3、元素显示模式的转换
特殊模式下，我们需要元素模式的转换，简单理解，一个，模式的元素需要另外一个模式的特性
转换为块元素：display：block；
转换为行内元素：display：inline；
转换为行级块元素：display：inline-black；
单行文字垂直居中的原理：
- 行高等于盒子高度–行高的上间距和下间距把文字挤到中间了
- 行高小于盒子高度，文字会偏上
- 行高大于盒子高度，文字会偏下
九、CSS背景
通过CSS背景属性，可以给页面元素添加背景样式
1、背景图片
background-image属性描述了元素的背景图像，实际开发 中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
background-image: none或者url(图片路径)
2、背景平铺
background-repeat属性
| 参数值 | 作用 |
|---|---|
| repeat | 背景图片在纵向和横向上平铺（默认） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
3、背景图片位置
利用background-position属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是: x坐标和y坐标。可以使用方位名词或者精确单位
参数值：length
说明：百分数|由浮点数字和单位标识符组成的长度值
参数值：position
说明：top| center | bottom| left | center | right 方位名词
参数是方位名词
- 如果指定的两个值都是方位名词，则两个值得前后顺序无关，比如：left top 和 top left效果是一样的
- 如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
4、背景图片固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果。
background-attachment：scroll fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
5、背景符合性写法
习惯性的顺序：
background：背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置
背景色半透明
background： rgba（0,0,0,0.5）
最后一个参数是alpha透明度，取值范围在0-1之间
我们习惯把0.5的0省略掉，写为：background： rgba（0,0,0,.5）
背景色办透明是指盒子背景半透明，盒子里面的内容不受影响。
十、CSS的三大特性
1、层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题。
原则：
- 样式冲突，遵循的原则就是就近原则；哪个样式离结构近，就遵循哪个样式
- 样式不冲突，不会重叠
2、继承性
子标签会继承父标签的某些样式如：文本的颜色和符号
- 恰当的使用继承可以简化代码，降低CSS的复杂性
- 子元素可以继承父元素的样式，（text-、font-、line这些元素开头的可以继承，以及color属性）
行高的继承性
<style>
body {
font: 12px/1.5 '微软雅黑'
}
</style>
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素行高的1.5
- 此时，子元素的行高是当前子元素大小乘1.5
- body行高1.5，这样写的最大优势是可以让里面的子元素可以根据自己的文字大小自动调整行高
3、优先级
选择器权重：
| 选择器 | 选择器权重 |
|---|---|
| 继承或* | 0,0,0,0 |
| 元素（标签）选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0, |
| ID选择器 | 0,1,0,0 |
| 行内样式style=“” | 1,0,0,0 |
| ！important | 无穷大 |
注意点：
- 权重是由4个数字组成，但是不会有进位
- 可以理解为类选择器永远大于元素选择器；ID选择器永远大于类选择器
- 等级判断从左到右，如果某一位数值相同，则判断下一位数值
- 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
十一、盒子模型
网页布局的本质
网页布局的过程：
- 先准备好相关的网页元素，网页元素基本都是盒子box
- 在利用CSS设置好盒子样式，然后摆放到相应的位置
- 往盒子装内容
网页布局的核心内容：就是利用CSS摆盒子
盒子模型（BOX MODEL）组成
所谓盒子模型：就是把HTML页面中布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器
CSS模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容
1、边框（border）
border可以设置元素的边框，边框有三部分组成，边框的宽度、样式、颜色。
border： border-width border-style border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框的粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框的颜色 |
边框的样式常用的：solid 实线边框 、dashed虚线边框 、dotted 点线边框
2、表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
语法：
border-collapse： collapse
collapse是合并的意思
border-collapse： collapse ；表示相邻边框合并在一起
3、盒子的内边距
padding属性用于设置内边距，即边框与内容之间的距离
| 属性 | 内容 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
内边距属性的简写：
| 值得个数 | 表达意思 |
|---|---|
| padding: 5px | 一个值，表示上下左右都得5px内边距 |
| padding: 5px 10px | 两个值，表示上下内边距是5px，左右内边距是10px |
| padding: 5px 10px 20px | 三个值，表示上内边距是5px，左右内边距是10px，下内边距是20px |
| padding: 5px 10px 20px 30px | 四个值，表示上内边距是5px，右内边距是10px，下内边距是20px，左内边距是30px（按顺时针） |
当我们给盒子指定了padding值后，内容和边框就有了距离，添加了内边距；padding影响了盒子的实际大小
如果盒子本身没有指定width、height属性，则此时padding不会撑开盒子的大小。
4、盒子的外边距
margin属性用来设置外边距，即盒子与盒子之间的距离。
| 属性 | 内容 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
内容属性的简写和padding一样。
外边距的典型应用：
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了width宽度
- 盒子左右的外边距都必须设置为：auto
常见的写法：
- margin-left： auto； margin-right： auto；
- margin： auto；
- margin： 0 auto；
注意:
使行内元素和行内块级元素水平居中，只要在它的父级元素里添加：text-align： center
外边距合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-top之和。取两个值中的较大者这种现象被称为：相邻块元素垂直外边距的合并。
解决方案：
尽量只给一个盒子添加margin值。
使用margin定义块元素的垂直外边距，可能会出现外边距的合并。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素上有外边距，同时子元素上也有外边距，此时父元素会塌陷较大的外边距值。
解决方案：
① 可以为父元素定义一个上边框
② 可以为父元素定义上内边距
③ 可以为父元素添加overflow： hidden
也可以用浮动、固定、绝对定位的办法来解决塌陷问题。
5、清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
<style>
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
</style>
注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。但是，转换为块级和行内块级元素就可以了。
6、圆角边框
在CSS3中，新增了圆角边框样式，这样我们的盒子就变成圆角了。
border-radius 属性用于设置盒子的外边框圆角。
语法：border-radius：length
7、盒子阴影
我们可以使用box-shadow属性为盒子添加阴影。
语法：
语法：box-shadow：h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 水平阴影的位置，允许是负值。沿着x轴左右平移 |
| v-shadow | 垂直阴影的位置，允许是负值。沿着y轴上下平移 |
| blur | 模糊的距离。阴影部分是虚的还是实的 |
| spread | 阴影部分的大小尺寸 |
| color | 阴影部分的颜色（rgba） |
| nset | 将外部阴影改为内部阴影 |
文字阴影
我们可以使用text-shadow属性为文字添加阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 水平阴影的位置，允许是负值。沿着x轴左右平移 |
| v-shadow | 垂直阴影的位置，允许是负值。沿着y轴上下平移 |
| blur | 模糊的距离。阴影部分是虚的还是实的 |
| color | 阴影部分的颜色（rgba） |
8、浮动float
标准流
所谓的标准流，就是标签按照默认规定的排列方式进行排列
行内元素、块级元素
浮动流
浮动流最典型的应用：
可以让多个块级元素在一行内排列显示。
网页布局的第一准则：
多个块级元素纵向排列找标准流。多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动的特性：
① 脱离标准普通流的控制，移动到指定位置，俗称脱标。
② 浮动的盒子不在保留原先的位置。
如果多个盒子都设置了浮动，则他们会按照属性值一行内显示，并且顶端对齐排列。
注意：浮动的盒子是相互紧贴在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
行内块元素的相似特性
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后，具有行内块元素的相似特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
- 浮动的盒子中间是没有间隙的，是紧挨着一起的
- 行内元素同理
浮动流元素经常与标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
清除浮动
为什么要清除浮动？
由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面标准流的盒子。会对后面元素的排版产生影响。
清除浮动的方式：
- 可以给父级添加overflow属性，将其属性值设置为hadden、auto、scroll
- after伪元素清除浮动，给父元素添加
<style>
.clearfix:after {
concent: '';
display: block;
height: 0;
clear: both;
visibility: hadden;
}
.clearfix{
*zoom: 1;
}
</style>
- 双伪元素清除浮动，给父元素添加：
<style>
.clearfix:before, .clearfix:after {
concent: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
</style>
9、 CSS属性书写顺序
布局定位属性:
display / position/ float / clear / visbility/ overflow (建议display第一 个写,毕境关系到模式)
自身属性:
width/ height / margin/ padding / border/ background
文本属性:
color/ font / text-decoration/ text- align/ vertical-align/ white- space / break-word
其他属性( CSS3) :
content / cursor / border-radius/ box-shadow / text-shadow/ background:linear-gradient…
10、定位
定位就是将盒子定在某一位置，所以定位也是在摆盒子，按照定位的方式移动盒子。
定位 = 定位模式 边偏移
定位模式是指定一个元素在文档中的定位方式。偏移量则是决定了该元素的最终位置。
边偏移
变偏移就是定位的盒子移动到最终的位置。有top、bottom、left、right四个属性。
| 变偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom : 80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left : 80px | 左部偏移量，定义元素相对于其父元素左边线的距离 |
| right | right : 80px | 右部偏移量，定义元素相对于其父元素右边线的距离 |
1> 相对定位（relative）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
选择器{
position: relative;
}
特点：
它是相对于原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原先的位置继续会占有
2> 绝对定位（absolute）
绝对定位是元素在移动位置的时候，是相对于它的祖先来说的。
语法：
选择器{
position: absolute;
}
特点：
如果没有祖先元素或者祖先元素没有定位，则以浏览器为主定位（Document文档）
如果祖先元素有定位（绝对、相对、固定），则以最近一级的有定位的祖先元素为参考点移动位置。
绝对定位不在占有原先的位置
3> 定位的使用场景
子绝父相
子级绝对定位：不会占有位置，可以放在放到父盒子以内的任何地方，不会影响到其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位
总结：因为父级需要占有位置，所以是相对定位；子盒子不需要占有位置，所以是绝对定位。
4> 固定定位（fixed）
固定定位是元素固定于浏览器可视区位置。 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器{
position: fixed;
}
特点：
- 以浏览器可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不占有原先的位置
-------------------------------: |
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom : 80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left : 80px | 左部偏移量，定义元素相对于其父元素左边线的距离 |
| right | right : 80px | 右部偏移量，定义元素相对于其父元素右边线的距离 |
1> 相对定位（relative）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
选择器{
position: relative;
}
特点：
它是相对于原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原先的位置继续会占有
2> 绝对定位（absolute）
绝对定位是元素在移动位置的时候，是相对于它的祖先来说的。
语法：
选择器{
position: absolute;
}
特点：
如果没有祖先元素或者祖先元素没有定位，则以浏览器为主定位（Document文档）
如果祖先元素有定位（绝对、相对、固定），则以最近一级的有定位的祖先元素为参考点移动位置。
绝对定位不在占有原先的位置
3> 定位的使用场景
子绝父相
子级绝对定位：不会占有位置，可以放在放到父盒子以内的任何地方，不会影响到其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位
总结：因为父级需要占有位置，所以是相对定位；子盒子不需要占有位置，所以是绝对定位。
4> 固定定位（fixed）
固定定位是元素固定于浏览器可视区位置。 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器{
position: fixed;
}
特点：
- 以浏览器可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不占有原先的位置
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhicejig
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22
