css简直恐怖如斯！！! css之前端必知属性！！！

最新推荐文章于 2024-07-22 22:37:58 发布

海在诉说离别

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量597

点赞数 21

文章标签： html 前端 css

本文链接：https://blog.csdn.net/nemey/article/details/136744936

版权

本文详细介绍了CSS中实现元素隐藏的多种方法，元素之间的转换规则，以及静态、相对、绝对和固定定位的使用，同时涵盖了弹性布局（Flexbox）的设置和注意事项。

摘要由CSDN通过智能技术生成

一、css中实现元素隐藏的几种方法

1.opsition:0;

通过透明实现元素隐藏，视觉上隐藏但仍然存在

2.display:none;

标签消失，不占页面位置，不显示

3.display:block;

独占一行，可设置宽高，块显示

二、如何进行元素转换

1. 行元素：（a，span，b，ins）

可以同别的元素在一行显示，但不可以设置宽高

行内块：（img，input）

可以同别的元素在一行显示，可设置宽高

块：（div，p，h1，li）

独占一行，可设置宽高

2.如何将行元素转换为行内块、块？

（1）行元素转换为块

div{
    display:block;
}

（2）转换为行内块

div{
    display:inline-block;
}

三、定位

1.定位
(1)静态static：
所有的标签默认都是静态的static，无法改变位置（即使加top/right/bottom/left等参数也不会影响）
默认标签为：position: static;

(2)相对定位relative：
用处:在相对于标签原来的位置做移动relative,设置此属性之后仍然处在文档流中，不影响其他元素的布局
用法:把默认静态定位改为相对定位position: relative;
然后相对原来位置调整位置top/right/bottom/left

(3)绝对定位absolute：
概念:相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照),本质脱离文档流
用处:当不知道页面其他标签的位置和参数，只知道一个父标签的参数，基于该标签进行位置调整
用法：

1)首先在使用绝对定位时，该标签的父标签不可以是静态标签，父标签要设置position: relative;或position: absolute;否则标签会以body为位置参照
2)然后把该标签的默认静态定位改为绝对定位position: absolute;
3)最后以父标签位置做参照调整位置top/right/bottom/left

(4)固定定位fixed
概念：相对于浏览器窗口固定在某个位置,本质脱离文档流
用处：如右下侧回到顶部
用法：position: fixed; 写了fixed之后定位就是依据浏览器窗口，上下滑动位置不变然后以浏览器为参照调整位置top/right/bottom/left

标签由static变为relative或absolute，它的性质就从原来没有定位的标签变成了已经定位过的标签

3.相对定位relative例子代码

<html>
    <head>
        <style>
            body{
                margin: 0;
            }
            #d1{
                height: 500px;
                width: 500px;
                background-color: burlywood;
            }
            #d2{
                background-color: aquamarine;
                height: 300px;
                width: 300px;
                position: relative;
                top: 50px;
                right: 30px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                    今天星期五
            </div>
        </div>
    </body>
</html>

4.绝对定位absolute例子代码：

<html>
    <head>
        <style>
            body{
                margin: 0;
            }
            #d1{
                height: 500px;
                width: 500px;
                background-color: burlywood;
                position: relative;            
        /*f父标签不可以是静态标签，要改relative或absolute*/
            }
            #d2{
                background-color: aquamarine;
                height: 300px;
                width: 300px;
                position: absolute;
                top: 50px;
                right: 30px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                    明天周六放假
            </div>
        </div>
    </body>
</html>

四、弹性布局

这种布局方式是把HTML网页中每一个元素都看成1个能够进行自由伸缩的盒子模型

任何一个html中的元素都可以指定为flex盒子模型。

1.首先要让这个盒子变成弹性盒子

div{
    display: flex;
}

2.然后再让这个盒子中的元素左右居中

div{
    justif-content:center;
}

3.最后让这个盒子中的元素上下居中

div{
    align-items:center;
}

注意点：

当元素设为 Flex 布局元素以后，当前flex盒模型元素的子元素的float、clear和vertical-align属性将失效，因为flex布局本身也提供了替代的属性。

海在诉说离别

关注

21
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css简直恐怖如斯！！! css之前端必知属性！！！

所有的标签默认都是静态的static，无法改变位置（即使加top/right/bottom/left等参数也不会影响）用处:在相对于标签原来的位置做移动relative,设置此属性之后仍然处在文档流中，不影响其他元素的布局。用处:当不知道页面其他标签的位置和参数，只知道一个父标签的参数，基于该标签进行位置调整。1)首先在使用绝对定位时，该标签的父标签不可以是静态标签，父标签要设置。概念:相对于已经定位过的父标签做移动(如果没有父标签那么就以。，它的性质就从原来没有定位的标签变成了已经定位过的标签。
复制链接

扫一扫