CSS总结

CSS

一 CSS概念

CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式

1.1 CSS语法

每个CSS样式有两个组成部分: 选择器和声明
声明又包括属性和属性值, 每个声明之后用分号结束

1.1.1 实例

1.1.2 注释

/*注释这样写*/

二 CSS引入方式

2.1 行内样式(内联样式)

"行内式是在标记的style属性中设定CSS样式. 不推荐大规模使用"
<p style="color: green; ">行内样式</p>

2.2 内部样式(嵌入式样式)

"内部样式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p{
            background-color: #000000;
        }
    </style>
</head>
<body>
    <p>一个p标签</p>
</body>
</html>

#000000表示颜色, 以十六进制每两位表示一种颜色, 分别对应红黄蓝

2.3 外部样式

"外部样式是将CSS写在一个独立的文件中, 在HTML文件的<head></head>标签对中进行链接引入(<link rel="stylesheet" href="一般为CSS文件的相对路径" type="text/css"/>)"

/*CSS文件内容*/
p{color: red; }
/*注释*/
注释一般用来描述后面这段CSS代码是给页面上哪一个板块用的
/*标题样式*/
xxxxx
/*个人中心设置*/

三 CSS选择器

"CSS选择器本质上是选择标签(也可称作元素)进行添加样式的操作"

3.1 基本选择器

3.1.1 元素选择器(标签选择器)

"可通过标签的名字进行选择, 从而为标签添加样式"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p{
              background-color: #000000;
        }
    </style>
</head>
<body>
    <p>一个p标签</p>
</body>
</html>

"只能应对需要同样样式装饰少量标签的情况, 若想装饰多个相同标签中的某一个时, 这种选择器不适用"

3.1.2 ID选择器

"标签具有id属性, 并且同类标签的id不能重复, 因此可以通过id属性进行唯一选择, 即ID选择器"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        #p1{  /*--#号表示id属性, 后面的p1表示id属性的值*/
                background-color: green;
          }
    </style>
</head>
<body>
    <p id="p1">一个id为"p1"的p标签</p>
</body>
</html>

"若标签非常多, 这种方法将会过于繁琐, 因此应对大量的标签应该采用更加方便的选择器"

3.1.3 类选择器

"标签除了可以定义id属性外还可以定义clss属性(即类属性), 多个不同的标签可以属于同一个类(即具有完全相同的class属性--它们之间class的值相等), 通过选择class实现对大量的标签进行添加样式操作"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .c1{  /*.表示class属性, c1表示class的值*/
                 font-size: 14px;
          }
        p.c1{  /*找到所有p标签里面含有class属性的值为c1的<p>标签*/
                 color: red;
           }
    </style>
</head>
<body>
    <span class="c1">一个class为"c1"的span标签</span>
    <p class="c1">一个class为"c1"的p标签</p>
</body>
</html>

注意: 样式类不应该用数字开头
标签中的class属性如果存在多个, 以空格分隔

3.1.4 通用选择器

"一种可以选择所有标签的方法"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        *{  /* *表示所有的标签*/
              font-size: 14px;
          }
    </style>
</head>
<body>
    <span>一个span标签</span>
    <p>一个p标签</p>
</body>
</html>

3.2 组合选择器

"组合选择器强调的是标签之间的包含关系, 通过这种关系可实现分组为标签添加样式的操作"

3.2.1 后代选择器(族选择器)

"后代选择器会选择父标签内指定的所有子标签"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div{  /*<div>标签内部的所有标签设置字体颜色*/
              color: green;
          }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

3.2.2 子元素选择器

"子元素选择器会选择父标签内指定的所有子标签"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div>p{  /*选择所有父级是<div>元素的<p>元素*/
              color: green;
          }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

3.2.3 相邻元素选择器

"相邻元素选择器会选择与指定标签紧接着之后的指定标签"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        span+p{  /*选择所有紧接着<span>元素之后的<p>元素*/
                    /*注意区别: 选择紧接着<span>元素之后的所有<p>元素*/
              color: red;
          }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
            <p>子子p1标签</p>
            <p>子子p2标签</p>
            <p>子子p3标签</p>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

3.2.4 兄弟选择器

"兄弟选择器会选择指定的标签后面所有指定的兄弟标签"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        span~p{  /*<span>标签后面所有的兄弟<p>标签*/
              color: red;
          }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
            <p>子子p1标签</p>
            <p>子子p2标签</p>
            <p>子子p3标签</p>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

3.3 属性选择器

"每个标签所具有的属性一般应该是不相同的, 为精确的选择标签,可通过标签的属性或属性的值来进行选择. 通常这个属性是自定义的, 而不是id, class之类的HTML自带属性"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p[title]{  /*选择带有title属性的<p>标签*/
              color: red;
          }
        p[title="p1"]{  /*选择带有title属性并且属性值为"p1"的<p>标签*/                        /*有属性并且属性有属性值的标签, 鼠标覆盖到标签上时会显示该属性值*/
              color: yellow;
          }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
            <p title>子子p1标签</p>
            <p>子子p2标签</p>
            <p title="p1">子子p3标签</p>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

一些不太常用的例子

⤥

<style>
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
                    color: red;
                }

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
                    color: yellow;
                }

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
                    color: red;
                }

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
                    color: green;
                }
</style>

3.4 分组和嵌套

3.4.1 分组(多个选择器逗号分隔)

"当多个元素的样式相同的时候, 没有必要重复地为每个元素都设置样式, 可以通过在多个选择器之间, 使用逗号分隔的, 分组选择器(多个选择器组成的整体称为分组选择器)来统一设置元素样式"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        span, p{  /*选择所有的<span>标签和所有的<p>标签*/
              color: red;
          }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
            <p>子子p1标签</p>
            <p>子子p2标签</p>
            <p>子子p3标签</p>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

3.4.2 嵌套

"以上所有类型的选择器可以混合起来使用, 即多种选择器可以混合使用"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div+p~p{  /*选择紧接着<div>标签之后的<p>标签的兄弟标签<p>标签*/
              color: red;
              }
        div+p~span{  /*选择紧接着<div>标签之后的<p>标签的兄弟标签<span>标签*/
              color: red;
              }
    </style>
</head>
<body>
    <div>
        <div class="c1">
            <span>子子span标签</span>
            <p>子子p1标签</p>
            <p>子子p2标签</p>
            <p>子子p3标签</p>
        </div>
        <p>子p1标签</p>
        <p>子p2标签</p>
        <span>子span标签</span>
    </div>
    <p>p1标签</p>
    <p>p2标签</p>
</body>
</html>

3.5 伪类选择器(CSS3版本特性)

"可以设置标签在不同状态下的样式"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        a:link{  /*未访问的链接*/
                  color: #FF0000;  /*红色*/
              }
        a:visited{  /*已访问的链接*/
                  color: #00FF00;  /*绿色*/
                 }
        a:hover{  /*鼠标覆盖的链接*/
                  color: #FF00FF;  /*紫色*/
               }
        a:active{  /*鼠标点击时的链接*/
                  color: #0000FF;  /*蓝色*/
               }
        input:focus{  /*input输入框获取焦点时(输入内容时)的样式*/
                       /*input默认样式, 获取焦点时, 输入框变为浅蓝色*/
                   /*outline: none;  取消默认样式*/
                   background-color: #0000FF;  /*蓝色*/
                   }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <input type=text/>
</body>
</html>

3.6 伪元素选择器

"通过CSS伪造标签(不推荐使用)"

3.6.1 first-letter

"为标签(内容的)首字母设置特殊样式"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p:first-letter{  /*将<p>标签中的文本的第一个字改变颜色, 改变大小*/
              color: red;
              font-size: 32px;
              }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
            <p>子子p1标签</p>
            <p>子子p2标签</p>
            <p>子子p3标签</p>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

3.6.2 before

"在标签(内容)之前插入内容. 插入的内容不可选中"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p:before{  /*在每个<p>元素之前插入内容*/
              content: "插入的内容";
              color: #0000FF;
              }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
            <p>子子p1标签</p>
            <p>子子p2标签</p>
            <p>子子p3标签</p>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

3.6.3 after

"在标签(内容)之后插入内容. 插入的内容不可选中"

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p:after{  /*在每个<p>元素之前插入内容*/
              content: "插入的内容";
              color: #FF00FF;
              }
    </style>
</head>
<body>
    <div>
        <div>
            <span>子子span标签</span>
            <p>子子p1标签</p>
            <p>子子p2标签</p>
            <p>子子p3标签</p>
        </div>
        <p>子p标签</p>
    </div>
    <p>p标签</p>
</body>
</html>

before和after多用于清除浮动

3.7 选择器的优先级

浏览器本身按照从上到下的顺序加载文件内容
因此, 为相同的标签添加样式, 处在末位的样式会覆盖之前所有的相同样式
即, 对于相同的选择器, 按照末位样式进行渲染
然而对于不同的选择器, 需要考虑优先级

3.7.1 CSS继承

继承是CSS的一个主要特征, 依赖于祖先-后代关系
继承是一种机制, 它允许样式不仅可以应用于某个特定的元素, 还可以应用于它的后代
例如body定义了字体的颜色值也会应用到段落的文本中
body{color: red; }
CSS继承的权重为0, 因此只要为对应的标签设置样式便会覆盖继承来的样式
注意: 有一些属性是不能被继承的(border, margin, padding, background等)

3.7.2 选择器的优先级

由以上多种选择器的存在, 在页面上找到一个元素并为其设置样式的方式也是多样化的. 由此, 浏览器根据选择器的权重来决定应用何种样式

内联样式权重为: 1000

ID选择器权重为: 100

类选择器权重为: 10

元素选择器权重为: 1

权重计算没有进位(即选择器种类之间的权重不可逾越)

可通过添加!important强制使样式生效(不推荐使用)

即: p{color: red !important; }

四 CSS属性相关

4.1 基本属性

4.1.1 宽和高

width和height属性可以为元素设置宽和高

为元素设置宽度: width
为元素设置高度: height

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div{
            color: #FFF;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
<div>块级标签内的一些内容</div>
</body>
</html>

块级标签才能设置宽和高, 内联标签的宽和高由其内容决定

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        span{  /*对内联标签设置宽和高属性, 样式无效*/
            color: #FFF;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
<span>内联标签内的一些内容</span>
</body>
</html>

4.2 字体属性

4.2.1 文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存
如果浏览器不支持第一个字体, 则会尝试下一个
浏览器会使用它可识别的第一个值(字体)

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            font-family: 新宋体, sans-serif;
        }
    </style>
</head>
<body>
使用font-family设置文字字体(若浏览器不支持新宋体, 则使用默认的sans-serif字体)
</body>
</html>

4.2.2 字体大小

font-size属性可以设置字体的大小, 通常是像素级(单位为px)
如果设置成font-size: inherit; 表示继承父元素的字体大小值

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            font-size: 14px;
        }
    </style>
</head>
<body>
设置字体的大小为14px(像素)
</body>
</html>

4.2.3 字重(粗细)

font-weight属性可以设置字体的字重(粗细)

值	描述
normal	默认值,标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细, 400等同于normal, 700等同于bold
inherit	继承父元素字体的粗细值

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        #sp1{
            font-weight: normal;
        }
        #sp2{
            font-weight: bold;
        }
        #sp3{
            font-weight: bolder;
        }
        #sp4{
            font-weight: lighter;
        }
        #sp5{
            font-weight: 400;
        }
        #sp6{
            font-weight: inherit;
        }
    </style>
<body>
    <span id="sp1">默认值,标准粗细/</span>
    <span id="sp2">粗体/</span>
    <span id="sp3">更粗/</span>
    <span id="sp4">更细/</span>
    <span id="sp5">具体粗细, 400等同于normal/</span>
    <span id="sp6">inherit 继承父元素字体的粗细值.</span>
</body>
</html>

4.3 文本颜色

color属性可以设置字体的颜色
颜色属性有三种设置方式

十六进制值 - 如: ＃FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）

可将两位当作一种颜色, 而整个六位的值表示三种颜色的混合色, 通常遇到相同的两位可以简写 - 如: #FFF(白色)

RGB值 - 如: rgb(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0

rgba值可以设置透明度 - 如rgba(0, 0, 0, 1) # 黑色, 不透明(透明度0-1), 第四个值为alpha, 指定了色彩的透明度/不透明度

颜色的名称 - 如: red

方式	示例
十六进制值	#FF0000(红)/#00FF00(绿)/#0000FF(蓝)
RGB值	rgb(255, 0, 0)/rgb(0, 255, 0)/rgb(0, 0, 255)
代表颜色的英文单词	red/green/blue
可以设置透明度	rgba(0, 0, 0, 1)黑色, 不透明(透明度0-1), 第四个值为alpha, 指定了色彩的透明度/不透明度

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        #sp1{
            color: #FF0000;
        }
        #sp2{
            color: rgb(0, 255, 0);
        }
        #sp3{
            color: blue;
        }
        #sp4{
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
<body>
    <span id="sp1">红色</span>
    <span id="sp2">绿色</span>
    <span id="sp3">蓝色</span>
    <span id="sp4">透明度为0.5的黑色</span>
</body>
</html>

4.4 文字属性

4.4.1 文字对齐

text-align属性规定元素中的文本的水平对齐方式(letter-spacing文字间距)

值	描述
left	左对齐,默认值
right	右对齐
center	居中对齐
justify	两端对齐

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        #di1{
            text-align: left;
        }
        #di2{
            text-align: right;
        }
        #di3{
            text-align: center;
        }
        #di4{
            text-align: justify;
        }
    </style>
<body>
    <div id="di1">|左对齐, 默认值|</div>
    <div id="di2">|右对齐|</div>
    <div id="di3">|居中对齐|</div>
    <div id="di4">|两端对齐: 段落中除了最后一行文本外，其余行的文本的左右两端分别以文档的左右边界为基准向两端对齐|</div>
</body>
</html>

常利用text-align: center;和line-height: (块级元素的height值); 组合使用来使块级元素内的文字内容水平竖直居中

4.4.2 文字装饰

text-decoration属性用来给文字添加特殊效果

值	描述
none	默认, 定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本的一条线(类似单删除线)
inherit	继承父元素的text-decoration属性的值

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        #di1{
            text-decoration: none;
        }
        #di2{
            text-decoration: overline;
        }
        #di3{
            text-decoration: underline;
        }
        #di4{
            text-decoration: line-through;
        }
        #di5{
            text-decoration: inherit;
        }
    </style>
<body>
    <div id="di1">|默认, 定义标准的文本|</div>
    <div id="di2">|定义文本上的一条线|</div>
    <div id="di3">|定义文本下的一条线|</div>
    <div id="di4">|定义穿过文本的一条线(类似单删除线)|</div>
    <div id="di5">|继承父元素的text-decoration属性的值|</div>
</body>
</html>

常利用a{text-decoration: none; }去除a标签默认的下划线

4.4.3 首行缩进

"将段落的第一行进行缩进, 通常一个字符占32px(像素)"
利用p{text-indent: 32px; }设置首行缩进两个字符的样式

4.5 背景属性

background属性可以设置各种与背景相关的样式

属性	描述
background-color	背景颜色
background-image	背景图片
background-repeat	背景重复
background-position	背景位置

"如上所示的属性中, 对于设置背景图片来说, 背景重复是默认的. 图片最终会平铺满整个包裹它的标签, 即重复是针对背景图片而言的"

background-repeat: 值	描述
repeat	默认, 背景图片沿着x轴和y轴重复平铺,铺满整个包裹它的标签
repeat-x	背景图片只在水平方向上平铺
repeat-y	背景图片只在垂直方向上平铺
no-repeat	背景图片不平铺

"背景位置这个属性同背景重复一样都是针对背景图片而言的, 确切的解释是指背景的位置, 因此其前提为背景图片, 并且背景重复为不重复"

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        #di1{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            background-color: yellow;
        }
        #di2{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            background-image: url('CSSp1.png');
            /*其中url('图片路径')*/
            /*若图片与HTML文件在同一目录下, 可使用如上相对路径的方式*/
            background-repeat: no-repeat;
            /*默认背景重复, 这里设置背景不重复*/
        }
        #di3{
            width: 600px;
            height: 600px;
            font-size: 20px;
            color: green;
            text-align: center;
            line-height: 600px;
            background-image: url('CSSp1.png');
            background-repeat: repeat;
            /*默认, 背景图片沿着x轴和y轴重复平铺,铺满整个包裹它的标签*/
        }
        #di4{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            background-image: url('CSSp1.png');
            background-repeat: repeat-x;
            /*背景图片只在水平方向上平铺*/
        }
        #di5{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            background-image: url('CSSp1.png');
            background-repeat: repeat-y;
            /*背景图片只在垂直方向上平铺*/
        }
        #di6{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            background-image: url('CSSp1.png');
            background-repeat: no-repeat;
            /*背景图片不平铺*/
        }
        #di7{
            width: 600px;
            height: 600px;
            font-size: 20px;
            color: blue;
            text-align: center;
            line-height: 600px;
            background-image: url('CSSp1.png');
            background-repeat: no-repeat;
            background-position: right bottom;
            /*设置背景图片的位置在right(右) bottom(下)*/
            /*支持通过background-position: 数字px 数字px; 的方式调整背景图片位置.*/
            /*基于标签的左上角顶点为零点, 采用相对位置(向右, 向下为正|向左, 向上为负).*/
            /*前一个值代表相对于y轴, 后一个值代表相对于x轴*/
            /*支持简写: background: url('CSSp1.png') no-repeat right bottom; */
        }
    </style>
<body>
    <div id="di1">|背景颜色为黄色|</div>
    <hr>
    <div id="di2">|背景图片|</div>
    <hr>
    <div id="di3">|默认, 背景图片沿着x轴和y轴重复平铺,铺满整个包裹它的标签|</div>
    <hr>
    <div id="di4">|背景图片只在水平方向上平铺|</div>
    <hr>
    <div id="di5">|背景图片只在垂直方向上平铺|</div>
    <hr>
    <div id="di6">|背景图片不平铺|</div>
    <hr>
    <div id="di7">|设置背景图片的位置在right(右) bottom(下)|</div>
</body>
</html>

一个利用background-attachment: fixed; 固定背景的例子: (该例子中固定的背景不跟随滚动条发生滚动)

⤥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("CSSp1.png");
            background-attachment: fixed;
            /*使设置该属性的背景固定, 不发生跟随滚动(滚动条)*/
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

4.6 边框

4.6.1 外边框属性

边框属性	描述
border-width	外边框宽度
border-style	外边框样式
border-coloer	外边框颜色
border-radius	外边框圆角

将border-radius设置为长或高的一半即可得到一个圆形(椭圆)

"边框样式"

值	描述
none	无边框
solid	实线边框
dotted	点状虚线边框
dashed	矩形虚线边框
double	双实线边框(共享边框宽度)

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        #di1{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            border-width: 5px;
            /*边框宽度为5px*/
            border-style: solid;
            /*边框样式为实线边框*/
            border-color: red;
            /*边框颜色为红色*/
        }
        #di2{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            border-width: 5px;
            /*边框宽度为5px*/
            border-style: none;
            /*边框样式为无边框*/
            border-color: blue;
            /*边框颜色为蓝色*/
        }
        #di3{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            border-width: 5px;
            /*边框宽度为5px*/
            border-style: dotted;
            /*边框样式为点状虚线边框*/
            border-color: green;
            /*边框颜色为绿色*/
        }
        #di4{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            border-width: 5px;
            /*边框宽度为5px*/
            border-style: dashed;
            /*边框样式为矩形虚线边框*/
            border-color: yellow;
            /*边框颜色为黄色*/
        }
        #di5{
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: blue;
            text-align: center;
            line-height: 600px;
            border-width: 5px;
            /*边框宽度为5px*/
            border-style: solid;
            /*边框样式为实线边框*/
            border-radius: 50%;
            /*该属性实现圆角边框效果, 通常设置为50%即可将正方形变为圆形, 矩形变为椭圆*/
            /*因此, 将值设置为大于50%没有意义*/
            border-color: purple;
            /*边框颜色为紫色*/
        }
        #di6{  /*除了可以统一设置边框外还可以单独为某一个边框设置样式*/
                /*未设置颜色的边框默认沿用color: yellow; 若无color属性, 则默认为黑色*/
            width: 600px;
            height: 600px;
            font-size: 30px;
            color: yellow;
            text-align: center;
            line-height: 600px;
            border-top-style:dotted;
            /*将上边框的样式设置为点状虚线边框*/
            border-top-color: red;
            /*将上边框的颜色设置为红色*/
            border-right-style: solid;
            /*将右边框的样式设置为实线边框*/
            border-bottom-style: dotted;
            /*将底边框的样式设置为点状虚线边框*/
            border-left-style: none;
            /*设置无左边框*/
        }
    </style>
<body>
    <div id="di1">|宽度5px/实线/红色|</div>
    <hr>
    <div id="di2">|无边框|</div>
    <hr>
    <div id="di3">|宽度5px/点状虚线/绿色|</div>
    <hr>
    <div id="di4">|宽度5px/矩形虚线/黄色|</div>
    <hr>
    <div id="di5">|宽度5px/实线/实线/圆形|</div>
    <hr>
    <div id="di6">|单独为各边框设置样式|</div>
</body>
</html>

4.7 display属性

display属性用来控制HTML元素的显示效果

值	意义
display: "none"	元素存在于HTML文档中但不在浏览器中显示, 一般用于配合JavaScript代码使用
display: "block"	默认占满整个页面宽度, 若指定宽度，则会用margin填充剩下的部分
display: "inline"	按行内元素显示, 此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会生效
display: "inline-block"	使元素同时具有行内元素和块级元素的特点

4.7.1 display: "none";与visibility: hidden;的区别

display: none; 隐藏某个元素, 且隐藏的元素不会占用任何空间(塌陷)
也就是说, 该元素不但被隐藏了, 而且该元素原本占用的空间也会从页面布局中消失

visibility: hidden; 隐藏某个元素, 但隐藏的元素仍占用原空间
也就是说, 该元素虽然被隐藏了, 但仍然会影响布局(原先布局不会受到元素隐藏的影响)

4.8 CSS盒子模型

在CSS中, 每个标签也可以称为一个盒子模型

属性	描述
margin	外边距(用于控制元素与元素之间的距离)
border	边框(围绕在内填充和内容之外的边框)
padding	内填充(用于控制内容与边框之间的距离)
content	内容(盒子的内容, 显示文本和图像)

4.8.1 margin外边距

margin属性最基本的用途就是控制元素周围空间的间隔, 从视觉角度上达到元素之间相互隔开的效果

"通常浏览器会自动添加margin属性, 使得视觉上浏览器边界与内容之间存在一定的间隔. 因此在编辑CSS样式时通常会利用body{margin: 0;}设置body上下左右的margin都为0"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            color: white;
            background-color: red;
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            /*可以使用简写margin: 10px 10px 10px 10px; */
            /*顺序为: 上 右 下 左*/
            /*或者可以使用margin: 10px 10px; */
            /*前一个值代表上下, 后一个值代表左右*/
            /*若使用margin: 10px 20px 10px; */
            /*则表示上10px 左右20px 下10px*/
        }
        #di2{
            width: 100px;
            height: 100px;
            color: white;
            background-color: blue;
            margin-top: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
        }
        #di3{
            width: 100px;
            height: 100px;
            color: white;
            background-color: green;
            margin: 0 auto;
            /*上下0px, 左右自适应. 实现水平居中效果*/
        }
    </style>
</head>
<body>
    <div id="di1">
        内容1
    </div>
    <div id="di2">
        内容2
    </div>
    <div id="di3">
        内容3
    </div>
</body>
</html>

"上面的例子中, 上下两个标签都设置了margin, 并且两个标签具有不同的margin值. 结果显示, 相邻标签的margin不会发生叠加, 而是使用两者中较大的值来隔离两者"

4.8.2 padding内填充

padding属性的使用与margin相同.
用于控制内容与边框之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            color: white;
            background-color: red;
            border: 5px solid purple;
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            /*可以使用简写padding: 10px 10px 10px 10px; */
            /*顺序为: 上 右 下 左*/
            /*或者可以使用padding: 10px 10px; */
            /*前一个值代表上下, 后一个值代表左右*/
            /*若使用padding: 10px 20px 10px; */
            /*则表示上10px 左右20px 下10px*/
        }
        #di2{
            width: 100px;
            height: 100px;
            color: white;
            background-color: blue;
            border: 5px solid purple;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="di1">
        内容1
    </div>
    <div id="di2">
        内容2
    </div>
</body>
</html>

4.8.3 float浮动

在CSS中, 任何元素都可以浮动(现多用来做网页布局)

float属性可以实现浮动效果

利用div{float: left;}可以使<div>元素基于父级元素向左浮动(最左端)

利用div{float: right;}可以使<div>元素基于父级元素向右浮动(最右端)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            color: white;
            background-color: red;
            float: left;
            /*向左浮动*/
        }
        #di2{
            width: 100px;
            height: 100px;
            color: white;
            background-color: blue;
            float: right;
            /*向右浮动*/
        }
        #di3{
            width: 100%;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="di1">
        向左浮动
    </div>
    <div id="di2">
        向右浮动
    </div>
    <span>行级内容行级内容行级内容行级内容行级内容行级内容行级内容</span>
    <span>行级内容行级内容行级内容行级内容行级内容行级内容行级内容</span>
    <span>行级内容行级内容行级内容行级内容行级内容行级内容行级内容</span>
    <span>行级内容行级内容行级内容行级内容行级内容行级内容行级内容</span>
    <div id="di3">
        一个块级标签
    </div>
</body>
</html>

浮动的元素不会覆盖行级元素, 行级元素会为浮动的元素自动让位, 实现环绕效果. 但是浮动的元素会覆盖块级元素(浮动的副作用, 即所谓的塌陷问题, 浮动元素所占有的原空间塌陷, 导致其后的块级元素进行补位, 产生覆盖现象)

4.8.3.1 三种取值

值	描述
left	向左浮动
right	向右浮动
none	默认值, 不浮动

4.8.3.2 clear

clear属性规定元素指定的一侧或两侧不允许出现其他浮动元素
clear主要用来处理浮动的副作用(即塌陷问题), 解决元素覆盖现象

值	描述
left	在元素左侧不允许出现浮动元素
right	在元素右侧不允许出现浮动元素
both	在元素左右两侧不允许出现浮动元素
none	默认值, 允许浮动元素出现在两侧
inherit	从父元素继承clear属性的值

clear属性只会对自身起作用, 而不会影响其他元素

通常在使用的过程中不会直接为被覆盖的块级元素设置clear属性, 因为这样做需要经常考虑其他的元素是否具有浮动属性, 元素一多就容易混乱
正常的做法是添加一个空的(高度为0)块级元素, 将这个标签与浮动标签包裹于同一个父元素内共同使用, 这样做便只需要考虑浮动标签自己的样式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            color: white;
            background-color: red;
            float: left;
            /*向左浮动*/
        }
        #di2{
            width: 100px;
            height: 100px;
            color: white;
            background-color: blue;
            float: right;
            /*向右浮动*/
        }
        #di3{
            height: 0;
            clear: both;
        }
        #di4{
            width: 100%;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div id="di1">
            向左浮动
        </div>
        <div id="di2">
            向右浮动
        </div>
        <div id="di3"></div>
    </div>
    <div id="di4">
        一个块级标签
    </div>
</body>
</html>

4.8.3.3 清除浮动

为解决浮动的副作用, 即塌陷问题(覆盖相邻非浮动块级标签)引入清除浮动的方法

清除浮动主要有三种方法

利用clear属性固定高度法
- 将具有clear属性的空的(高度为0)块级元素与具有浮动属性的元素包裹于同一父元素内
伪元素清除法
- 使用较多的一种方法, 一般业内约定成俗, 把用来清除浮动的元素的class属性命名为clearfix
  - 如果在网页看到了这个clearfix, 那一定是用来清除浮动的

⤥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            color: white;
            background-color: red;
            float: left;
            /*向左浮动*/
        }
        #di2{
            width: 100px;
            height: 100px;
            color: white;
            background-color: blue;
            float: right;
            /*向右浮动*/
        }
        .clearfix:after{
            content: "";  /*在标签后添加空内容*/
            display: block;  /*利用display: block; 设置为块级标签属性*/
            clear: both;
            /*利用clear: both; 设置不允许空内容(块级元素)左右出现浮动元素*/
        }
        #di3{
            width: 100%;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div id="di1">
            向左浮动
        </div>
        <div id="di2">
            向右浮动
        </div>
    </div>
    <div id="di3">
        一个块级标签
    </div>
</body>
</html>

利用溢出属性overflow: hidden; 法

⤥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            color: white;
            background-color: red;
            float: left;
            /*向左浮动*/
        }
        #di2{
            width: 100px;
            height: 100px;
            color: white;
            background-color: blue;
            float: right;
            /*向右浮动*/
        }
        #di3{
            width: 100%;
            height: 200px;
            background-color: yellow;
            overflow: hidden;
            /*添加溢出属性*/
        }
    </style>
</head>
<body>
    <div id="di1">
        向左浮动
    </div>
    <div id="di2">
        向右浮动
    </div>
    <div id="di3">
        一个块级标签
    </div>
</body>
</html>

"利用浮动是为了实现块级标签的行内布局, 但是浮动本身具有(对非浮动块级标签来说视为)空间塌陷的副作用, 因此需要清除浮动"

也可以通过设置属性display: inline-block; 来实现块级标签的行内布局, 但是这种方法大量使用定位, 操作比较繁琐, 并且灵活性低, 一般不使用

4.8.4 overflow溢出属性

若设置了标签的宽和高, 那么在标签中添加内容时, 如果内容超出了标签设定的宽和高, 那么就会发生"溢出现象"(内容显示在标签之外)

overflow属性用来解决内容过多或其他原因导致的溢出现象, 也可以使用overflow属性实现其他目的

值	描述
visible	默认值, 内容不会被修剪, 会呈现在元素框外
hidden	内容会被修剪, 并且超出元素框外的内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	自适应, 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	从父元素继承 overflow 属性的值

针对方向设置溢出属性
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）

通常, 对于设置了宽度或高度的内容(p元素), 只要设置了单轴(x轴或y轴, 即overflow-x或overflow-y那么另一个轴也会受到影响, 从而发生改变, 不再是默认值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            background-color: red;
            overflow: hidden;
            /*其余内容被截断, 无法查看*/
        }
        #di2{
            margin-left: 100px;
            width: 100px;
            height: 100px;
            background-color: blue;
            overflow-y: scroll;
            /*设置y轴滚动条, 可通过滚动查看其余内容*/
        }
        #di3{
            width: 100px;
            height: 100px;
            background-color: green;
            /*默认会发生溢出现象, 内容显示到元素框外*/
        }
        #di4{
            margin-left: 200px;
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*overflow-x: scroll;*/
            overflow-y: hidden;
            /*设置x轴滚动条, 可通过滚动查看其余内容*/
            /*有效的滚动条取决于内容(段落p)的宽度*/
        }
        #di5{
            margin-left: 300px;
            width: 100px;
            height: 100px;
            background-color: pink;
            /*overflow-x: hidden;*/
            overflow-y: scroll;
            /*设置y轴滚动条, 可通过滚动查看其余内容*/
            /*有效的滚动条取决于内容(段落p)的高度*/
        }

    </style>
</head>
<body>
    <div id="di1">
        从前有座山, 山上有座庙, 庙里有个老和尚, 老和尚在给小和尚讲故事
    </div>
    <hr>
    <div id="di2">
        从前有座山, 山上有座庙, 庙里有个老和尚, 老和尚在给小和尚讲故事
    </div>
    <hr>
    <div id="di3">
        从前有座山, 山上有座庙, 庙里有个老和尚, 老和尚在给小和尚讲故事
    </div>
    <div id="di4">
        <p style="width: 1000px; ">
            从前有座山, 山上有座庙, 庙里有个老和尚, 老和尚在给小和尚讲故事
        </p>
    </div>
    <div id="di5">
        <p style="height: 1000px; ">
            从前有座山, 山上有座庙, 庙里有个老和尚, 老和尚在给小和尚讲故事
        </p>
    </div>
</body>
</html>

"圆形头像示例"
⤥

<!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">
  <title>圆形的头像示例</title>
  <style>
    * {  /*初始化所有元素样式(外边距为0, 内填充为0, 背景颜色为#EEE)*/
      margin: 0;
      padding: 0;
      background-color: #EEE;
    }
    .header-img {  /*设置头像容器的样式*/
      /*容器宽高均为150px*/
      width: 150px;
      height: 150px;
      /*设置容器边框样式: 宽度3px 实线 白色*/
      border: 3px solid white;
      /*圆角50%, 即圆形边框*/
      border-radius: 50%;
      /*溢出边框内容, 设置隐藏*/
      overflow: hidden;

    }
    .header-img>img {  /*设置头像原始图片样式*/
      /*设置头像原始图片大小, 最大为父标签(容器)大小, 若小于父标签大小, 则不做处理*/
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div class="header-img">
    <img src="box_model.png" alt="">
  </div>
</body>
</html>

4.9 定位(position)

position(定位)一般用来做一些小的布局, 大范围的布局一般用float(浮动)来做

值	描述
static	默认值, 无定位
relative	相对定位
absolute	绝对定位
fixed	固定

"定位属性"(需要确切理解概念)
⤥

属性	描述
top	相对原始位置或参照元素位置(盒子模型)上边界的偏移量
right	相对原始位置或参照元素位置(盒子模型)右边界的偏移量
bottom	相对原始位置或参照元素位置(盒子模型)下边界的偏移量
left	相对原始位置或参照元素位置(盒子模型)左边界的偏移量

偏移量为正值即向反方向偏移, 偏移量为负值即向同方向偏移
相对定位相对于原始位置(盒子模型), 绝对定位与固定定位相对于参照元素位置(盒子模型)

4.9.1 static(无定位)

static不参与定位, 设定了该属性值的元素不能当作绝对定位的参照物, 并且top, right, bottom, left等设定偏移量对其无效

4.9.2 relative(相对定位)

relative相对于元素的原始(盒子模型)位置, 并且即使发生偏移, 元素仍占有原始空间(与浮动不同, 空间不会塌陷)

"relative(相对定位)示例"
⤥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        #di1{
            width: 100px;
            height: 100px;
            background-color: red;
            /*设置相对定位属性值*/
            position: relative;
            /*相对原始位置(盒子模型)上边界的偏移量为50px*/
            top: 50px;
            /*z-index: 998;*/
            /*注释不影响实际效果, 注释内容与实际效果相同*/
            /*若偏移后出现元素重叠, 默认末位元素的层级最高(末位覆盖)*/
        }
        #di2{
            width: 100px;
            height: 100px;
            background-color: green;
            /*设置相对定位属性值*/
            position: relative;
            /*相对原始位置(盒子模型)左边界的偏移量为50px*/
            left: 50px;
            /*z-index: 999;*/
            /*注释不影响实际效果, 注释内容与实际效果相同*/
            /*若偏移后出现元素重叠, 默认末位元素的层级最高(末位覆盖)*/
        }

    </style>
</head>
<body>
    <div id="di1">元素1</div>
    <div id="di2">元素2</div>
</body>
</html>

4.9.3 absolute(绝对定位)

absolute删除元素的原始空间(空间塌陷), 相对于距离最近的已定位父元素定位, 若没有已定位父元素则相对于body元素定位

无论先前属于行级元素还是块级元素, 元素定位后变为块级元素

"relative(绝对定位)示例"
⤥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
          width: 200px;
          height: 200px;
          /*设置父元素相对定位值*/
          position: relative;

        }
        .c2{
          width: 200px;
          height: 200px;
          /*设置父元素相对定位值*/
          position: relative;
        }
        #di1{
            width: 100px;
            height: 100px;
            background-color: red;
            /*设置绝对定位属性值*/
            position: absolute;
            /*相对于参照元素位置(盒子模型)上边界的偏移量为50px*/
            top: 50px;
            /*z-index: 998;*/
            /*注释不影响实际效果, 注释内容与实际效果相同*/
            /*若偏移后出现元素重叠, 默认末位元素的层级最高(末位覆盖)*/
        }
        #di2{
            width: 100px;
            height: 100px;
            background-color: green;
            /*设置绝对定位属性值*/
            position: absolute;
            /*相对于参照元素位置(盒子模型)左边界的偏移量50px*/
            left: 50px;
            /*z-index: 999;*/
            /*注释不影响实际效果, 注释内容与实际效果相同*/
            /*若偏移后出现元素重叠, 默认末位元素的层级最高(末位覆盖)*/
        }
        #di3{
            width: 100px;
            height: 100px;
            background-color: blue;
            /*设置绝对定位属性值*/
            position: absolute;
            /*相对于参照元素位置(盒子模型)上边界的偏移量为50px*/
            top: 50px;
            /*相对于参照元素位置(盒子模型)左边界的偏移量为50px*/
            left: 50px;
        }
        #di4{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="c1">
      <div id="di1">元素1</div>
      <div id="di2">元素2</div>
    </div>
    <div class="c2">
      <div id="di3">元素3</div>
      <div id="di4">元素4(元素3空间塌陷)</div>
    </div>
</body>
</html>

4.9.4 fixed(固定定位)

fixed固定元素的位置, 不受页面滚动影响
可通过top, right, bottom, left等偏移属性定位

理论上, 被设置为fixed的元素会被定位于浏览器窗口的一个指定位置, 不论窗口是否滚动, 它都会固定在这个位置

"利用fixed实现一个返回顶部框(滚动页面, 返回顶部框不会跟着页面滚动)"
⤥

<!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">
  <title>返回顶部示例</title>
  <style>
    * {  /*初始化所有元素外边距*/
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: pink;
      overflow: hidden;
    }

    .scrollTop {
      background-color: yellow;
      padding: 10px;
      /*内容水平居中*/
      text-align: center;
      /*设置固定定位属性*/
      /*没有已定位父元素则相对于body元素定位*/
      position: fixed;
      /*相对于参照元素位置(盒子模型)右边界的偏移量为10px, 底边界的偏移量为20px*/
      /*在这里body元素即参照元素*/
      right: 10px;
      bottom: 20px;
      /*固定元素所占的内容空间(页面显示的元素的大小)由盒子模型中边框大小决定*/
      /*边框大小决定于内容, 内填充和边框宽度(即content, padding, 边框宽度值px)*/
    }
  </style>
</head>
<body>
<div class="d1">
返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例返回顶部示例

</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>

若一个元素设置了position: absolute; (绝对定位)或position: fixed; (固定定位)属性那么它就不能再设置float(浮动)属性
- <因为它们属于不同的流, 前一个是"定位流", 后一个是"浮动流". 但是position: relative; (相对定位)比较特殊, 它原始所占的空间仍然占据"文档流", 因此可以再设置float(浮动)属性>

4.9.5 z-index(层级)

z-index属性可以设置元素的层叠顺序(层级), 一般用于"模态对话框"

z-index用来定义元素的覆盖顺序(数值大的层级高, 在上面, 覆盖其他层级)
只有具有定位属性的元素才可以具有z-index属性
- 即具有相对定位, 绝对定位, 固定定位其中之一属性的元素, 都可以使用z-index属性设置其层级. 但是, 浮动元素(具有float属性的元素)不能使用z-index
z-index值没有单位(正整数), 默认为0.
- 若未设置z-index值或z-index值相等, 则遵循"末位覆盖"原则(即<body></body>标签对中, 按照从上到下的位置顺序, 后一个元素覆盖前一个元素)
- 具有定位属性的元素永远覆盖无定位属性的元素
继承父元素的z-index值(某元素若存在父元素, 则按照父元素的z-index值与其他元素进行比较)

"利用z-index实现模态对话框"
⤥

<!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">
  <title>自定义模态框</title>
  <style>
    .cover {  /*设置阴影层样式*/
      /*设置阴影样式, 即黑色, 透明度0.65*/
      background-color: rgba(0,0,0,0.65);
      /*设置固定定位属性*/
      position: fixed;
      /*相对于参照元素(盒子模型)上边界, 右边界, 底边界, 左边界的偏移量为0*/
      /*此处的参照元素即body元素*/
      /*无父标签, 即相对于body标签, 相当于该标签占据整个页面*/
      /*即上, 右, 下, 左边界皆为body标签的边界*/
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      /*设置层级为998*/
      z-index: 998;

    }

    .modal {  /*设置对话框层样式*/
      /*设置对话框背景白色*/
      background-color: white;
      /*设置固定定位属性*/
      position: fixed;
      /*设置对话框的宽和高*/
      width: 450px;
      height: 600px;
      /*设置对话框偏移量*/
      /*相对于参照标签位置(盒子模型)左边界, 上边界的偏移量为参照元素的左边界的50%, 上边界的50%*/
      /*此处的参照元素即body元素*/
      /*无父标签, 即相对于body标签, 相当于向右偏移半个页面, 向下偏移半个页面*/
      /*即该元素的左上角顶点为页面中心*/
      left: 50%;
      top: 50%;
      /*将对话框盒子模型的上外边距设置为对话框高度的一半, 左外边距设置为对话框宽度的一半*/
      /*即实现将对话框的中心定位到其原始空间的左上角顶点位置*/
      /*即对话框中心与页面中心重合, 实现对话框显示于页面正中心, 对话框大小自适应页面大小*/
      margin: -300px 0 0 -225px;
      /*设置层级为最高*/
      z-index: 1000;
    }
  </style>
</head>
<body>
    <div class="cover"></div>
    <div class="modal"></div>
</body>
</html>

"一个小例子, 用于展示设置外边距实现覆盖效果"
⤥

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    #di1{
      width: 400px;
      height: 400px;
      background-color: blue;
      margin: 0 0;
    }
    #di2{
      width: 400px;
      height: 400px;
      background-color: yellow;
      margin: -200px 0;
    }
  </style>
</head>
<body>
  <div id="di1">
      第一个
  </div>
  <div id="di2">
      第二个
  </div>
</body>
</html>

以上的例子说明, margin(外边距)同定位有一定的相似之处, 相对于原始盒子模型的四周边界，不同在于margin的正/负值代表元素所占空间的增长/塌陷, 定位的正/负值代表偏移的反方向/同方向. (margin值为正时, 由于元素所占空间增长从而显示为元素内容被推向反方向, 而margin值为负时, 由于元素所占空间塌陷从而显示为元素内容被拉向同方向)
- 元素显示的内容大小取决于padding和content整体的大小(默认无边框, 若存在边框则需要考虑边框的宽度)

4.9.6 opacity

opacity属性用来定义透明效果, 不同于rgba(), opacity属性定义的透明效果作用于整个元素

posted @ 2019-05-07 21:56 blog_wu 阅读(185) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Blog

这里应该写点名人名言的。