CSS 重要属性与定位

重要属性介绍

display属性

  • 功能：规定网页元素如何显示的问题。
  • 取值：none(隐藏)、block(以块元素显示)、inline(以行内元素显示)
  • block：可以实现将行内元素转成块元素。
  • inline：可以实现将块元素转成行内元素。
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     p{
        display:none;
     }
    </style>
    </head>
    <body>
        <h1>主席心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

再删掉下面这一行，查看结果

 p{
        display:none;
     }

Overflow 属性

overflow属性：当内容溢出时，该如何显示

overflow：当内容溢出时，溢出的内容该如何显示。取值：visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(自动)

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    p{
        border:1px solid #f0f0f0;
        width:300px;
        height:100px;
        overflow:scroll;
    }
    </style>
    </head>
    <body>
        <h1>诺贝尔文学奖花落谁家？</h1>
        <p>评论家白烨并不看好村上春树能够获奖。他在接受记者采访时曾指出，村上春树得诺奖几乎没希望，“诺贝尔文学奖很重视作品的文学价值，村上春树的作品对现实社会的关注度并不高，在纯文学圈子里不是特别受到认可”。
　　评论家止庵等人亦曾分析过，诺贝尔文学奖会给一些有思考的冷门作家以鼓励，也重视作品的文学价值。在白烨看来，村上春树的作品具有流行性、大众性的特点，“正是从这个角度讲，村上很有可能成为一个时间悠久的‘陪跑者’”。
　　“村上春树得诺奖的希望不大了。”基于相似原因，村上春树作品的译者之一林少华表示。</p>
    </body>
</html>

有兴趣也可以试一下overflow的其它几种取值

cursor光标类型

cursor：网页中光标的类型，取值：text(文本)help(帮助)、wait(等待)、pointer(手形)等。

下面实例，把鼠标移动到文本上，查看效果

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    p{
        border:1px solid #f0f0f0;
        width:300px;
        height:100px;
        overflow:scroll;
        cursor:wait;
    }
    </style>
    </head>
    <body>
        <h1>诺贝尔文学奖花落谁家？</h1>
        <p>评论家白烨并不看好村上春树能够获奖。他在接受记者采访时曾指出，村上春树得诺奖几乎没希望，“诺贝尔文学奖很重视作品的文学价值，村上春树的作品对现实社会的关注度并不高，在纯文学圈子里不是特别受到认可”。
　　评论家止庵等人亦曾分析过，诺贝尔文学奖会给一些有思考的冷门作家以鼓励，也重视作品的文学价值。在白烨看来，村上春树的作品具有流行性、大众性的特点，“正是从这个角度讲，村上很有可能成为一个时间悠久的‘陪跑者’”。
　　“村上春树得诺奖的希望不大了。”基于相似原因，村上春树作品的译者之一林少华表示。</p>
    </body>
</html>

定位

CSS定位

position：元素定位方式，取值static、fixed、relative、absolute

  • static：静态定位(默认状态、不定位)。
  • Fixed：固定定位。
  • Relative：相对定位。
  • Absolute：绝对定位。

定位方式，要与定位属性配合使用

定位坐标：指定定位的元素，偏移目标元素多远的距离。

  • left：定位元素，距离目标元素左边的距离。
  • top：定位元素，距离目标元素上边的距离。
  • right：定位元素，距离目标元素右边的距离。
  • bottom：定位元素，距离目标元素下边的距离。

固定定位，position:fixed

  • 固定定位，是相对于浏览器窗口来进行的定位。
  • 固定定位，不占空间，层级要高于普通元素。它不会随着网页的滚动而滚动。
  • 如果不指定定位坐标的话，固定定位元素的位置在原地不动。
  • 固定定位元素，一定是“块元素”，不管原来它是什么元素。

相对定位，position:relative;

  • 相对定位，是相对于“原来的自己”进行定位。
  • 相对定位，依然占空间，层级高于普通元素。
  • 如果不指定定位坐标的话，相对定位元素的位置在原地不动。
  • 相对定位，原来是行内元素，定位后还是行内元素；原来是块元素，定位后还是块元素。

注：相对定位和绝对定位，一般情况下是配合使用。

绝对定位，position:absolute

  • 相对于祖先定位元素(相对定位，绝对定位)，来进行的定位。

  • 如果它的父元素没有进行任何定位的话，再往上找定位元素。

  • 如果一直找到都没有找到定位元素的话，那就相对于来进行定位。

  • 绝对定位元素，不占空间，层级要高于普通元素。

  • 如果不指定定位坐标的话，绝对定位元素的位置在原地不动。

  • 绝对定位元素，是一个“块元素”。

posted @ 2022-07-07 15:07  ppqppl  阅读(26)  评论(0)  编辑  收藏  举报