原生Html，Css的重要知识点
学了快一年事件的前端了，目前在主攻vue，很长一段时间构建前端页面都是依靠elenet-ui，bootstarp之类的，最近想来用纯HTML，css(静态网站)来写页面布局（今后肯定会有高度定值化的网站布局了），发现之前学过的东西有很多知识都变得非常的不熟练，还有很多的细节之前的学习过程被忽视了，这一篇博客主要是来记录复习的知识点
目录
-
- 首先来讲一下行内元素和块级元素
- 来讲讲css定位position
-
- static
- relative（重点）
- absolute（重点）
- fixed
- sticky
- 伪类选择器
-
- :hover（重点）
首先来讲一下行内元素和块级元素
行内元素
- 与兄弟元素都是在一行里边
- 不占有独立的区域，仅仅依靠自己的字体大小或者图像大小来支撑结构
- 一般是不可以设置宽度，高度以及对其等属性。（这一点是非常值得注意的）
- 水平方向的margin和padding是可以设置的
块级元素’
5. 每个块级元素都会自己独自占据一行
6. 高度，行高，内外边距都是可以单独设置的
7. 默认的宽度为容器的100%
行内块元素
简单来说就是讲行内元素和块级元素两者的特点进行了结合
display: block; 将元素定义为块级元素
display: inline; 将元素定义为行内元素
display: inline-block； 将元素定义为行内块元素
来讲讲css定位position
对于position有五种应用与元素定位的方法类型，分别是：
- static
- relative
- absolute
- fixed
- sticky
元素位置的操作其实都是通过top，bottom，left，right属性进行定位的，但是必须得设置position属性，才可以使用之前的top等属性，不同的position属性的值对应不同的定位方式
static
- HTML 元素默认情况下的定位方式为 static（静态）。
- 静态定位的元素不受 top、bottom、left 和 right 属性的影响。
- position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
简而言之就是该怎样就是怎么样的，因为默认形式就是这个
relative（重点）
- position: relative; 的元素相对于其正常位置进行定位。
- 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。
- 这个地方是相对自己本身的位置进行偏移，而且原先位置同样没有消失
<style>
div {
height: 100px;
}
.name1{
background: red;
}
.name2{
position: relative;
top: 10px;
left: 20px;
background: blue;
}
.name3{
background: #e4b653;
}
style>
head>
<body>
<div class="name1">div>
<div class="name2">div>
<div class="name3">div>
body>
absolute（重点）
- position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
- 然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
- 注释: "被定位的"元素是其位置除 static 以外的任何元素。
- 还有一点值得注意（与relative不同的地方），元素移动之后之前的位置不会空在那。
这个是未改变之前的样式
<style>
.header{
display: inline-block;
/*position: relative;*/
}
.name1,.name2,.name3 {
display: inline-block;
width: 100px;
height: 100px;
}
.name1{
background: red;
}
.name2{
/*position: absolute;*/
/*top: 10px;*/
/*left: 20px;*/
background: blue;
}
.name3{
background: #e4b653;
}
style>
head>
<body>
<div class="header">
<p>acxgdxyp>
<div class="name1">div>
<div class="name2">div>
<div class="name3">div>
div>
body>
这个是改变之后的样式
<style>
.header{
display: inline-block;
position: relative;
}
.name1,.name2,.name3 {
display: inline-block;
width: 100px;
height: 100px;
}
.name1{
background: red;
}
.name2{
position: absolute;
top: 10px;
left: 20px;
background: blue;
}
.name3{
background: #e4b653;
}
style>
head>
<body>
<div class="header">
<p>acxgdxyp>
<div class="name1">div>
<div class="name2">div>
<div class="name3">div>
div>
body>
//把注释去掉了而已
fixed
- position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
- 固定定位的元素不会在页面中通常应放置的位置上留出空隙。
总结来说就是这个定位属性是相对与视图窗口定位的，并且会随着页面的滚动而滚动，大家不妨看一下王者荣耀官网，右侧那个飘动的小妲己就是这个功能实现的（本来想插个图片的，结果说妲己图片违规）
sticky
- position: sticky; 的元素根据用户的滚动位置进行定位。
- 粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其"粘贴"在适当的位置（比如 position:fixed）。
简单的来说就是，在页面滚动的时候，只要接触到页面的边界，定位属性就会从relative变成fixed
举例：
开始的时候没有接触到顶部（即距顶部的距离>20px），所以表现的为relative，当我们进行页面滚动的时候（到顶部的距离为20px）
可见不管你后边怎么移动都不相对视图窗口的位置都不会变了
这里的距离边框的位置是可以自己定义的，我在这里是距离top 20px
<style>
.header{
display: inline-block;
margin-top: 20px;
}
p{
position: sticky;
top: 20px;
background: aqua;
}
.name1,.name2,.name3 {
display: inline-block;
width: 100px;
height: 2000px;
}
.name1{
background: red;
}
.name2{
background: blue;
}
.name3{
background: #e4b653;
}
style>
head>
<body>
<div class="header">
<p>acxgdxyp>
<div class="name1">div>
<div class="name2">div>
<div class="name3">div>
div>
body>
伪类选择器
这里我不会讲所有的伪类选择器进行讲解，我只讲经常使用的
- 锚伪类
- ：hover
- :first-child:伪类与指定的元素匹配：该元素是另一个元素的第一个子元素
- :lang 伪类允许您为不同的语言定义特殊的规则。(这个我感觉我目前用的非常的少)
:hover（重点）
:hover，伪类选择器其主要的功能实现就是鼠标悬浮在某一个元素上，从而引起一些元素的变化。注意：:hover只能操作它本身或者它下面的子元素，其他任何元素无法操控。所以hover后面只能接其子元素。（这点虽然很少，但是真的很重要，之前帮同学该代码的时候就是这个地方没办法实现相应的样式）
之后的内容会继续更新