HTML网页设计：CSS中相关位置的应用

最新推荐文章于 2023-07-18 17:29:38 发布

少可爱

最新推荐文章于 2023-07-18 17:29:38 发布

阅读量290

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/weixin_43776126/article/details/119008821

版权

一、定位position

定义：给定元素一定的位置

作用:实现侧边导航栏，网页中的广告

1、固定定位

语法：position：fixed+便偏移量【left/top/right/bottom】才能让元素达到自己想要的位置

应用：参考小小千

实现效果：div或者某些元素固定在页面的某个位置

可以让内容脱离标准文档流【完全脱离（文字图片都可以被覆盖）】

2、粘性定位

语法:position:sticky

应用:参考工商银行导航栏

实现效果：如果前面有元素，并且元素有高度，那么他会滑过元素高度之后再执行固定定位；如果前面元素没有或者元素的高度之和小于top后面的属性值，则直接开始。

固定定位：可以让内容脱离标准文档流【完全脱离（文字图片都可以被覆盖）】

3.绝对定位

语法:position:absolute

应用:参考侧边导航栏

实现效果:参考注意点

注意点：如果父级元素有定位，则根据父级元素进行移动，如果父级元素没有定位，则逐级往上找有定位的元素，找到之后按照这个元素的位置开始定位，如果找不到则根据浏览器窗口进行定位

可以让内容脱离标准文档流【完全脱离（文字图片都可以被覆盖）】

4.相对定位

语法:position:relative

应用:参考侧边导航栏

注意点:根据自身的位置进行移动

二、高度自适应

1、以百分比的形式设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        html,body{
            height: 100%;

        }
        .son{
            width: 80%;
            height: 100px;
            /* min-width: 800px; */
            background: red;
        }
        .son1{
            width: 30%;
            height: 100px;
            background: rgb(61, 48, 48);
        }
        .son2{
            width: 20%;
            height: 100px;
            background: rgb(31, 163, 224);
        }
    </style>
</head>
<body>
    <div class="son">
        <div class="son1">

        </div>
    </div>
    <div class="son2">

    </div>
</body>
</html>

2、最小高度min-heigh

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .wrap{
            /* height: 200px; */
            min-height:200px;
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
        <h1>自适应</h1>
    </div>
</body>
</html>

三、锚点定位

定义：点击某内容跳转到指定区域


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点定位</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            width: 100%;
            height: 100px;
            border: 1px solid red;
        }
        a{
            text-decoration: none;
        }
        p{
            width: 100%;
            height: 800px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <!-- <div></div> -->
    <a href="#id1">跳转到id1区域</a>
    <a href="#id2">跳转到id2区域</a>
    <a href="#id3">跳转到id3区域</a>
    <div></div>
    <p id="id1">
        id1区域
    </p>
    <p id="id2">
        id2区域
    </p>
    <p id="id3">
        id3区域
    </p>
</body>
</html>

四、垂直居中

什么是垂直居中：在垂直方式设置元素的位置。

应用场景：log垂直居中，下拉菜单垂直居中，控制文本与图片的位置。

语法：vertical-align

属性值： middle【实现垂直居中】/top【line-height的最上方】/text-top/bottom【line-height的最下方】/text-bottom【文字的最下方】/baseline

五、高度自适应的解决方法

1、给产生高度塌陷的元素加overflow:hidden

实现原理：触发bfc,bfc在计算高度时会把浮动的元素的高度计算在内

缺点：如果有定位的元素时，则会隐藏【切记！！】

2、给产生高度塌陷的元素最后面添加一个div：并且给它设置高度为0，clear:both【清除浮动对添加的div的影响】

实现原理：清除浮动带来的影响

缺点：代码的冗余

3、万能法：:after{content".";display:block;clear:both;heigth:0;overflow:hidden;visibility:hidden;}

好处:1.如果-一个界面中有多个高度塌陷的存在，减少重复代码的使用量;

2.避免了定位元素被隐藏。

        .wrap::after{
            /* 给它加一个小点 */
            content: '.';
            /* 清除子元素附近的浮动的元素带来的影响 */
            clear: both;
            /* 转化为块 */
            /* display: block; */
            /* 高度为0 */
            /* height: 0px; */
            /* 溢出隐藏 */
            /* overflow: hidden; */
            /* 清除色块【为了避免可能残存的小色块】 */
            /* visibility: hidden; */
        }

少可爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML网页设计：CSS中相关位置的应用

一、定位position定义：给定元素一定的位置作用:实现侧边导航栏，网页中的广告 1.固定定位语法：position：fixed+便偏移量【left/top/right/bottom】才能让元素达到自己想要的位置应用：参考小小千实现效果：div或者某些元素固定在页面的某个位置可以让内容脱离标准文档流【完全脱离（文字图片都可以被覆盖）】 2.粘性定位语法:position:sticky 应用:参考工商银行导航栏 ...
复制链接

扫一扫