一.定位

相对定位、绝对定位、固定定位

position:static 默认值 默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位

**注意：**元素一旦设置了position，并且取值为relative/absolute/fixde其中一种时

1.这个元素被称为已定位元素
2.解锁四个方向的定位属性：top / right / bottom / left
左右冲突以left为准
3.会解锁堆叠属性z-imdex

1.相对定位

position:relative; 配合偏移属性
不脱离文档流，不影响周围元素
如果一个元素设置了相对定位，并且不写偏移属性，这个元素对页面没有任何影响
如何偏移：相对自己原先位置偏移

使用场合：
①做元素位置的微调
②作为绝对定位的祖先级已定位元素

2.绝对定位

position:absolute;配合偏移属性
绝对定位，脱离文档流

如何偏移：
①如果元素没有已定位的祖先元素，绝对定位元素相对body左上角进行偏移
②以“最近的”“已定位的”“祖先级”元素左上角做偏移，子绝父相
使用场合：页面布局中使用，可以让页面移动到页面的任何位置

3.固定定位

position:fixed; 配合偏移属性
如何偏移：相对于body左上角
使用场合：把元素永远固定在页面可视区域的一个位置

4.堆叠顺序

z-index:
1
注意事项：
1.HTML代码中后写的元素堆叠顺序高
2.z-index：默认值大于0小于1
3.浮动在第几层小于0 大于-1
4.只有已定位的元素才能设置堆叠
5.堆叠顺序对父子级元素无效，儿子永远压着父亲

二、

1.HTML标签

1.1link

作用：引用外部资源
属性：rel、href
主要功能：引入css、网页图标等

<!--引入外部css
stylesheet定义引入的格式为样式表href属性代表引入的链接（地址）--> <link rel="stylesheet" href="css/index.css" /

<!--引入外部css
icon定义引入的格式为网页的图标
href属性代表引入的链接（地址）
-->
<link rel="icon" href="./img/tb.png" />

1.2meta

功能：定义页面的文本编码类型、定义窗口大小对应的显示模式

<!--定义编码类型为utf-8
-->
<meta charset="utf-8" />

<!--name="viewport"表示的是定义窗口视图情况
content="width=device-width, initial-scale=1.0"
width=device-widthL:表示根据设备的视图宽度调整网页宽度
initial-scale=1.0：设置浏览器首次加载页面时的初始缩放级别
--><meta name="viewport" content="width=device-width, initial-scale=1.0" />

1.3文本类标签

p：表示一个段落
i：表示斜体文本
span：用于定义单独样式（使用css定义）
strong：表示文本粗体

<p>
这是一个段落<i>这是i标签的内容</i><br />
<span id="" class="">这是span的内容</span><br />
<strong>这是strong的内容</strong>
</p>

1.4其余

video：标签定义视频，比如电影片段或其他视频流
audio：标签定义声音，比如音乐或其他音频流
canvas：用来处理图片、绘制图像等功能，是使用JavaScript操作图像的技术， HTML5 中的新标签
echarts库：用来制作图表的技术，后端程序员需要掌握

2.CSS拓展

2.1`页面中长度单位的定义

vw、vh：
根据屏幕百分比来计算显示使用的像素值，100vw表示占屏幕宽度100%，主要用于移动端开发，适配不
同大小的屏幕
font-size、em：
font-size：用于定义单位长度的像素值
em：1em等于1个font-size的长度
好处：统一了长度的大小，可以只改变font-size，就改变了所有的元素的大小

css：定位部分以及相关拓展知识相关推荐

【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识
react代码资料: 文件:packages/react-dom/src/client/setInnerHTML.js /*** Copyright (c) Facebook, Inc. and it ...
java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位定位能解决的解决问题: 定位的使用静态定位相对定位绝对定位绝对定位特点子绝父相子绝父相vs子绝父绝子绝父相案例子绝父相水平居中案例子绝父相水平垂直都居中案例导 ...
css位置布局,CSS定位布局相关
本文档包括CSS的样式定位框模型如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
Web前端知识CSS（CSS定位、CSS透明、阴影、边框圆角）
一.CSS 定位定位的作用普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...
【RAC】RAC相关基础知识
[RAC]RAC相关基础知识 1.CRS简介从Oracle 10G开始,oracle引进一套完整的集群管理解决方案--Cluster-Ready Services,它包括集群连通性.消息和锁. ...
css定位的百分比的算法,css定位中的百分比
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比首先从css的设计意图说起,在浏览器默 ...
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...

css：定位部分以及相关拓展知识

文章目录