学了快一年事件的前端了,目前在主攻vue,很长一段时间构建前端页面都是依靠elenet-ui,bootstarp之类的,最近想来用纯HTML,css(静态网站)来写页面布局(今后肯定会有高度定值化的网站布局了),发现之前学过的东西有很多知识都变得非常的不熟练,还有很多的细节之前的学习过程被忽视了,这一篇博客主要是来记录复习的知识点
行内元素
块级元素’
5. 每个块级元素都会自己独自占据一行
6. 高度,行高,内外边距都是可以单独设置的
7. 默认的宽度为容器的100%
行内块元素
简单来说就是讲行内元素和块级元素两者的特点进行了结合
display: block; 将元素定义为块级元素
display: inline; 将元素定义为行内元素
display: inline-block; 将元素定义为行内块元素
对于position有五种应用与元素定位的方法类型,分别是:
<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>
<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>
//把注释去掉了而已
总结来说就是这个定位属性是相对与视图窗口定位的,并且会随着页面的滚动而滚动,大家不妨看一下王者荣耀官网,右侧那个飘动的小妲己就是这个功能实现的(本来想插个图片的,结果说妲己图片违规)
简单的来说就是,在页面滚动的时候,只要接触到页面的边界,定位属性就会从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,伪类选择器其主要的功能实现就是鼠标悬浮在某一个元素上,从而引起一些元素的变化。注意::hover只能操作它本身或者它下面的子元素,其他任何元素无法操控。所以hover后面只能接其子元素。(这点虽然很少,但是真的很重要,之前帮同学该代码的时候就是这个地方没办法实现相应的样式)
之后的内容会继续更新