四时宝库

程序员的知识宝库

2024年10月23日

Web开发学习笔记(22)——CSS(9)常用属性作业、盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align:center;
            color:#001D26;
        }
        h4{
            color:#900
        }
        p{
            font-size:16px;
            color:#3E4B53;
            text-indent:2em;
        }
        a:link{
            color:skyblue;
        }
        a:hover{
            color:red;
        }
        body{
            background-image:url(https://labfile.oss.aliyuncs.com/courses/2841/bg1.jpg);
        }
    </style>
</head>
<body>
    <p>
        <h1> 忆江南 </h1>
    </p>
    <a href="https://labfile.oss.aliyuncs.com/courses/2841/poem.htm">唐·白居易</a>
    <p>
        (1)江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。
    </p>
    <h4>作者介绍</h4>
    <p>
        白居易（772-846），字乐天，太原（今属山西）人。唐德宗朝进士，元和三年（808）拜左拾遗，后贬
        江州（今属江西）司马，移忠州（今属四川）刺史，又为苏州（今属江苏）、同州（今属山西大荔）刺史。晚居
        洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人重的佼佼者，
        所作对后世影响甚大。
    </p>
    <h4>注释</h4>
    <p>
        (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。
        又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双调五十四字，
        皆平韵。
        (2)谙（音安）：熟悉。
        (3)蓝：蓝草，其叶可制青绿染料。
    </p>
    <h4>品评</h4>
    <p>
        此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南的种种佳处，
        而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，
        词句又已暗逗结句“能不忆江南”，并与之相关阖。此句“风景旧曾谙”，点明江南风景之“好”，
        并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，
        不失为勾通一篇意脉的精彩笔墨。三两句对江南之“好”进行形象化的演绎，突出渲染红花、江水红绿相映
        的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者
        善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又
        深长的韵味，把读者带入余情摇漾的境界中。
    </p>
</body>
</html>

显示为

盒模型：

(1)border 相关的属性：

  • border-top-style 属性
  • border-right-style 属性
  • border-bottom-style 属性
  • border-left-style 属性

border-style 属性是用来设置边框样式的，我们可以直接使用 border-style 来设置四个边框的样式，也可以分别设置上下左右四个边框的属性。

  • border-top-style 属性是给上边框设置样式的。
  • border-right-style 属性是给右边框设置样式的。
  • border-bottom-style 属性是给下边框设置样式的。
  • border-left-style 属性是给左边框设置样式的。

我们来举个例子吧！

我们在 body 标签中添加一对段落标签。将段落元素边框的上、右、下、左四个部分的边框类型分别设置为实线、点状、虚线和双线。

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border-top-style:solid;
            border-right-style:dotted;
            border-bottom-style:dashed;
            border-left-style:double;
        }
    </style>
</head>
<body>
    <p>
        王耶浪Web开发学习笔记
    </p>
</body>
</html>

显示为，

（2）border-width 属性：

  • border-top-width 属性
  • border-right-width 属性
  • border-bottom-width 属性
  • border-left-width 属性

border-width 属性是用来设置边框宽度的，我们可以直接使用 border-width 来设置四个边框的宽度，也可以分别设置上下左右四个边框的属性。

  • border-top-width 属性是给上边框设置宽度的。
  • border-right-width 属性是给右边框设置宽度的。
  • border-bottom-width 属性是给下边框设置宽度的。
  • border-left-width 属性是给左边框设置宽度的。

例子，

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        border-style: solid;
        border-top-width: thin;
        border-right-width: medium;
        border-bottom-width: thick;
        border-left-width: 6px;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web开发学习笔记
    </p>
  </body>
</html>

显示为，

（3）border-color 属性：

  • border-top-color 属性
  • border-right-color 属性
  • border-bottom-color 属性
  • border-left-color 属性

border-color 属性是用来设置边框颜色的，我们可以直接使用 border-color 来设置四个边框的宽度，也可以分别设置上下左右四个边框的属性。

  • border-top-color 属性是给上边框设置颜色的。
  • border-right-color 属性是给右边框设置颜色的。
  • border-bottom-color 属性是给下边框设置颜色的。
  • border-left-color 属性是给左边框设置颜色的。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        width: 420px;
        height: 200px;
        border: 1px solid;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web开发学习笔记
    </p>
  </body>
</html>

显示为，

（4）border 属性和 padding 属性，以及使用这两个属性做练习：

  • border 属性
  • padding 属性

border 是边框属性，它是复合属性，其用法如下所示：

border: 上右下左的值;

border-top: 上边框值;
border-right: 右边框值;
border-bottom: 下边框值;
border-left: 左边框值;

padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。

其使用格式如下所示：

padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;

例子，

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top: thin solid red;
        border-right: medium dotted green;
        border-bottom: dashed thick blue;
        border-left: double 6px yellow;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web开发学习笔记
    </p>
  </body>
</html>

显示为，

（5）margin 属性：

  • margin 属性

margin 属性是用来设置元素的外边距：

使用格式：

margin: 上边距 右边距 下边距 左边距;

也可以省略写。

当左右边距值相同时，写法如下：

margin: 上边距 左右边距 下边距;

当上下边距值相同，左右边距值相同时，写法如下：

margin: 上下边距 左右边距;

当上下左右边距值均相同时，写法如下：

margin: 属性值;

从上面的内容，我们可以看出 margin 属性是个复合属性，我们可以分开设置上下左右的边距，写法如下：

/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        border: 1px solid blue;
      }
      p {
        width: 100px;
        height: 50px;
        background-color: darkgrey;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <p>王耶浪Web开发学习笔记</p>
    </div>
  </body>
</html>

显示为，

margin 属性来改变 p 元素相对于 div 元素的位置。修改代码如下：

p {
  width: 100px;
  height: 50px;
  background-color: darkgrey;
  text-align: center;
  margin: 25px 50px;
}

显示为，

（6）display 的常用属性：

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

display 属性值的说明如下表所示。

属性值

说明

block

元素以块级方式展示。

inline

元素以内联方式展示。

inline-block

元素以内联块的方式展示。

none

隐藏元素。

block 属性值可以让行内元素以块级元素的方式显示在页面上。

其使用格式如下：

display: block;

还记得前面学过的行内元素的概念吗？ 行内元素就是可以和其他元素同处一行的元素，例如 span 标签元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <span>王耶浪</span><span>Web开发学习笔记</span>
  </body>
</html>

显示为，

原本 span 标签是行内元素，却因为设置 display: block; 导致「王耶浪」与「Web开发学习笔记」分开了。

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。

其使用格式如下：

display: inline;

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div>王耶浪</div>
    <div>Web开发学习笔记</div>
  </body>
</html>

显示为，

块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。

其使用格式如下：

display: inline-block;

哪些情况下可以用到这个属性？

比如，用 a 标签来实现导航的时候，a 标签可以让元素在一行显示，但若想给每个 a 标签加上高和宽时发现没有任何效果。这时用 display: inline-block，a就具备块的特性了。

例子,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a {
        text-decoration: none;
        background-color: rgb(95, 118, 160);
        display: inline-block;
        width: 70px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">展示</a>
    <a href="#">更多</a>
  </body>
</html>


none 属性值可以用来隐藏页面上的元素。

使用格式如下：

display: none;

例子,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>哈哈，看不见我</div>
  </body>
</html>

标签：span属性 

作者:sishi88 , 分类:技术教程 , 浏览:6 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接