前端定位

最新推荐文章于 2024-09-01 19:28:10 发布

sun_qqq

最新推荐文章于 2024-09-01 19:28:10 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： html+css 前端样式 html 水平居中 position

本文链接：https://blog.youkuaiyun.com/sun_qqq/article/details/83305585

前端开发专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了使用CSS进行网页布局的高级技巧，包括如何通过设置父级和子级元素的定位属性实现元素的水平和垂直居中，如何创建覆盖整个文档的浮层，以及如何制作响应式弹框。这些技巧对于前端开发者来说至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父级元素设置relative，子级元素设置absolute，宽度设一个固定长度。如何让子级元素水平居中？
子级元素设置margin:0 auto,left:0,right:0
2.父级元素设置relative，子级元素设置absolute，如何使子级元素宽度和父级宽度一样？
子级元素设置width:100%。
3.做一个浮层，浮在整个文档上面。
用absolute只能占据一屏，用fixed才能覆盖整个文档

position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
opacity: .5;
background-color: #000;position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
opacity: .5;
background-color: #000;

4.实现弹框水平、垂直居中。参考https://www.cnblogs.com/ada-blog/p/7242664.html

<div style="position: fixed;top: 0;bottom: 0;left:0;right:0;">
	<div class="WriteMessageFrame"></div>
</div>
	
.WriteMessageFrame {
    background-color: @fore_color;
    width: 42rem;
    height: 10rem;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
}