【前端】css笔记（8）

最新推荐文章于 2024-08-15 18:19:19 发布

足足一米58

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量114

点赞数 4

分类专栏： css 文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_61731785/article/details/126094260

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

目录:

display属性

用来隐藏某个元素，设置一个元素应如何显示：

<style>
h1.hidden {display:none;}
</style>

ps：

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

<style>
li{display:inline}
</style>

ps：

将此链接列表显示为水平菜单

<style>
span
{
display:block;
}
</style>

ps：

将元素显示为块级元素

visibility属性

用来隐藏某个元素，指定一个元素应可见还是隐藏：

<style>
h1.hidden {visibility:hidden;}
</style>

ps：

display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

<style>
tr.collapse {visibility:collapse;}
</style>

ps：

删除一行或一列，不影响表格的布局

position 属性

为一个元素定位，也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定 position 属性

static 定位

默认值，即没有定位，元素出现在正常的流中

fixed 定位

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动：

<style>
p.pos_fixed
{
   position:fixed;
   top:30px;
   right:5px;
}
</style>

ps：

fixed 定位使元素的位置与文档流无关，因此不占据空间
fixed 定位的元素和其他元素重叠

relative 定位

相对定位元素的定位是相对其正常位置：

<style>
h2.pos_left
{
   position:relative;
   left:-20px;
}

h2.pos_right
{
   position:relative;
   left:20px;
}
</style>

ps：

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变

<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>

ps：

相对定位元素经常被用来作为绝对定位元素的容器块

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>:

<style>
h2
{
   position:absolute;
   left:100px;
   top:150px;
}
</style>

ps：

用绝对定位,一个元素可以放在页面上的任何位置
absolutely定位使元素的位置与文档流无关，因此不占据空间
absolutely定位的元素和其他元素重叠

z-index属性

指定了一个元素的堆叠顺序（元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素）一个元素可以有正数或负数的堆叠顺序：

<style>
img
{
   position:absolute;
   left:0px;
   top:0px;
   z-index:-1;
}
</style>

ps：

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面
如果两个定位元素重叠，没有指定 z - index，最后定位在 HTML 代码中的元素将被显示在最前面

clip属性

设置裁剪元素的外形：

<style>
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>

overflow属性

创建一个滚动条，当一个元素的内容在指定的区域过大时如何设置以适应：

<style>
div.scroll
{
   background-color:#00FFFF;
   width:100px;
   height:100px;
   overflow:scroll;
}

div.hidden
{
   background-color:#00FF00;
   width:100px;
   height:100px;
   overflow:hidden;
}
div
{
   background-color:#00FFFF;
   width:150px;
   height:150px;
   overflow:auto;
}
div
{
   background-color:#00FFFF;
   width:150px;
   height:150px;
   overflow:visible;
}

div
{
   background-color:#00FFFF;
   width:150px;
   height:150px;
   overflow:inherit;
}
</style>

ps：

scroll显示双滚动体条
hidden隐藏滚动条
auto显示单滚动条
visible为默认值，类似于inherit
inherit显示溢出

cursor属性

将鼠标移动到这些字上改变鼠标样式光标：

<body>
<span style="cursor:auto">auto</span><br>

<span style="cursor:crosshair">十字</span><br>

<span style="cursor:default">默认的</span><br>

<span style="cursor:e-resize">e-调整</span><br>

<span style="cursor:help">帮助</span><br>

<span style="cursor:move">移动</span><br>

<span style="cursor:n-resize">n-调整</span><br>

<span style="cursor:ne-resize">ne-调整</span><br>

<span style="cursor:nw-resize">nw-调整</span><br>

<span style="cursor:pointer">指针</span><br>

<span style="cursor:progress">前进等待</span><br>

<span style="cursor:s-resize">s-调整</span><br>

<span style="cursor:se-resize">se-调整</span><br>

<span style="cursor:sw-resize">sw-调整</span><br>

<span style="cursor:text">下一个</span><br>

<span style="cursor:w-resize">w-调整</span><br>

<span style="cursor:wait">等待</span><br>
</body>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css整理</title>
</head>
<body>
    <style>
        h1.hidden {
            visibility: hidden;
        }
    </style><!--保留空间隐藏-->

    <style>
        li {
            display: inline
        }
    </style><!--水平列表-->

    <style>
        span {
            display: block;
        }
    </style><!--块元素-->

    <style>
        h1.hidden {
            display: none;
        }
    </style><!--完全隐藏-->

    <style>
        tr.collapse {
            visibility: collapse;
        }
    </style><!--删除行或列-->

    <style>
        p.pos_fixed {
            position: fixed;
            top: 30px;
            right: 5px;
        }
    </style><!--fixed定位-->

    <style>
        h2.pos_left {
            position: relative;
            left: -20px;
        }

        h2.pos_right {
            position: relative;
            left: 20px;
        }
    </style>

    <style>
        h2.pos_top {
            position: relative;
            top: -50px;
        }
    </style><!--relative定位-->

    <style>
        h2 {
            position: absolute;
            left: 100px;
            top: 150px;
        }
    </style><!--Absolute定位-->

    <style>
        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
        }
    </style><!--z-index属性-->

    <style>
        img {
            position: absolute;
            clip: rect(0px,60px,200px,0px);
        }
    </style><!--裁剪元素-->

    <style>
        div.scroll {
            background-color: #00FFFF;
            width: 100px;
            height: 100px;
            overflow: scroll;
        }

        div.hidden  {
            background-color: #00FF00;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }

        div  {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: auto;
        }

        div  {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: visible;
        }

        div  {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: inherit;
        }
    </style><!--元素内滚动条-->

    <body>
        <span style="cursor:auto">auto</span><br>
        <span style="cursor:crosshair">十字</span><br>
        <span style="cursor:default">默认的</span><br>
        <span style="cursor:e-resize">e-调整</span><br>
        <span style="cursor:help">帮助</span><br>
        <span style="cursor:move">移动</span><br>
        <span style="cursor:n-resize">n-调整</span><br>
        <span style="cursor:ne-resize">ne-调整</span><br>
        <span style="cursor:nw-resize">nw-调整</span><br>
        <span style="cursor:pointer">指针</span><br>
        <span style="cursor:progress">前进等待</span><br>
        <span style="cursor:s-resize">s-调整</span><br>
        <span style="cursor:se-resize">se-调整</span><br>
        <span style="cursor:sw-resize">sw-调整</span><br>
        <span style="cursor:text">下一个</span><br>
        <span style="cursor:w-resize">w-调整</span><br>
        <span style="cursor:wait">等待</span><br>
    </body><!--光标-->

</body>
</html>