1 2 3 4

前端之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;
            width:200px;
            height:400px
        }
        span {
            color:red ;
          width: 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 {
            width: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-width:10px ;/*边框的宽度*/
            border-left:solid ;/*边框的左边*/
            border-right:dashed ;/*边框的右边*/
            border-bottom:dotted ;/*边框的底部*/
        }/*边框有四边 每一边都可以设置独有的样式 颜色 粗细*/
        div {
            height:500px ;
            width: 500px;
            border: 3px solid red;
        }
        span {
            height:200px ;
            width: 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 ;
            width: 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;width: 50px;background-color: red;display: inline">-->
<!--    sadiasd-->
<!--</div>-->
<!--<div style="height: 50px;width: 50px;background-color: green;display: inline">-->
<!--    sajdsad-->
<!--</div>-->
<!--<span style="background-color: red;height: 100px;width: 100px;display: inline-block">span</span>-->
<!--<span style="background-color: green;height: 100px;width: 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;
            width: 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;
            width: 100px;
            background-color: green;
        }
        .c3 {
            border: 3px solid black;
            height: 400px;
            width: 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 ;
    width:20%;
    height:1000px;
    float:left;

}
      .right-menu {
    background-color: wheat ;
    width: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 ;
    width:100px;
    height:200px;
    float:left;

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

}
              .c3 {
    background-color: orange ;
    width: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;
            width: 100px;
            border-radius: 50%;
            border: 5px solid white;
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;*/
            overflow: hidden;
        }
        img {
            max-width: 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;
            width: 100px;
            background-color: red;
            /*position: static;  !*默认值*!*/
            position: relative;  /*相对定位*/
            left: 100px;
            top: 100px;
        }
        .c2 {
            height: 50px;
            width: 100px;
            background: green;
            position: relative;
        }
        .c3 {
            position: absolute;
            height: 200px;
            width: 200px;
            background-color: orange;
            left: 100px;
            top: 50px;
        }
        .cc {
            height: 50px;
            width: 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;
            width: 50px;
            /*position: relative;*/
        }
        .c2 {
            background-color: green;
            height: 50px;
            width: 50px;
            /*position: absolute;*/
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .c3 {
            background-color: orange;
            height: 50px;
            width: 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;
            width: 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（设置垂直方向）
posted @ 2019-12-30 16:34  ^更上一层楼$  阅读(417)  评论(0)  编辑  收藏  举报