2021-10-25听课

Posted Zeker62

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2021-10-25听课相关的知识,希望对你有一定的参考价值。

盒子模型

认识盒子模型

盒子模型相当于把文本放在一个盒子当中,我们可以定义文本在盒子当中的位置,当然也可以自定义盒子的大小和颜色等等。
下面给出两个图片方便理解

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。
<!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 type="text/css">
        .box {
            width: 200px; 
            /* 定义盒子的宽度 */
            height: 50px;
            /* 定义盒子的高度 */
            border: 15px solid red;
            /* 盒子模型的边框。厚度为15px,直线,颜色为红色 */
            background: #ccc;
            /* 定义盒子的背景颜色 */
            padding: 10px;
            /* 定义内边距,为10px */
            margin: 10px;
            /* 定义此盒子和其他盒子之间的边距,即外边距为10px */
        }
    </style>
</head>

<body>
    <p class="box">盒子模型包含的内容</p>

</body>

</html>

效果图:

这就是典型的盒子模型的效果,相当于就是说将文本框定在一个盒子当中。

div标记

div是英文division的缩写,div标记是一个区域内容标记,使用div标记相当于一个盒子,可以设置多个属性

<!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 type="text/css">
        .one {
            width: 200px;
            height: 200px;
            line-height: 40px;
            /* 设置行高 */
            background: #F05;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
        
        .two {
            width: 450px;
            height: 200px;
            background: yellow;
            font-size: 40px;
            text-indent: 20px;
        }
    </style>
</head>

<body>
    <div class="one">
        使用div标签设置的文本标题
    </div>
    <div class="two">
        <p>div 标记中嵌套p标签</p>

    </div>

</body>

</html>

效果:

盒子模型的宽与高

在CSS代码中盒子模型中的段落的宽和高分别是用width属性和height属性定义的,需要注意的地方有如下几点:

  • 盒子模型的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和。同理高度也是类似的定义。
  • width和height属性只适用于块级元素,对于行内元素比如<img>和<input>元素并不适用
<!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 type="text/css">
        .one {
            width: 200px;
            height: 200px;
            line-height: 40px;
            /* 设置行高 */
            border: 2px solid green;
            background: #F05;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="one">
        <p>使用div标签设置的文本标题,这是一个长文本,如果文本太长的话,并且在盒子模型之内,会被换行</p>
    </div>

</body>

</html>

盒子模型的相关属性

边框属性

边框属性允许你指定一个元素边框的样式和颜色。

属性描述
border简写属性,用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。

下面开始对其进行具体讲解:

边框样式

边框样式属性指定要显示什么样的边界。使用border-style属性用来定义边框的样式。
当有多个值的时候,按照顺时针先渲染,之后按照对称的方法将没有渲染的边框进行渲染

<!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 type="text/css">
        h2 {
            border-style: double;
            /* 双实线 */
        }
        
        .one {
            border-style: dashed;
            /* 虚线边框 */
        }
        
        .two {
            border-style: solid;
            /* 单实线 */
        }
        
        .three {
            border-style: dotted;
            /* 点线 */
        }
        
        .four {
            border-style: solid dotted dashed;
            /* 上实线,左右点线,下虚线 */
        }
    </style>
</head>

<body>
    <h2>双实线边框</h2>
    <div class="one">
        <p>虚线边框</p>
    </div>
    <p class="two">单实线边框</p>
    <p class="three">点线边框</p>
    <p class="four">上实线,左右点线,下虚线(先顺时针渲染,再对称渲染)</p>

</body>

</html>


此外,还可以有别的效果:

边框宽度

您可以通过 border-width 属性为边框指定宽度。
它是border-top-width, border-right-width, border-bottom-width, 和 border-left-width的简写;

为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。

注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。

<!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 type="text/css">
        #sval {
            border: ridge #ccc;
            border-width: 6px;
        }
        
        #bival {
            border: solid red;
            border-width: 2px 10px;
        }
        
        #treval {
            border: dotted orange;
            border-width: 0.3em 0 9px;
        }
        
        #fourval {
            border: solid lightgreen;
            border-width: thin medium thick 1em;
        }
        
        p {
            width: auto;
            margin: 0.25em;
            padding: 0.25em;
        }
    </style>
</head>

<body>
    <p id="sval">
        one value: 6px wide border on all 4 sides</p>
    <p id="bival">
        two different values: 2px wide top and bottom border, 10px wide right and left border</p>
    <p id="treval">
        three different values: 0.3em top, 9px bottom, and zero width right and left</p>
    <p id="fourval">
        four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>

</body>

</html>

边框颜色

CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性: border-top-color, border-right-color, border-bottom-color, border-left-color

取值](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-color#取值)

  • color

    使用 <color> 来表示四个边框的颜色,仅用于单值语法。

  • horizontal

    使用 <horizontal> 来表示水平(左边框和右边框)边框的颜色,仅用于双值语法。

  • vertical

    使用 vertical 来表示垂直(上边框和下边框)边框的颜色,仅用于双值或三值语法。

  • top

    使用 top 来表示上边框的颜色,仅用于三值或四值语法。

  • bottom

    使用 bottom 来表示下边框的颜色,仅用于三值或四值语法。

  • right

    使用 right 来表示右边框的颜色,仅用于四值语法。

  • left

    使用 left 来表示左边框的颜色,仅用于四值语法。

  • inherit
    这是一个关键词,用于指示四边的颜色值均继承自父元素的计算值。

示例:

<!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 type="text/css">
        #justone {
            border-color: red;
        }
        
        #horzvert {
            border-color: gold red;
        }
        
        #topvertbott {
            border-color: red cyan gold;
        }
        
        #trbl {
            border-color: red cyan black gold;
        }
        
        div {
            border: solid 0.3em;
            width: auto;
            margin: 0.5em;
            padding: 0.5em;
        }
        
        ul {
            margin: 0;
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="justone">
        <p><code>border-color: red;</code> is equivalent to</p>
        <ul>
            <li><code>border-top-color: red;</code></li>
            <li><code>border-right-color: red;</code></li>
            <li><code>border-bottom-color: red;</code></li>
            <li><code>border-left-color: red;</code></li>
        </ul>
    </div>
    <div id="horzvert">
        <p><code>border-color: gold red;</code> is equivalent to</p>
        <ul>
            <li><code>border-top-color: gold;</code></li>
            <li><code>border-right-color: red;</code></li>
            <li><code>border-bottom-color: gold;</code></li>
            <li><code>border-left-color: red;</code></li>
        </ul>
    </div>
    <div id="topvertbott">
        <p><code>border-color: red cyan gold;</code> is equivalent to</p>
        华电软工非全研究生学习和工作总结(2021.10.25-2021.10.30)

Go语言技巧之正确高效使用slice(听课笔记总结--简单易懂)

Go语言技巧之正确高效使用slice(听课笔记总结--简单易懂)

Go语言技巧之正确高效使用slice(听课笔记总结--简单易懂)

2021-10-25:计数质数。统计所有小于非负整数 n 的质数的数量。力扣204。

VBA代码整理(刚学,边听课边梳理)后续重整