【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

最新推荐文章于 2024-03-17 13:35:00 发布

VIP文章 zhiqiang21

最新推荐文章于 2024-03-17 13:35:00 发布

阅读量8k

点赞数 1

分类专栏： HTML+CSS 从0到1学Web前端文章标签：相对定位绝对定位 Web前端

本文链接：https://blog.csdn.net/yisuowushinian/article/details/46038423

版权

引子：

开始的时候我想先要解决一个问题，怎么设置一个div盒子撑满整个屏幕？

看下面的html代码：

<body>
    <div id="father-body">
        <div class="item1"></div>
    </div>
</body>

实现方法一：

html, body,#father-body{
            height:100%;
            width:100%;
            background-color:#123456;
        }

这里主要解释下%(百分号)在CSS中使用的问题。% 主要是在父级元素或者是祖先元素定义了固定的width 和height 的时候才可以使用（或者说使用的时候才会有效果）。

实现方法二：

#father-body{
            position:fixed;
            width:100%;
            height:100%;
            background-color:#123456;
        }

这里为#father-body 设置position属性，触发自身的BFC。当对自身使用width 和 height的时候才可以生效。

position的fixed值的含义：

对象脱离常规流，使用 top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

position属性的几个值的概念：

position的属性值

1.相对定位

有了以上的定义，来看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .item1, .item2, .item3{
        width:300px;
        height:

最低0.47元/天解锁文章

zhiqiang21

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

到这里可以验证当使用`top` `right` `bottom` `left` ***（这四个属性可以设置具体的像素数也可以设置百分比）***这样属性改变元素的位置的时候，不会影响其他元素的位置。而使用`margin` 这样的属性改变元素的位置会影响其他元素的位
复制链接

扫一扫