前端之CSS介绍

前端的CSS介绍

前端的CSS介绍

1.1CSS（Cascading Style Sheet) 层叠样式

用来调节标签的样式。

css注释
		/*注释*/
		/*
		注释1
		注释2
		注释3
		*/
		注释的使用
			css应该是一个独立的文件
			/*这是小米首页的css样式文件*/
			/*页面通用样式*/
			/*顶部导航条样式*/
			/*侧边菜单栏样式*/

1.2CSS的语法结构：

选择器{属性名：属性值；属性名1：属性值1；属性名2：属性值2；}

1.3CSS的三种引入方式：

1.外部的css文件（最正规的书写方式）

2.head内style标签内部直接书写的css代码

3.标签内部通过style属性直接书写对应的样式（不推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="second_css.css">-->###这种的写法非常的 正规 第一种写法
<!--    <style>-->
<!--      p{-->
<!--          color:green;--># 这个是第二种写法 
<!--      }-->
<!--    </style>-->

</head>
<body>###下面这个是第三种写法 不推荐使用
<p style="color: orange">千呼万唤始出来，犹抱琵琶半遮面</p>
</body>
</html>

1.4CSS学习的流程

1.基本选择器

-元素选择器：将页面上所有的div/p/span 等标签内部的文本变成指定颜色

-类选择器：.+ 类名将页面上一种具有类属性的等标签内部的文本变成指定颜色

-id选择器：#+ id值将页面上某一个id 等标签内部的文本变成指定颜色

*-通用选择器： 页面上的标签统一修改成指定颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器 元素选择器*/
        /*div {  !*将页面上所有的div标签内部的文本变成红色*!*/
        /*    color: red;*/
        /*}*/

        /*类选择器     点号*/
        /*.c1 {  !*让所有具有c1类属性值的标签内部文本变成蓝色*!*/
        /*    color:blue;*/
        /*}*/

        /*id选择器     #号*/
        /*#d1 {  !*将id为d1的标签内部文本内容改成绿色*!*/
        /*    color: green;*/
        /*}*/


        /*通用选择器   *号*/
        /** {  !*页面上所有的标签统一修改样式*!*/
        /*    color: aqua;*/
        /*}*/
    </style>
</head>
<body>
<div class="c1">老板你好 我是23号技师 很高兴为您服务
    <span>我是div内部的span</span>
</div>
<p id="d1" class="c1">来宾三位 楼上请</p>
<div>老板你好 我是23号技师 很高兴为您服务</div>
<span class="c1">珊珊出来接待一下</span>
<p>来宾三位 楼上请</p>
<span id="d2">珊珊出来接待一下</span>
</body>
</html>

2.组合选择器

-后代选择器

-儿子选择器

-毗邻选择器：毗邻的下一个

-弟弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*!*后代选择器*!*/
    /*    div span { !* 空格表示 div内部的span没有层级的限制*!*/
    /*        color: red;*/
    /*    }*/
    /* !*儿子选择器*!*/
    /*    div > span { !*  >表示div内部的儿子*!*/
    /*        color: green;*/
    /*    }*/
      /*毗邻选择器*/
    /*div + span { !*  >表示div紧挨着下一个标签*!*/
    /*    color: aqua;*/
    /*}*/
    /*弟弟选择器*/
    div ~ span { /*  >表示div同级别下面所有的标签*/
        color: coral;
    }


    </style>


</head>
<span>div上面的span</span>
<span>div上面的span</span>
<div>
    <span>div内部的第一个span</span>
    <p>div内部的p
      <span>div内部的p内部的span</span>
    </p>
    <span>div内部的最后一个span</span>

</div>

<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>
<span>div下面的span</span>

<div>弟弟来了
    <p> 哥哥来也</p>
    </div>
    <span> 一起回家</span>


<body>
<!--<p style="color: orange">千呼万唤始出来，犹抱琵琶半遮面</p>-->
</body>
</html>

3.属性选择器

html标签既可以有默认的属性，也可以自定义属性，并且支持多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
   /* !*!*属性选择器*!*!*/
   /*[username] { !*!* 找到页面上属性是username属性名的标签*!*!*/
   /*    background-color: green;*/
   /*}*/
   /*!*属性选择器*!*/
   /*[username='jason'] { !*!* 找到页面上属性名是username 但是属性值叫jason的标签*!*!*/
   /*    background-color: green;*/
   /*}*/
  input[username='jason'] { /*!* 找到页面上属性名是username 但是属性值叫jason的input标签*!*/
       background-color: aquamarine;
   }


    </style>


</head>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username="owen">
<p username="tank">会当凌绝顶，一览众山小</p>
<p username="oscar">秦时明月汉时关，万里长征人未还</p>
<p username="tank">但使龙城飞将在，不叫胡马度阴山</p>


<body>

</body>
</html>

4.分组和嵌套

几种选择器可以组合嵌套使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*div{*/
/*    color:red;*/
/*}*/
/*        p {*/
/*            color: green;*/
/*        }*/
/*        div,p,span{*/
/*            color:red;*/
/*        }*/
/*        .c1,#d1,p {*/
/*            color: yellow;*/
/*        }*/
/*        .c1 h1 { !*!* 找具有c1属性的值的标签，后代的h1*!*!*/

/*            color: red;*/
/*        }*/

    </style>
</head>
<body>
<div class="c1">
    快要下课了，下课了 快下课了
    <h1>我是h标签</h1>
</div>
<span id="d1">
    快要下课了 真的快要下课了
</span>
<p> 真的快要下课 我总算是做完了 真的不想再去做了</p>
</body>
</html>

5.伪选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {		###未访问的链接 链接态
            color: coral;
        }
        a:hover {     ####鼠标移动到鼠标上  悬浮态
            color:black;
        }
        a:active{		####选定的的链接  点击态
            color: gray;
        }

        a:visited {		####已经访问的链接  被点击态
            color:red;
        }
        input:focus {			###input输入框取焦点的样式
            background-color: mediumspringgreen;
        }



    </style>


</head>
<body>
<a href="https://cn.bing.com/search?q=%e6%80%8e%e4%b9%88%e5%85%a8%e5%b1%8f%e6%98%be%e7%a4%ba&FORM=QSRE2">点我1</a>
<a href="https://fanyi.baidu.com/#en/zh/application.">点我2</a>
<a href="https://www.cnblogs.com/Dominic-Ji/p/10474769.html">点我3</a>
<a href=" https://cn.bing.com/search?q=%E4%B8%AD%E5%9B%BD&qs=n&form=QBLH&sp=-1&pq=%E4%B8%AD%E5%9B%BD&sc=9-2&sk=&cvid=5E111589AA204AC09B934C0480FF5582 ">点我4</a>
<input type="text">
</body>
</html>

6.伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*p:first-letter{*/  #给首字母设置特殊样式
      /*    color:red;*/
      /*!*}*!*/
      /*  p:before {*/    ###在<p>元素之前插入内容
      /*      content: 'hello';*/
      /*      red;*/
      /*  }*/
p:after{		###在每个<p>元素后面插入内容
    content:'?';
    color:blue;
}
    </style>
</head>
<body>
<p>
  大家新年好
</p>
</body>
</html>

7.选择器的优先级问题

1.选择器相同，就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{
            color: orangered ;#####这个是最远的
        }
    </style>
    <link rel="stylesheet" href="mycss.css">#####这个是第二近
</head>
<body>
<p style="color:green">今天是周五 明天还要上课</p> ###这里是离的最近的 所以先是这个操作
</body>

</html>

2.选择器不同

行内 > id选择器 > 类选择器 > 标签选择器

精确度越高先选择哪里的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1 {
            color: darkcyan;
        }
        #d1{
            color:red ;####这个是最先选择的
        }
    </style>

</head>
<body>
<p id="d1" class="c1" >今天是周五 明天还要上课</p>
</body>

</html>

除此之外还可以添加 ‘！important ’ 方式来强制让样式生效，但并不推荐使用，如果过多使用，会使有样式文件混乱不易维护，万不得已的时候才使用。

8.如何调节标签样式

长宽只能给块儿级标签设置

行内标签是无法设置长宽的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            color: darkcyan;
            200px;
            height:400px
        }
        span {
            color:red ;
           200px;
            height:400px;
        }
    </style>

</head>
<body>
 <div>
     效率第一####这个是块级标签
 </div>
<span>
    坚持就是胜利  ####这个是行内标签
</span>
</body>

</html>

二.文字的样式

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

2.色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

3.文字的字重（粗细）

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

4.文字的对齐

text-align 属性规定元素中的文本的水平对齐方式。

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
     p {
         font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
         font-size:48px; /*文字大小*/
         /*font-weight:bold;*/
         font-weight:lighter ;/*文字的粗细*/
         /*color: red;*/
         /*color:#4e4e4e ;*/   /*中间的三种是*/
         color:rgb(128,22,127) ;
         color: rgba(123,125,0,0.8);/*后面的是控制颜色的亮度*/
     }
         p{
            text-align: center;/*文字的居中*/
        }

    </style>

</head>
<body>
<p> 无边落木萧萧下，不尽长江滚滚来</p>
</body>

</html>

5.文字的装饰

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

text-indet 首行缩进

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
 
        a{
            text-decoration: line-through;
        }

    </style>

</head>
<body>

<a href="http://www.mmkindle.com/book/xlx/1484.html">点我哟</a>
</body>

</html>

三.背景属性

background-position center center 这个是图片的位置要居中发的意思

 /*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

支持简写：

background: yellow url('1.png') no-repeat left top;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
 
        /*div{*/

        .c1 {
            400px ;
            height: 400px;
            background-color: antiquewhite;/*背景颜色*/
            background-image: 		url(https://blog.csdn.net/panjiao119/article/details/79181412.jpg)
            /*background-repeat: no-repeat;!*不平铺*!*/
            background-repeat: repeat-y;/*平只在y方向上铺*/
            background-position: 300px 10px;/*第一个调节左右，从左边起距边，第二个调节上下，从上面起距上边*/
        }
              
    </style>

</head>
<body>
<div class="c1">  </div>
<!--<div> 今天是周五 明天休息</div>-->
</body>

</html>

如下是一个示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
 
        /*div{*/

        #d1 {
            height:500px ;
            background-color:red ;
        }
        #d2 {
            height:500px ;
            background-color:  grey;
        }
        #d4 {
            height:500px ;
            background-color: yellow ;
        }
        #d3 {
            height:500px ;
           background-image:url("data:image/jpeg;bQQXdkjKkEoVzuPc55xitlYsp3b1ZclQvxIrgY/dz096WZ") ;
            background-attachment: fixed;
        }

    </style>

</head>
<body>

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>

</html>

四.边框

1.边框的风格

border-width
border-style

border-color

2.边框的样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            border-style:dashed;/*边框的样式*/
            border-color: red;/*边框的颜色*/
            border-10px ;/*边框的宽度*/
            border-left:solid ;/*边框的左边*/
            border-right:dashed ;/*边框的右边*/
            border-bottom:dotted ;/*边框的底部*/
        }/*边框有四边 每一边都可以设置独有的样式 颜色 粗细*/
        div {
            height:500px ;
             500px;
            border: 3px solid red;
        }
        span {
            height:200px ;
             200px;
            border: 5px dashed green;
        }
    </style>
</head>
<body>
<p>今天的天气非常晴朗 </p>
<div>vhvlskegs;geklnewlkgjolbd</div>
<span>slkngewlknbldlnkbbn</span>
</body>
</html>

3.画圆

border-radius 半径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:400px ;
             400px;
            background-color: red;
            border-radius: 50%;/*可以用XXpx 表示 长高不一致，会变成椭圆*/
        }
    </style>

</head>
<body>
<div>

</div>
</body>
</html>

4.display

用于控制HTML元素的显示效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div style="height: 50px; 50px;background-color: red;display: inline">-->
<!--    sadiasd-->
<!--</div>-->
<!--<div style="height: 50px; 50px;background-color: green;display: inline">-->
<!--    sajdsad-->
<!--</div>-->
<!--<span style="background-color: red;height: 100px; 100px;display: inline-block">span</span>-->
<!--<span style="background-color: green;height: 100px; 100px;display: inline-block">span</span>-->


<!--inline-block能够让一个标签即有快二级标签可以设置长宽的特点 又有行内标签在一行展示的特点-->


<div>div1</div>
<!--<div style="display: none">div2</div>-->
<div style="visibility:hidden">div2</div>
<div>div3</div>


<!--display: none隐藏标签 并且标签所占的位置也要让出来-->


</body>
</html>

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

五.盒子模型

盒子模型
快递盒
快递盒与快递盒之间的距离标签与标签之间的距离外边距(margin)
快递盒盒子的厚度标签的边框边框(border)
快递盒里面的物体到里面盒子的距离标签内部文本内容到边框的距离内边距/内填充(padding)
快递盒内容的物体大小标签内部的文本内容内容(content)

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;  /*取消body标签自带的8px的外边距*/
        }
        /*div {*/
        /*    border: 5px solid red;*/
        /*}*/
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            /*margin-bottom: 50px;*/
            /*margin-left: 100px;*/
            /*margin: 20px;  !*上下左右*!*/
            /*margin: 20px 40px;  !*第一个是上下   第二个是左右*!*/
            /*margin: 20px 40px 60px;  !*上   左右   下*!*/
            /*margin: 20px 40px 60px 80px;  !*上  右 下 左  顺时针*!*/
            /*margin: 0 auto;  !*水平居中*!*/


        }
        .c2 {
            margin-top: 20px;
            height: 100px;
             100px;
            background-color: green;
        }
        .c3 {
            border: 3px solid black;
            height: 400px;
             400px;
            /*padding-top: 20px;*/
            /*padding-left: 40px;*/
            /*padding: 20px;*/
            padding: 20px  40px;
            /*padding: 20px;*/
            /*padding: 20px;*/
            /*padding跟margin简写规律一致*/

        }
        p {
            margin: 0;
        }
        ul {
            padding-left: 0;
        }
    </style>

</head>
<body>
<!--<div>啥都卡死的十大科技打卡</div>-->
<!--<div class="c3">-->
<!--   <div class="c1" id="d1"></div>-->
<!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
<!--</div>-->


<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>


<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

</body>
</html>

六.float 浮动

left：向左浮动

right：向右浮动

none：默认值，不浮动

clear属性规定元素的哪一侧不允许其他浮动元素。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

.left-menu {
    background-color: red ;
    20%;
    height:1000px;
    float:left;

}
      .right-menu {
    background-color: wheat ;
    80%;
    height:2000px;
    float:right;

}

    </style>

</head>
<body>
<div class="left-menu"></div>
<div class="right-menu"></div>



</body>
</html>

浮动的元素是脱离正常文档流的自身多大就会占多大不再有独占一行的概念
浮动多用于页面的前期布局(!!!!!!!)

浮动的缺陷
浮动会造成父标签塌陷的问题

clear属性
专门用来清除浮动所带来的负面影响父标签塌陷的问题

哪里有父标的塌陷就给父标加上clearfix类属性值

清除浮动带来的影响你只需要记住一个结论
在写页面之前先定义好清除浮动的css代码
.clearfix:after {
content: "";
display: block;
clear: both;
}
结论:谁塌陷了就给谁加上clearfix样式类

浏览器默认是优先展示文本内容的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
body {
    margin: 0;
}
#d1 {
    border: 3px solid black;
}
.c1 {
    background-color: red ;
    100px;
    height:200px;
    float:left;

}
      .c2 {
    background-color: wheat ;
    100px;
    height:150px;
    float:right;

}
              .c3 {
    background-color: orange ;
    100px;
    height:100px;
    float:right;

}
              
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}





    </style>

</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3">
        asfihiehgdohivd
    </div>

</div>




</body>
</html>

七.圆形头像事例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            background-color: antiquewhite;
        }
        .c1 {
            height: 100px;
             100px;
            border-radius: 50%;
            border: 5px solid white;
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;*/
            overflow: hidden;
        }
        img {
            max- 100%;/*宽度最大化*/
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="111.png" alt="">
</div>
</body>
</html>

八.定位

定位
所有的标签默认情况下都是静态的(static) 无法做位置的修改
如果你想要修改标签位置你需要先将静态改为可以修改的状态

相对定位  relative
	相当于标签原有的位置做偏移
		了解即可

绝对定位  absolute
	相当于已经定位过的(static>>>relative)父标签做偏移
		eg:
			小米购物车

固定定位  fixed
	相当于浏览器窗口固定在某个位置始终不变
		eg:
			回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            /*position: static;  !*默认值*!*/
            position: relative;  /*相对定位*/
            left: 100px;
            top: 100px;
        }
        .c2 {
            height: 50px;
             100px;
            background: green;
            position: relative;
        }
        .c3 {
            position: absolute;
            height: 200px;
             200px;
            background-color: orange;
            left: 100px;
            top: 50px;
        }
        .cc {
            height: 50px;
             100px;
            background-color: #4e4e4e;
            color: white;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2">-->
<!--    <div class="c3">空空的 什么都没有...</div>-->
<!--</div>-->
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: orange"></div>
<div class="cc">回到顶部</div>
</body>
</html>

九.脱离文档流

哪些状态是脱离正常文档流的
验证这个标签原来所占用的位置还在不在
浮动
定位

不脱离
	相对定位

脱离
	脱离文档流
	绝对定位
	固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
             50px;
            /*position: relative;*/
        }
        .c2 {
            background-color: green;
            height: 50px;
             50px;
            /*position: absolute;*/
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .c3 {
            background-color: orange;
            height: 50px;
             50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

十.z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal {
            background-color: #808080;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
            opacity: 0.4;
        }
        .form {
            background-color: white;
            height: 200px;
             100px;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
<div>我是最底下的那个</div>
<div class="modal"></div>
<div class="form"></div>
</body>
</html>

十一.透明度

透明度
optacity既可以该颜色也可以改文本
rgba只能该颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: rgba(128,128,128,0.4);
        }
        .c2 {
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div class="c1">阿萨德撒大家都</div>
<div class="c2">阿萨德撒大家都</div>
</body>
</html>

十二.overflow溢出属性

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

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）