前端css定位

于 2024-09-01 19:28:10 发布
阅读量489 收藏 3
点赞数 23
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39218045/article/details/141788543
版权
一、定位 position
位置：
top ：距离上面的位置
bottom ：距离下面的位置
left ：距离左边的位置
right: 距离右边的位置
1. 相对定位 relative
当前位置也是自身位置 进行移动 ( 参照物 )
css 代码
html 代码
<style>
#box {
width : 500px ;
height : 500px ;
background-color : darkmagenta ;
/* 改变紫色盒子的位置 */
margin-top : 100px ;
margin-left : 100px ;
}
#box1 {
width : 100px ;
height : 100px ;
background-color : chartreuse ;
/* 设置这个绿色的盒子为相对定位 */
position : relative ;
/* position 定位要结合位置描述属性去进行使用才会产生效果 */
top : 50px ;
left : 50px ;
}
</style> <!-- 参照物 div -- box -->
<div id = "box" >
<!-- 用于演示相对定位的 box1 -->
<div id = "box1" >
相对定位盒子
</div>
</div>
2. 绝对定位 absolute
相对于浏览器的位置 而且不占网页位置
css 代码
<style>
#box {
width : 500px ;
height : 500px ;
background-color : darkmagenta ;
/* 改变紫色盒子的位置 */
margin-top : 100px ;
margin-left : 100px ;
}
#box2 {
width : 100px ;
height : 100px ;
background-color : pink ;
/* 设置这个粉色的盒子为绝对定位 */
position : absolute ;
/* position 定位要结合位置描述属性去进行使用才会产生效果 */
top : 150px ;
left : 250px ;
}
</style>
html 代码
<!-- 参照物 div -- box -->
<div id = "box" >
<!-- 用于演示绝对定位的 box2 -->
<div id = "box2" >
绝对定位盒子
</div>
</div>
相对定位与绝对定位对比 - 案例完整代码：
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8" > <title> 相对定位和绝对定位 </title>
<style>
/* css 代码书写位置 */
body {
margin : 0px ;
padding : 0px ;
}
#box {
width : 500px ;
height : 500px ;
background-color : darkmagenta ;
/* 改变紫色盒子的位置 */
margin-top : 100px ;
margin-left : 100px ;
}
#box1 {
width : 100px ;
height : 100px ;
background-color : chartreuse ;
/* 设置这个绿色的盒子为相对定位 */
position : relative ;
/* position 定位要结合位置描述属性去进行使用才会产生效果 */
top : 50px ;
left : 50px ;
}
#box2 {
width : 100px ;
height : 100px ;
background-color : pink ;
/* 设置这个粉色的盒子为绝对定位 */
position : absolute ;
/* position 定位要结合位置描述属性去进行使用才会产生效果 */
top : 150px ;
left : 250px ;
}
</style>
</head>
<body>
<!-- 相对定位和绝对定位
相对定位是相对于之前盒子出生点去进行位置描述，该定位会受到周围环境影响。
绝对定位是相对于整个浏览器窗口进行定位，它是脱离文档流的，不受周围环境影响。
-->
<!-- 参照物 div -- box -->
<div id = "box" >
<!-- 用于演示相对定位的 box1 -->
<div id = "box1" >
相对定位盒子
</div>
<!-- 用于演示绝对定位的 box2 -->
<div id = "box2" >
绝对定位盒子 </div>
</div>
</body>
</html>
3. 固定定位 fixed
固定在一个位置
css 代码
<style>
#box0 {
width : 100% ;
height : 54px ;
background-color : brown ;
/* 设置这个砖红色盒子为固定定位 */
position : fixed ;
top : 0px ;
left : 0px ;
}
#box1 {
width : 100% ;
height : 2000px ;
background-color : darkorchid ;
}
</style>
html 代码
<!-- box0 盒子是用于模拟固定不动栏的 -->
<div id = "box0" ></div>
<!-- box1 盒子是用于模拟网页内容的 -->
<div id = "box1" ></div>
详细案例：
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8" >
<title> 固定定位 </title>
<style>
body {
margin : 0px ;
padding : 0px ;
}
#box0 {
width : 100% ;
height : 54px ;
background-color : brown ; 二、 flex 布局
1. 前言
2009 年， W3C 提出了一种新的方案 —- Flex 布局 ，可以简便、完整、 响应式 地实现各种页面布局。目前，
它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
2. 何为 Flex 布局
” 弹性布局 ” ，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。
3. 使用 flex
一、 创建 Flex 容器 ： 使用 Flex 布局，首先需要创建一个 Flex 容器，即一个元素的父级元素。在父级元素
上应用 display: flex 样式，以将其设置为 Flex 容器。例如：
二、 定义 Flex 项目 ： 将要放置在 Flex 容器内的元素称为 Flex 项目。这些项目将根据 Flex 容器的规则进行
布局。 默认情况下， Flex 项目会水平排列。可以通过在 Flex 容器上应用其他 CSS 属性来更改 Flex 项目的布
局方式，如 flex - direction 、 justify - content 和 align - items 等。例如：
案例 css 代码
/* 设置这个砖红色盒子为固定定位 */
position : fixed ;
top : 0px ;
left : 0px ;
}
#box1 {
width : 100% ;
height : 2000px ;
background-color : darkorchid ;
}
</style>
</head>
<body>
<!-- box0 盒子是用于模拟固定不动栏的 -->
<div id = "box0" ></div>
<!-- box1 盒子是用于模拟网页内容的 -->
<div id = "box1" ></div>
</body>
</html>
< style >
.box1 {
display : flex ;
}
</ style >
< div class = "box1" >
< div class = "box1_01" > Flex 项目 1 </ div >
< div class = "box1_01" > Flex 项目 2 </ div >
</ div >
<style> /*
flex 布局 - 容器的一些属性：
flex-direction （默认值： row ）用于定义 Flex 项目的排列方向。
可选值包括：
row ：水平方向（默认值），从左到右排列。
row-reverse ：水平方向，从右到左排列。
column ：垂直方向，从上到下排列。
column-reverse ：垂直方向，从下到上排列。
justify-content （默认值： flex-start ）用于定义 Flex 项目在主轴上的对齐方式。
可选值包括：
flex-start ：在主轴起始位置对齐。
flex-end ：在主轴末尾位置对齐。
center ：在主轴中心位置对齐。
space-between ：在主轴上均匀分布，首个项目放在起始位置，末尾项目放在末尾位
置。
space-around ：在主轴上均匀分布，项目之间和两侧均有空间。
space-evenly ：在主轴上均匀分布，包括首个项目和末尾项目两侧的空间。
align-items （默认值： stretch ）用于定义 Flex 项目在侧轴上的对齐方式。
可选值包括：
stretch ：默认值，如果项目未设置固定的侧轴尺寸，则会拉伸以填满容器。
flex-start ：在侧轴起始位置对齐。
flex-end ：在侧轴末尾位置对齐。
center ：在侧轴中心位置对齐。
baseline ：以基线对齐，适用于文本等。
*/
.box1 {
width : 100% ;
height : 100vh ;
display : flex ;
flex-direction : row ; /* 水平排列项目（默认值） */
justify-content : center ; /* 水平居中对齐项目 */
align-items : center ; /* 垂直居中对齐项目 */
}
.box1_01 {
padding : 20px ;
border : 1px solid #000 ;
}
</style>
案例 html 代码
<!-- 先创建一个盒子，作为 flex 容器 -->
<div class = "box1" >
<div class = "box1_01" > Flex 项目 1 </div>
<div class = "box1_01" > Flex 项目 2 </div>
</div>
湫風如兮
关注
  • 23
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端——CSS中常用的定位方式
Bingtangbgd的博客
07-03 1482
前端——CSS中常用的定位方式
css 定位连线_前端css实现两点连线
weixin_39897267的博客
12-22 4359
// dots是点的集合 : Arraydots.map((dot, index) => {// 最后一个点没有连线if (!dot[index + 1]) return;const AB = {x: dots[index + 1].x - dot.x,y: dots[index + 1].y - dot.y,}const BC = {x: 0,y: 1,}// 向量的模const a = ...
【前端】深入理解CSS定位
山赶着山，山山漫漫结成关
08-18 3536
CSS定位是用来控制元素在页面上的位置和排列方式的技术。普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。普通流：元素默认从上至下或者从左至右的排序顺序浮动流：添加了浮动的元素定位流：添加了定位的元素，包括相对定位、绝对定位、固定定位接下来，博主会从CSS定位、CSS边偏移、元素的显示与隐藏，这三部分进行讲解静态定位是元素的默认定位方式，无定位的意思#静态定位语法相对定位是元素在移动位置时，是相对于它原来的位置来说的#相对定位语法绝对定位。
【web前端开发】CSS定位
云泽野の编程日记
04-21 1640
定位有两个作用:1.可以解决盒子和盒子之间的层叠问题(定位之后元素层级最高,可以层叠在其它盒子上面)2.可以让盒子始终固定在屏幕中的某个位置属性名:position定位方式属性值静态定位static相对定位relative绝对定位absolute固定定位fixedps: 这四个取值中第一个就是不定位,加和不加都是一个效果.设置position只是设置定位的方式.除了定位方式还要设置偏移值偏移值设置分为两个方向(水平和垂直方向)方向属性名属性值含义水平left。
CSS定位
热门推荐
Ma_jiao的博客
07-14 1万+
定位 是布局中的重要属性，一般用于盖压效果与位置相关效果。 position 给元素设置整体定位，必须同时存在position属性和偏移量属性。 属性值 说明 relative 相对定位 absolute 绝对定位 fixed 固定定位 偏移量属性 定位的元素，在水平或垂直方向需要偏移的距离。 水平：left、right 垂直：top、bottom relstive(相对定位) 参考这个元素原始应该加载的位置。 相对定位没有脱离原始状态（标准流，浮动），它不会让出原来占有的位
css定位属性
weixin_48180273的博客
01-28 4893
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
前端基础入门之css定位 position
LoveSummer
06-21 1万+
需求分析按照我们之前所学知识，可以怎么实现呢？应该来说不难，很容易实现 我们分别给 box2 和 box3 添加了外边距之后，就可以达到需求效果当然也可以使用浮动来解决上述问题，但稍微麻烦一点不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景那么就势必需要一个方便我们处理这种场景的办法，它就是定位呸！不是！糟老头子定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用属
css之sticky定位
Kratial的博客
10-08 8076
css之sticky定位
CSS的五种定位方式
mcdcakfke的博客
03-15 812
（1）学习定位一定要重点关注定位的两个点：1、
CSS进行DIV定位
做一件事之前就要做好最坏的打算
08-02 957
CSS进行DIV定位。
前端css定位.pdf
07-28
总的来说，CSS定位技术为前端布局提供了强大的控制能力，可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式（标准流、浮动、定位）中的应用，对于前端开发者来说至关重要。在网页布局中，定位通常是在...
web前端CSS题库.docx
07-02
### Web前端CSS题库知识点详解 #### CSS样式表的写法及优先级 - **CSS样式表的三种写法：** - **内联样式表（Inline Style）**：直接在HTML标签中通过`style`属性添加样式。适用于对单个元素进行样式设置的情况。...
自学前端CSS层叠样式表
12-13
在前端开发领域，CSS（Cascading Style Sheets）层叠样式表是不可或缺的一部分，它用于控制网页元素的外观和布局。CSS使得HTML或XML（包括SVG、MathML等各种XML方言）文档具有丰富的呈现效果，包括字体、颜色、大小...
Window Performance API
Bruce__taotao的博客
08-28 1462
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
前端的面试题
最新发布
本人小可爱
08-30 227
【代码】前端的面试题。
vue ref和reactive区别
灰海
08-25 5760
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 588
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
AI 大模型时代，对前端工程师有哪些机遇和挑战？
Z4400840的博客
08-28 2343
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
前端开发学习Docker记录02容器操作
第⑦个前端
08-29 3473
使用docker ps 可以看到有哪些镜像在运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值