web前端开发人员要求，CSS的行内样式与内联样式

最新推荐文章于 2024-07-05 11:58:23 发布

程序员酷暑

最新推荐文章于 2024-07-05 11:58:23 发布

阅读量170

点赞数

分类专栏：程序员文章标签：面试前端大前端

本文链接：https://blog.csdn.net/m0_60305027/article/details/119026694

版权

程序员专栏收录该内容

32 篇文章 1 订阅

订阅专栏

在CSS中，可以使用position属性来定位元素。position 属性规定元素的定位类型。

属性值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

相对定位：

相对于其正常位置进行定位。(可以用来对标签的位置进行微调)

 <html>
<head>
<title>相对定位</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 2000px;
}
#span2{
position: relative;/*设置定位方式为相对定位*/
top: 20px;
left: 14px;
}
</style>
</head>
<body>
<span id="span1">这是一</span>
<span id="span2">这是二</span>
<span id="span3">这是三</span>
</body>
</html>

固定定位

始终相对于浏览器窗口进行定位。

<html>
<head>
<title>固定定位</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 2000px;
}
div{
width: 500px;
height: 300px;
border:solid 2px red;
position: fixed;/*设置定位方式为固定定位*/
bottom:500px 1px ;
}
p{
float: right;
}
</style>
</head>
<body>
<div>这是一个div盒子</div><br>
<p>这个不会动</p>
</body>
</html>

绝对定位

相对于 static 定位以外的第一个父元素进行定位。

<head>
<title>绝对定位</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 400px;
border: solid 2px red;
/*给div设置相对定位，使得div作为section的参照物进行绝对定位*/
position: relative;
}
section{
width: 50px;
height: 40px;
background-color: yellow;
position: absolute;/*设置定位方式为绝对定位*/
/*让section始终在div右下角*/
/*让section相对在div右侧距离为0*/
/*让section相对在div低侧距离为0*/
/*绝对定位必须设置参照物，若未设置参照物，则相对于body进行定位*/
right: 0px;
bottom: 0px;
}

</style>
</head>
<body>
<div>
<section></section>
</div>
</body>

深入拓展

1、vue开发命令 npm run dev 输入后的执行过程

2、vue的服务器端渲染

3、从零写一个npm安装包

4、vue-cli中常用到的加载器

5、webpack的特点

深入拓展

**结语：**需要前端学习资料或者想要学习前端的小伙伴可以点击这里一起交流学习，CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题总结，都可以免费获取！

要前端学习资料或者想要学习前端的小伙伴可以点击这里一起交流学习，CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题总结，都可以免费获取！

程序员酷暑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端开发人员要求，CSS的行内样式与内联样式

在CSS中，可以使用position属性来定位元素。position 属性规定元素的定位类型。属性值：absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。relative：生成相对定位的元素，相
复制链接

扫一扫