二、WEB安全 02——DIV、CSS基础

1、DIV CSS基础 01——样式表类型、样式选择器

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

DIV是html的一个标签(块级元素)，CSS是一个样式表(层叠样式表)。

嵌入样式表示例：

demo1.html的内容：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .demo1{
                color: deeppink;
                width: 230px;
                height: 230px;
                background: greenyellow;
            }
        </style>
    </head>
    <body>
        <div class="demo1">
            嵌入样式表示例
        </div>
    </body>
</html>

外部样式表示例：

demo2.html的内容：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/demo2.css" />
    </head>
    <body>
        <div class="demo2">
            外部样式表示例
        </div>
    </body>
</html>


css/global.css的内容：
body{
    background-color: deepskyblue;
}


css/demo2.css的内容：
@import url("global.css");
.demo2{
    color: hotpink;
    width: 230px;
    height: 230px;
    background-color: gray;
}

内联样式表示例：

demo3.html的内容：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="color:deeppink;width:230px;height:230px;background:darkmagenta;">
            内联样式表示例
        </div>
    </body>
</html>

CSS的注释，其快捷键是：键盘键入Ctrl+/

/*这是一个CSS的注释，且可以多行注释*/

元素选择器的格式：元素名{属性:值;}

demo4.html的内容：
<style>
    div{
        border: 10px solid black;
    }
</style>

<div>
    元素选择器示例
</div>

id选择器的格式： #id名{属性:值;}

demo5.html的内容：
<style>
    #id1{
            color: deeppink;
            background-color: deepskyblue;    
    }
</style>

<div id="demo5">
    id选择器的示例
</div>

class类选择器的格式： .类名{属性:值;}

demo6.html的内容：
<style>
    .demo6{
        color: deepskyblue;
        background-color: deeppink;
    }
</style>


<div class="demo6">
    class类选择器的示例
</div>

子选择器的格式：父元素名/父元素选择器空格子元素名/子元素选择器{属性:值;}

demo7.html的内容：
<style>
    .demo7 p{
        color: hotpink;
    }
</style>

<div class="demo7">
    <h1>子选择器的示例</h1>
    <p>子选择器的示例</p>
</div>

后代选择器的格式：父元素名/父元素选择器 > 子元素名/子元素选择器{属性:值;}

demo8.html的内容：
<style>
    .class2 > p{
        color: hotpink;
    }
</style>

<div class="demo8">
    <p>qwsn</p>
    <p>后代选择器的示例</p>
</div>

属性选择器的格式：元素[属性]{属性:属性值;}

略

通配符选择器的格式： *{属性:值;}

demo9.html的内容：
<style>
    *{
        margin:0px;
        padding:0px;
    }
</style>

<div>
    统配符选择器示例
    <p>通配符选择器示例</p>
</div>

群组选择器的格式：某种选择器,某种选择器{属性:值;}

demo10.html的内容：
<style>
    .demo10,#demo10{
        width: 130px;
        height: 130px;
    }
    .demo10{
        color: deeppink;
        background-color: deepskyblue;
    }
    #demo10{
        color: deepskyblue;
        background-color: deeppink;
    }
</style>

<div class="demo10">
    群组选择器的示例
</div>
<div id="demo10">
    群组选择器的示例
</div>

2、DIV CSS基础 02——背景、边框

背景的属性：

background-color         规定要使用的背景颜色。
background-image        规定要使用的背景图像。
background-repeat         规定如何重复背景图像。
background-attachment    规定背景图像是否固定或者随着页面的其余部分滚动。
background-position     规定背景图像的位置。     
background-size         规定背景图像的尺寸。     
background-origin         规定背景图像的定位区域。     
background-clip         规定背景的绘制区域。

background-repeat的属性值：

background-repeat:repeat;        默认。背景图像将在垂直方向和水平方向重复。
background-repeat:repeat-x;        背景图像将在水平方向重复。
background-repeat:repeat-y;        背景图像将在垂直方向重复。
background-repeat:no-repeat;    背景图像将仅显示一次。
background-repeat:inherit;        规定应该从父元素继承 background-repeat 属性的设置。

background-attachment属性的值：

background-attachment:fixed;     固定，不随内容的滚动而滚动
background-attachment:scroll;     滚动，随内容的滚动而滚动

background-position属性的值：

background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;

背景简写:

background: url(images/bg.gif) no-repeat fixed right top

背景示例：

demo11.html的内容：
<style>
    body{
            /*background-color:#FFC0CB;*/
            /*background-image: url(../web01/img/logo.jpg);*/
            /*background-repeat:no-repeat;*/
            /*background-repeat:repeat-y ;*/
            /*background-repeat:repeat-x ;*/
            /*background-attachment: fixed;*/
            /*background-attachment: scroll;*/
            background: url(../web01/img/logo.jpg) no-repeat fixed right top;    
    }
</style>

边框的属性：

border-top         设置上边框，一般单独设置上边框样式使用。
border-right     设置右边框，一般单独设置右边框样式使用。
border-bottom     设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
border-left         设置左边框，一般单独设置左边框样式使用。
border-color    边框颜色 
border-width    边框宽度
border-style    边框样式

边框样式属性值：

border-style:none;        无边框。与任何指定的border-width值无关
border-style:hidden;    隐藏边框。IE不支持
border-style:dotted;    在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
border-style:dashed;    在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
border-style:solid;     实线边框（常用）
border-style:double;     双线边框。两条单线与其间隔的和等于指定的border-width值

边框简写：

border:5px solid red;    （上右下左）

边框示例：

demo12.html的n内容：
<style>
    .class1{
        width: 120px;
        height: 120px ;
        /*border-width: 2px;
        border-style: solid;
        border-color: red;
        */
        border: 1px solid red;
    }
    .class2{
        margin-top: 20px;
        width: 150px;
        height: 150px ;
        border-width: 5px;
        border-top: solid;
        border-right: dashed;
        border-bottom: double;
        border-left: dotted;
        border-color: pink;
    }
</style>

<div class="class1">
    边框的示例1
</div>
<div class="class2">
    边框的示例2
</div>

3、DIV CSS基础 03——文字、文本的属性

文字的属性：

color:red;                   文字颜色（#ffeeees）
font-size:12px;           文字大小
font-weight:bolds           文字粗细（bold/normal）
font-family:”宋体”        文字字体
font-variant:small-caps     小写字母以大写字母显示

文字的属性示例：

demo13.html的内容：
<style>
    body{
        color: #FF1493;
        font-family: "微软雅黑";
        font-size: 23px;
        /*font-weight: bold;*/
        font-variant: small-caps;
    }
</style>
    

<div class="div1">
    <p class="p1">&nbsp;&nbsp;&nbsp;&nbsp;某公司的<span style="font-weight: bold;">技术部门</span>需要添加Samba服务器作为文件服务器，工作组名为Workgroup，发布共享目录/share/tech，共享名为tech，这个共享目录允许技术部所有员工访问,允许浏览，允许读写，不允许匿名服务。</p>
</div>

文本的属性：

text-align:center;         文本对齐(right/left/center)
line-height:10px;         行间距(可通过它实现文本的垂直居中)
text-indent:20px;         首行缩进
text-decoration:none;    文本线(none/underline/overline/line-through) 
letter-spacing:         字间距

underline/overline/line-through; 定义文本上的下划线/上划线/中划线

文本的属性示例：

demo14.html的内容：
<style>
    body{
        color: #FF69B4;
        font-family: "微软雅黑";
        font-size: 23px;
        /*font-weight: bold;*/
        font-variant: small-caps;
        line-height: 40px;
    }
    .p1{
        text-indent: 20px;
    }
    a{
        text-decoration: none;
    }
    .demo14{
        text-align: center;
    }
</style>
    
<div class="demo14">
    demo14
</div>
<div class="div1">
    <p class="p1">某公司的<span style="font-weight: bold;">技术部门</span>需要添加Samba服务器作为文件服务器，工作组名为Workgroup，发布共享目录/share/tech，共享名为tech，这个共享目录允许技术部所有员工访问,允许浏览，允许读写，不允许匿名服务。<a href="https://blog.csdn.net/qq_45555226">点击了解</a></p>
</div>

4、DIV CSS基础 04——列表样式、伪类超链接

列表标签的常用样式属性：

list-style-type         设置列表项目符号的类型。
list-style-position     设置在何处放置列表项目符号。
list-style-image         使用图像来替换列表项目符号。

inherit                 规定应该从父元素继承 list-style 属性的值。

list-style-type列表样式类型属性的值：

list-style-type的取值:
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
释意：
        disc: 点
        circle: 圆圈
        square: 正方形
        decimal: 数字
        decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99
        lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...
        upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...
        lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...
        lower-latin: 小写拉丁文，例如: a, b, c, ... z
        upper-latin: 大写拉丁文，例如: A, B, C, ... Z
        armenian: 亚美尼亚数字
        georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
        lower-alpha: 小写拉丁文，例如: a, b, c, ... z
        upper-alpha: 大写拉丁文，例如: A, B, C, ... Z
        none: 无(取消所有的list样式)
        inherit:继承

list-style-position列表样式位置属性的值：

list-style-position可能值：
inside | outside
释意：
        inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
        outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

列表样式属性的简写：

list-style: square inside ；
list-style: url('/i/arrow.gif') inside ；

列表样式示例：

demo15.html的内容：
<style>
    .demo15{
        /*list-style-type: decimal;*/
        /*list-style-image: url('../web01/img/logo.jpg');
        list-style-position: inside;*/    
        list-style: url('../web01/img/logo.jpg') inside;
    }
    a{
        color: #000000;
        text-decoration: none;
    }
</style>
        
<ul class="demo15">
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a></li>
</ul>

伪超链接：

a{text-decoration: none;}    /*去除默认的下划线*/
a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}    /* 已访问的链接 */
a:hover {color:#FF00FF;}     /* 鼠标划过链接 */
a:active {color:#0000FF;}     /* 已选中的链接 */

伪超链接示例：

demo16.html的内容：
<style>
    a{
        /*color: #000000;*/
        text-decoration: none;
    }
    a:link{
        color: black;
    }
    a:visited{
        color: red;
    }
    a:hover{
        color: pink;
    }
    a:active{
        color: greenyellow;
    }
</style>

<a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a>

5、DIV CSS基础 05——盒子模型、边框、外边距、内边距

盒子模型的组成部分：四个属性

外边距（margin）
边框（border）
内边距（padding）
内容（content）

盒子模型的内容content的宽高属性：width、height

width:230px;    /*content内容宽为230px*/
height:230px;    /*content内容高为230px*/

盒子模型图：

以上盒子模型图对应的代码：

demo17.html的内容：
<style>
    .demo17{
        margin: 10px;
        border: 1px solid pink;
        padding: 20px;
        width: 400px;
        height: 400px;
    }
</style>

<div class="demo17">
    demo17
</div>

边框的属性：

border-width:2px        /*边框的宽度*/
border-style: solid        /*边框的样式*/
border-color: red        /*边框的颜色*/

边框的样式属性的值：

border-style:dotted;    /*点状虚线*/
border-style:dashed;    /*虚线*/
border-style:solid;        /*实线*/
border-style:double;    /*双实线*/

边框的属性简写：

border:1px solid #000000;

边框的属性示例：

demo18.html的内容：
<style>
    .demo18{
        width: 400px;    /*content内容的宽*/
        height: 400px;    /*content内容的高*/
        /*border: 1px solid red;*/
        border-width: 10px;
        /*border-style: dotted;*/
        border-color: pink;
        border-top-style: dotted;
        border-right-style: dashed;
        border-bottom-style: double;
        border-left-style: solid;
    }            }            
</style>

<div class="demo18">
    边框的属性示例
</div>

margin是外边距，它的值是像素/厘米等长度单位、百分比。若两个盒子同时设置了外边距，会进行一个外边距合并。

margin的属性：

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

margin属性的值：

margin:10px; 上下左右
margin:10px 10px; 上下 左右
margin:10px 10px 10px; 上 左右 下
margin:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）

margin属性的特殊值：

margin: 0px auto;         /*盒子居中*/
text-align: center;        /*内容居中*/

padding是内边距，它的值是像素/厘米等长度单位、百分比。当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小。

padding的属性：

padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

padding的属性值：

padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）

6、DIV CSS基础 06——float属性、块级元素、行内元素、溢出处理

float文档流浮动属性的值：

float:left;      /*元素向左浮动*/    /*从左边开始排*/
float:right;     /*元素向右浮动*/    /*从右边开始排*/

清除浮动的方法：使用clear属性

clear: both/left/right;

float文档流浮动、clear清除浮动的示例：

demo19.html的内容：
<style>
    div{
        width: 200px;
        height: 200px;
        border: 2px solid deeppink;
    }
    .div1,.div2{
        float: left;            /*div1和div2左浮动，且div2紧跟div1*/
    }
    .div3{
        float: right;
    }
    .div4{
        width: 400px;
        height: 400px;
        border: 2px solid blue;
        clear: both;            /*若没有该浮动，则自动浮到最左上角*/
    }
</style>

<div class="div1">
    div1
</div>
<div class="div2">
    div2
</div>
<div class="div3">
    div3
</div>
<div class="div4">
    div4
</div>

他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；块级元素可以设置width、height属性；块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性。

块级元素有哪些：

address     地址
                center         举中对齐块
                div            常用块级容易
                dl            定义列表
                form         交互表单 （只能用来容纳其它块元素）
                hn            标题标签
                hr             水平分隔线
                ol             无序列表
                ul            有序列表
                p             段落
                pre         格式化文本

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；行内元素的width、height属性则无效；行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

行内元素有哪些：

a - 锚点
                b - 粗体(不推荐)
                br- 换行
                code - 计算机代码(在引用源码的时候需要)
                em - 强调
                i - 斜体
                img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）
                当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，                设置img的css为{margin：0；display：block；border：0px}
                input - 输入框
                label - 表格标签
                select - 项目选择
                strong - 粗体强调
                textarea - 多行文本输入框
                u - 下划线
                var - 定义变量

块级元素与行内元素的示例：

demo20.html的内容：
<style>
    .demo20,h1,form{            /*块级元素可以设置宽度和高度、可以设置上下的内外边距*/
        border: 3px solid red;
        width: 100px;
        height: 100px;
    }
</style>
    
<div class="demo20">块级元素</div>
<h1>块级元素</h1>
<form>块级元素</form>
<a href="https://blog.csdn.net/qq_45555226">这是行内元素(qwsn的博客)</a>
<lable>行内元素：</lable><input type="text"/>

块级元素与行内元素转换：使用display属性

display:none;             不显示
                    display:block;            变成块级元素
                    display:inline;         变成行内元素
                    display:inline-block;    以块级元素样式展示，以行级元素样式排列

示例：以块级元素样式显示，以行级元素样式排列

demo21.html的内容：
<style>
    .div11,.div22,.div33{
        border: 3px solid deeppink;
        width: 400px;
        height: 100px;
        display: inline-block;
    }
</style>

<div class="div11">以块级元素样式显示，以行级元素样式排列</div>
<div class="div22">以块级元素样式显示，以行级元素样式排列</div>
<div class="div33">以块级元素样式显示，以行级元素样式排列</div>

注意： 我们知道块级元素可以设置宽（height）高（weight），行内元素却不能设置宽和高，但这其中有一些行内元素，如img,是可以设置宽高的，这就跟之前说的相违背了，由此引出了替换元素和非替换元素。、

替换元素：

替换元素，就是浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸（宽高或宽高比）。
    举例说明：img标签我们在审查元素的时候是看不到实体图片的，看到的只是它的src，浏览器根据src来显示内容；再如input标签，浏览器根据input的type值来选择显示输入框还是选择框或者其他类型。
    在html中像这样的元素有img, input, textarea, select, object，这些都是替换元素，这些元素都没有实际的内容。

非替换元素：

非替换元素：html中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来。
    举例说明：p标签，浏览器会直接显示p标签里的内容。
    替换元素和非替换元素不仅是在行内元素中有，块级元素也有替换和非替换之分，比如嵌入的文档iframe,audio,canvas在某些情况下也为替换元素。

overflow属性：规定当内容溢出元素框时发生的事情。

overflow: visible;    默认值。内容不会被修剪，会呈现在元素框之外。
overflow: hidden;    内容会被修剪，并且其余内容是不可见的。
overflow: scroll;    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow: auto;        如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow: inherit;    规定应该从父元素继承 overflow 属性的值。

demo22.html的内容：
<style>
    .demo22{
        fond-size: 5px;
        width: 400px;
        height: 400px;
        border: 3px solid deeppink;
        /*overflow: hidden;*/
    }
</style>

<div class="demo22">demo15xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

溢出现象：

溢出隐藏：

7、DIV CSS基础 07——position四种定位、z-index堆叠顺序

position:static;    静态定位（不对它的位置进行改变，在哪里就在那里）默认值。没有定位，元素出现在                              正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。

position:fixed;        固定定位（参照物--浏览器窗口）---做弹窗广告用到。生成固定定位的元素，相对于                        浏览器窗口进行定位。 元素的位置通过 "left", "top", "right"以及"bottom"属性进行                       规定。

position:relative;    相对定位（参照物以他本身）生成相对定位的元素，相对于其正常位置进行定位。

position:absolute;    绝对定位(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)生成                      绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过                         "left", "top", "right" 以及 "bottom" 属性进行规定

position属性的四种定位示例：

demo23.html的内容：
<style>
    div{
        width: 300px;
        height: 300px;
    }
    .div111{
        background: red;
    }
    .div222{
        width: 500px;
        height: 500px;
        background: blue;
        /*position: static;*/
        /*position: fixed;*/
        position: relative;
        left: 40px;
        top: 50px;
    }
    .div333{
        background: green;
    }
    .div444{
        width: 150px;
        height: 150px;
        background: yellow;
        position: absolute;
        top:100px;
        left: 100px;
    }
    .div555{
        width: 150px;
        height: 150px;
        background: black;
        position: absolute;
        top:120px;
        left: 120px;
    }
</style>
    
<div class="div111"></div>
<div class="div222">
    <div class="div444"></div>
    <div class="div555"></div>
</div>
<div class="div333"></div>

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

z-index属性的堆叠示例1：谁大谁就在上面

在demo23.html中添加：
.div444{
    z-index: 2;        /*2>1，所以黄色在前面*/
    /*background: yellow;*/
}
.div555{
    z-index: 1;        /*1<2，所以黑色在后面*/
    /*background: black;*/
}

z-index属性的堆叠示例2：-1表示在最下面

在demo23.html中修改：
.div444{
    z-index: -1;        /*最小值为-1，作用是把该div藏在最下面*/
    /*background: yellow;*/
}

2021年7月1日

2021年7月6日

本文为互联网自动采集或经作者授权后发布，本文观点不代表立场，若侵权下架请联系我们删帖处理！文章出自：https://blog.csdn.net/qq_45555226/article/details/118526130

二、WEB安全 02——DIV、CSS基础