css学习笔记

最新推荐文章于 2024-09-23 15:32:37 发布

cj1064789374

最新推荐文章于 2024-09-23 15:32:37 发布

阅读量295

点赞数

分类专栏： 2021年研究生学习笔记

本文链接：https://blog.csdn.net/cj1064789374/article/details/112982862

版权

2021年研究生学习笔记专栏收录该内容

45 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>行内样式</title>
    </head>
    <body>
        <h1 style="color: red">hello world</h1>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>
            h1{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外部样式</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <h1>hello world</h1>
        总结：样式就这三种，本笔记样例都是内部样式，实际开发用外部样式
    </body>
</html>


style.css

h1{
    color: red;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>
            p{
                color: #a13d30;
                background: #3cbda6;
                border-radius: 24px;
                font-size: 80px;
            }
            .c1{
                color: red;
                background: blue;
                border-radius: 1px;
                font-size: 40px;
            }
            #cj01{
                color: yellow;
                background: green;
                border-radius: 20px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <p>标签选择器</p>
        <p class="c1">类选择器</p>
        <p class="c1" id="cj01">id选择器</p>
        后代选择器
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
            body p{/*body的子孙中p标签的属性*/
                background: red;
            }
            body>p{/*body的亲儿中p标签的属性*/
                background: yellow;
            }
            p+h1{/*紧跟p标签后的同级h1标签的属性*/
                background: green;
                margin-top:100px;
            }
            h1~p{/*h1标签后的所有同级p标签的属性*/
                background: blue;
            }
            /*如果是p,h1则并列关系，表示两个元素一起设置属性*/
        </style>
    </head>
    <body>
        <p>后代选择器-红，子选择器-黄（就近原则）</p>
        <h1>相邻弟弟选择器-绿</h1>
        <ul>
            <li>
                <p>后代选择器-红</p>
            </li>
        </ul>
        <p>通用弟弟选择器-蓝，后代选择器-红，子选择器-黄（就近原则）</p>
        <hr/>
        上面的四个组合选择器不一定用标签组合，也可以用.class与#id
        <hr/>
        就近原则：哪个style定义离标签近就用哪个
        （前面的内部样式与外部样式也是就近原则，但行内标签绝对是最高优先级）
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>结构伪类选择器</title>
        <style>
            ul li:first-child{/*ul的第一个子元素*/
                background: blue;
            }
            ul li:last-child{/*Ul的最后一个子元素*/
                background: red;
            }
            p:nth-child(2){/*p元素的父元素的第2个儿子是p元素本身时生效*/
                 background: yellow;
             }
            p:nth-of-type(2){/*p元素的父元素的第2个p元素*/
                background: green;
            }
            a:hover{/*鼠标移动到上面时*/
                background: #3cbda6;
            }
        </style>
    </head>
    <body>
        <h1>h1</h1>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
        <a href="#">a</a>
        <hr/>
        注释中用元素而不用标签是因为元素可以是.class或#id
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            .demo a{
                float:left;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: blue;
                text-align: center;
                color: gainsboro;
                text-decoration: none;/*无下划线*/
                margin-right: 5px;/*距离右边元素5像素距离*/
                font: bold 20px/50px Arial;/*粗体 字体大小20px 行高50px Arial字体*/
                /*为什么在竖直方向上有居中的效果呢？*/
                /*因为block的height设了50px，而font的行高也是50px！（你试试height改100px就明了）*/

                /*下面是延伸*/
                /*margin-right: 5px;*/
                /*margin-left: 5px;*/
                /*margin-top: 5px;*/
                /*margin-bottom: 5px;*/
                /*margin可以统一上面四行*/
                /*border-right: 5px;*/
                /*border-left: 5px;*/
                /*border-top: 5px;*/
                /*border-bottom: 5px;*/
                /*border可以统一上面四行*/
                /*padding-right: 5px;*/
                /*padding-left: 5px;*/
                /*padding-top: 5px;*/
                /*padding-bottom: 5px;*/
                /*padding可以统一上面四行*/
            }
            a[id]{/*对有id属性的a标签进行样式设置*/
                background: yellow;
            }
            a[id=second]{/*对有id属性且id属性值是second的a标签进行样式设置*/
                background: pink;
            }
            a[class*=links]{/*正则表达式，class属性值有links的a标签*/
                background: darkmagenta;
            }
            a[class="links 1"]{/*对有class属性且值是links 1的a标签进行样式设置*/
                background: red;
            }
            a[href^=cj]{/*正则表达式，class属性值以links开头的a标签*/
                background: darkblue;
            }
            a[href$=htm]{
                background: darkred;
            }
        </style>
    </head>
    <body>
    <p class="demo">
        <a href="test01.html" id="first">1</a>
        <a href="test02.html" id="second">2</a>
        <a href="test03.html" class="links 1">3</a>
        <a href="test04.html" class="links 2">4</a>
        <a href="cjtest05.html">5</a>
        <a href="cjtest06.html">6</a>
        <a href="test07.htm">7</a>
        <a href="test08.htm">8</a>
        <a href="test09.html">9</a>
        <a href="test10.html">10</a>
    </p>
    <hr/><hr/><hr/><hr/><hr/><hr/><hr/>
    总结：选择器到此结束，其实没什么难的，就过两眼留个印象，顺带一提，事件证明，命名时css允许用空格
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本字体样式</title>
        <style>
            body{
                font-family: "Arial Black", 宋体;
            }
            h1{
                text-align: center;/*center居中，left左对齐，right右对齐*/
                font-size: 50px;
            }
            #id1{
                font-weight:551;/*经测试551以上是粗，550以下是细*/
                /*默认就是lighter不加粗*/
            }
            .cls1{
                font: oblique bolder 16px "隶书";/*斜粗16px字体*/
            }
            span{
                color: red;
            }
            #id2{
                color: #00FF00;
            }
            #id3{
                color: rgb(0,255,255);
            }
            #id4{
                color: rgba(0,0,255,0.5);
            }
            #id5{
               text-indent: 2em;
            }
            #id6{
                background: yellow;
                height: 300px;/*这是块的高*/
                line-height: 300px;/*这是字行高，与块高一样所以会在块的高度一半处显示*/
            }
            #id7{
                text-decoration: underline;
            }
            #id8{
                text-decoration: line-through;
            }
            #id9{
                 text-decoration: overline;
             }

            #id10 {
                font-size: xx-large;
                text-shadow: 10px 20px 5px #FF0000;
            }
            #id11 {
                font-size: 20px;
                background: darkblue;
            }
            #id12 {
                font-size: 30px;
                background: green;
            }
            #id11,#id12{

                vertical-align: middle;/*高居中对齐*/
            }
            a{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <h1>玻璃之情</h1>
        <p id="id1">从前我会使你快乐</p>
        <span class="cls1">现在却最多叫你寂寞</span>
        <div> 再吻下去像皱纸轻薄</div>
        <div id="id2">撕开了都不觉</div>
        <div id="id3">我这苦心已有预备</div>
        <div id="id4">随时有块玻璃破碎堕地</div>
        <div id="id5">勉强下去我会憎你</div>
        <div id="id6">只差那一口气</div>
        <div id="id7">不信眼泪能令失落的你爱下去</div>
        <div id="id8">难收的覆水将感情漫漫荡开去</div>
        <div id="id9">如果你太累及时地道别没有罪</div>
        <div id="id10">牵手来空手去就去</div>
        <span id="id11">span没有width</span>
        <span id="id12">span没有height</span>
        <a href="#">超链接去下划线</a>
        <hr/>
        I love you forever.<br/>
        这句英语加粗是因为font-family中给英文赋字体时有black黑体
        <hr/>
        em相对于父元素，rem相对于根元素
        <hr/>
        <br/>总结文字属性：
        <br/>颜色就三个：color，background，border-color
        <br/>首行缩进是text-indent:2em
        <br/>下划线是text-decoration:none/underline/overline/line-through
        <br/>文本对齐是text-align:left/center/right，是指文字在方框内部靠左还是靠右
        <br/>文本竖直方向对齐用行高line-height使与块高height相等即可
        <br/>多块之间对齐则使用共同属性vertical-align:middle
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接伪类</title>
        <style>
            h1{
                text-shadow: 10px 20px 5px #FF0000;
            }
            a:link{color: #FF0000}/*未经过*/
            a:hover{color: #0000FF}/*经过未按下*/
            a:active{color: #00FF00}/*按下未释入*/
            a:visited{color: #000000}/*已释放*/
        </style>
    </head>
    <body>
        <h1><a href="#">总结：超链接就记住四个伪类:水平距离，垂直距离，模糊半径，颜色</a></h1>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style>
            #id1{
                padding-left: 100px;
                width: 600px;
                background: red ;
            }
            ul{
                background: yellow url("img/photo.jpg") 550px 10px no-repeat;
                /*颜色，图像，坐标，是否重复*/
                /*相当于background*/
                /*相当于background-image*/
                /*相当于background-position*/
                /*相当于background-repeat*/
            }
            ul li{
                height: 30px;
                text-indent: 1em;
                list-style: decimal;
                /*circle空心，默认实心，square方，none无*/
            }
        </style>
    </head>
    <body>
        <div id="id1">
            <ul>
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
                <li>ddd</li>
                <li>eee</li>
            </ul>
        </div>
        <br/>
        总结：列表样式就记住实心空心方形就完了
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景</title>
        <style>
            body{
                background: linear-gradient(90deg,red 0%,yellow 50%,blue 100%);
            }
            div{
                width: 800px;
                height: 500px;
                border: 1px solid red;
                background-image: url("img/photo.jpg");
                /*我这里是找了一张48x48像素的图*/
            }
            .c1{
                background-repeat: repeat-x;
            }
            .c2{
                background-repeat: repeat-y;
            }
            .c3{
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
    <div ></div>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <br/>
    总结：背景插图与渐变
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>盒子</title>
        <style>
            body,h1,h2,h3,h4,h5,h6,ul,li,div,p,span,a,img,input{
                margin: 0 auto 0 auto;
                border: 0;
                padding: 0 0 0 0 ;
                text-decoration: none;
                display: block;
                background: white;
                position: relative;
            }
            #box{
                width: 300px;
                border: 10px solid grey;
            }
            #id1{
                font-size: 20px;/*此时F12查得高为26px*/
                height: 30px;/*定个大过26px为了好控制*/
                width:200px;/*不设置的话就是300px顶满*/
                line-height: 30px;/*为了让文字Y轴居中*/
                text-align: center;/*为了让文字X轴居中*/
                background: orange;
            }
            form{
                background: yellow;
            }
            .cls1{
                font-size: 16px;/*此时F12查得高为21px*/
                height: 24px;/*定个大过21px为了好控制*/
                width: 400px;/*事实证明超出父对象不显示*/
                line-height: 24px;/*为了让文字Y轴居中*/
                text-align: left;/*为了让文字X轴居左*/
                background: yellow;
            }
            .cls2{
                font-size: 16px;/*此时F12查得高为21px*/
                height: 24px;/*定个大过21px为了好控制*/
                width: 400px;/*事实证明超出父对象也显示*/
                line-height: 24px;/*为了让文字Y轴居中*/
                text-align: left;/*为了让文字X轴居左*/
                border: 2px dashed red;/*input有边框要重设*/
                padding: 0;/*input有内边距要重设*/
                background: orange;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="id1">login</div>
            <form action="#">
                <div class="cls1">username</div>
                <input class="cls2" type="text">
                <div class="cls1">password</div>
                <input class="cls2" type="text">
                <div class="cls1">email</div>
                <input class="cls2" type="text">
            </form>
        </div>
        <br/>总结：盒子模型懂得设->外/边/内/宽/高五项即可
        <br/>其中，外/边/内在初始化时全为0，需要改再自设，但宽高必须自设
        <br/>注意：全标签初始化margin/border/padding/text-decoration
        <br/>display: block;
        <br/>margin: 0 0 0 0;
        <br/>border: 1px solid/dashed red;或直接一个0
        <br/>padding: 0 0 0 0;
        <br/>height: xpx;
        <br/>width: ypx;
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角阴影</title>
        <style>
            body,h1,h2,h3,h4,h5,h6,ul,li,div,p,span,a,img,input{
                margin: 0 auto 0 auto;/*这个使标签本身在父类盒子内居中*/
                border: 0;
                padding: 0 0 0 0 ;
                text-decoration: none;
                display: block;
                background: white;
                position: relative;
            }
            body{
                text-align: center;/*这个可以使内部无标签的文字居中*/
            }
            #box1{
                width: 100px;
                height: 100px;
                border: 0;
                margin: 0 auto 0 auto;
                padding: 0 0 0 0;
                background: red;
                border-radius: 50px 50px 10px 0px;
                box-shadow: 10px 10px 10px yellow;
            }
            #box2{
                width: 100px;
                height: 100px;
                border: 0;
                margin: 0 0 0 0;
                padding: 0 0 0 0;
                background: red;
                border-radius: 100px 0px 50px 0px;
                box-shadow: 10px 10px 10px yellow;
            }
            img{
                margin:0 auto 0 auto;
                width: 48px;
                height: 48px;
                border-radius: 24px;/*因为图是48*48*/
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <img src="img/photo.jpg">
        <br/>总结：
        <br/>border-radius四个值：左上，右上，右下，左下
        <br/>box-shadow四个值：X偏，Y偏，模糊，颜色
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>/*记住h/p/div三个块级元素，其他行内*/
            body,h1,h2,h3,h4,h5,h6,ul,li,div,p,span,a,img,input{
                margin: 0 auto 0 auto;/*这个使标签本身在父类盒子内居中*/
                border: 0;
                padding: 0 0 0 0 ;
                text-decoration: none;
                display: block;
                background: white;
                position: relative;
            }
            .c1{
                margin: 0;
                width: 100px;
                height: 200px;
                background: yellow;
                display: inline-block;
                font-size: 20px;
                text-align: center;
                line-height: 100px;
            }
            .c2{
                margin: 0;
                width: 100px;
                height: 100px;
                background: orange;
                display: inline-block;
                font-size: 20px;
                text-align: center;
                line-height: 100px;
            }
            .c1,.c2{
                vertical-align: central;
                /*top是全部height上边缘对齐*/
                /*middle是全部height中线对齐*/
                /*bottom是全部height下边缘对齐*/
                /*central是全部文字中线对齐*/
            }
            .c3{
                height: 50px;
                background: black;
            }
            .c4{
                border: 50px #FF0000 solid;
            }
            .c4::after{/*伪类防止父元素塌陷，:after亦可*/
                content: "";/*伪元素必写，否则不生效，可以设置为空*/
                clear: both;/*只会对块元素生效，所以下一行要设成块*/
                display: block;
            }
            .c5{
                height: 200px;
                width: 50px;
                background: blue;
                display: block;/*经测试没什么变化*/
                float: left;/*浮动后不再是标准文档流*/
            }
            .c6{
                height: 75px;
                width: 150px;
                background: green;
                display: inline-block;/*经测试没什么变化*/
                float: right;/*不同方向的浮动互不干涉*/
            }
            .c7{
                height: 50px;
                width: 100px;
                background: grey;
                display: inline;/*经测试没什么变化*/
                float: left;/*浮动后没有块元素效果*/
                clear: both;/*清除本行浮动效果，即有块元素换行效果*/
                /*简来来说就是说当前块要换行，但是下一行仍是浮动*/
            }
            .c8{
                height: 100px;
                width: 50px;
                background: pink;
                display: inline-block;
                float: left;/*接上一个浮动块*/
            }
            .c9{
                height: 50px;
                width: 100px;
                background: darkblue;
                float: top;/*没有清除浮动的话与左浮的互不干涉*/
            }
            .c10{
                height: 50px;
                width: 100px;
                background: darkred;
                float: top;
                clear: right;/*清除往右浮动的块*/
                /*找到右浮动的块的最下面的那块再换行*/
            }
            .c11{
                height: 50px;
                width: 100px;
                background: darkgoldenrod;
                float: top;
                clear: top;/*清除往上浮动的块*/
                /*找到上浮动的块的最下面的那块再换行*/
            }
            .c12{
                height: 50px;
                width: 100px;
                background: darkgreen;
                float: top;
                clear: both;/*清除所有方向的块*/
                /*找到所有浮动的块的最下面的那块再换行*/
            }
            .c14{
                height: 100px;
                width: 300px;
                overflow: hidden;/*隐藏的元素是不占标准模板流位置的*/
            }
            .c13{
                height: 100px;
                width: 300px;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="c1">div</div><span class="c2">span</span>
            注意上面两个元素分行写会有间隔！
        </div>
        <div class="c3"></div>
        <div class="c4">
            插入第一行！
            插入第二行！
            插入第三行！
            插入第四行！
            <div class="c5">5</div>
            插入第五行！
            <div class="c6">6</div>
            插入第六行！
            <div class="c7">7</div>
            插入第七行！
            <div class="c8">8</div>
            插入第八行！
            <div class="c9">9</div>
            插入第九行！
            <div class="c10">10</div>
            插入第十行！
            <div class="c11">11</div>
            插入第十一行！
            <div class="c12">12</div>
            插入第十二行！
            可以看到top浮的块与文字纯粹是看谁先谁后
            然后左浮和右浮的块看不出与文字的关系
            如果要文字环绕块的效果，建议只浮一个块
        </div>
        <div class="c3"></div>
        <div class="c4">
            <h1>下面测试文字环绕效果！</h1>
            提到文章，很多人都会想到他与马伊琍的婚姻，马伊琍在经营婚姻方面确实很好，她在婚后愿意在家相夫教子，这确实是非常难得的。而文章与姚笛的事情却让两人的幸福生活陷入了万丈深渊，马伊琍最终也选择与文章离婚。
            <div class="c7">7</div>
            姚笛如今过得相当低调。之前姚笛的前景还是很好的，不过她与文章的事情曝光后，两人的人设都彻底崩塌了，很多网友都唾骂他们。
            前两年姚笛在36岁生日时晒出了钻戒，并表示自己被求婚成功，后来她的求婚戒指也变成了结婚戒指。马伊琍与文章离婚之后，她就被网友们推上了热搜，即使她当时已经有了新恋情，不过网友们还是不买账，而且还疯狂炮轰她，大家都觉得有很大的责任出自她的身上。
            <div class="c7">7</div>
            之后姚笛就出来表示文章和马伊琍当时的关系原本就不好，而且他们也准备离婚了。姚笛还透露起初是文章主动找自己的，而且文章还向姚笛哭诉自己在婚姻方面过得不开心，当时文章还追求她，她拒绝了很多次文章还是没有放弃，然后才感动了她。
            <div class="c7">7</div>
            要是真的是这样的话，当时姚笛也是受害者，她的意思就是文章之前欺骗了她，她并没有破坏别人的感情，姚笛只是追求自己喜欢的人而已。最终婚姻的失败并不全是姚笛的问题，一个丈夫在自己的妻子怀二胎时出轨，男方为什么会做出这样的行为才是最应该关注的！对此，你有什么看法呢？欢迎在评论区留言！
            <h1>经测试，浮动块会与他之后的文字同一行！</h1>
            <h1>而在浮动块上面的文字一定会在块的上面！</h1>
        </div>
        <div class="c14">
            <img src="img/photo.jpg">
            <h1>121212121212121221</h1>
            <img src="img/photo.jpg">
            <h1>121212121212121221</h1>
        </div>
        <div class="c13">
            <img src="img/photo.jpg">
            <h1>121212121212121221</h1>
            <img src="img/photo.jpg">
            <h1>121212121212121221</h1>
        </div>

        <br/>总结display
        <br/>inline是行内元素，没有width与weight，不要使用！
        <br/>block是块元素，有width与weight，但是独占一行！
        <br/>inline-block是行内块元素，有width与weight且不独占一行！
        <br/>注意div默认是block，span默认是inline，这是两者唯一区别！
        <br/>总结float
        <br/>left就是靠左浮，right就是靠右浮，top就是靠上浮（c9居中是因为div设了margin:0 auto）
        <br/>注意一：不同浮动方向互不干涉
        <br/>注意二：会跳出标准模块流（所以父类元素才会塌陷）
        <br/>注意三：浮动后就不管你是block还是inline的了（非标准模板流）
        <br/>总结clear
        <br/>left就是左边没浮动块，right就是右边无浮动块，both就是左右无浮动块
        <br/>总之就是清除本块浮动效果，即换行，但是下一行仍有浮动
        <br/>总结::after或:after
        <br/>照抄即可，防止伪类防止父元素塌陷
        <br/>总结：overflow
        <br/>要么隐藏，要么滚动条
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
        <style>/*记住h/p/div三个块级元素，其他行内*/
            body,h1,h2,h3,h4,h5,h6,ul,li,div,p,span,a,img,input{
                margin: 0 auto 0 auto;/*这个使标签本身在父类盒子内居中*/
                border: 0;
                padding: 0 0 0 0 ;
                text-decoration: none;
                display: block;
                background: white;
                position: relative;
            }
            div{
                margin: 5px;
                padding: 5px;
                font-size: 10px;
                line-height: 20px;
            }
            #father{
                border: 5px solid #666;
            }
            #first{
                border: 5px solid #666;
                height: 20px;
                position: relative;
                top: -10px;
            }
            #second{
                border: 5px solid #666;
                height: 20px;
                margin: 0px 0px 0px 0px;/*因为我上面设了div都是5*/
                position: absolute;
                top: 100px;
                right: 100px;
            }
            #third{
                border: 5px solid #666;
                height: 20px;
                position: fixed;
                right: 10px;
                bottom: 10px;
            }
            #four{
                height: 100px;
                width: 100px;
                position: absolute;
                padding: 0;
                margin: 0px 0px 0px 0px;/*因为我上面设了div都是5*/
                top: 0px;
                right: 0px;
                background: #FF0000;
            }
            #five{
                width:10px;
                height: 1000px;
                border: 5px solid #666;
            }
            #six{
                margin: 0;
                border: 0;
                padding: 0;
                background: #3cbda6;
                width: 500px;
                height: 500px;
                position: relative;
            }
            #seven{
                height: 100px;
                margin: 0;
                border: 0;
                padding: 0;
                background: red;
                width: 100px;
                height: 100px;
                position: absolute;
                right: -50px;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="first">相对定位上移10像素</div>
            <div id="second">绝对定位距整个页面右边及上边100像素</div>
            <div id="third">固定定位</div>
            <div id="four">这里补一个矩形来看second是不是真的100px</div>
            <div id="five">这个是撑起页面高度让滚动条出现</div>
        </div>

        <div id="six">
            <div id="seven">
                这个绝对定位是相对于父元素的，因为父元素有定位relative
            </div>
        </div>
        <br/>总结：
        <br/>一、F12看每个块的尺寸时，外边距是不算的！
        <br/>二、父亲的内边距与儿子的外边距不共享，但兄弟间的外边距共享！
        <br/>三、相对定位仍属于标准模板流，因为父元素没有塌陷，或者说相对定位的元素的原位置被保留了
        <br/>四、绝对定位不属于标准模板流
        <br/>…………如果父对象有设置元素定位relative，由相对于父对象的上下左右距离而定（子绝父相）
        <br/>…………但如果父对象没有设置定位，则相对于整个页面来定，此时建议在BODY中单独放以免逻辑混乱
        <br/>五、固定定位不属于标准模板流，由相对于当前窗口上下左右距离而定
        <br/>六、z-index就是图层显示优先级
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>z-index</title>
        <style>
            body,h1,h2,h3,h4,h5,h6,ul,li,div,p,span,a,img,input{
                margin: 0 auto 0 auto;/*这个使标签本身在父类盒子内居中*/
                border: 0;
                padding: 0 0 0 0 ;
                text-decoration: none;
                display: block;
                background: white;
                position: relative;
            }
            .c0{
                height: 100px;
                width: 100px;
                position: relative;
            }
            .c1{
                position: absolute;
                height: 100px;
                width: 100px;
                background: #00FF00;
                z-index: 10;/*这里设成60的话就盖过文字*/
                opacity: 0.9;/*这里可以设置透明度*/
            }
            .c2{
                position: absolute;
                bottom: 30px;
                left: 0px;
                background: none;/*改成none就是透明了*/
                z-index: 30;/*这里设成10的话就下面.c3就是盖过文字*/
            }
            .c3{
                height: 20px;
                width: 20px;
                position: absolute;
                bottom: 30px;
                left: 0px;
                background: blue;
                z-index: 20;
            }
            .c4{
                position: absolute;
                bottom: 60px;
                left: 0px;
                background: none;
                z-index: 30;
            }

        </style>
    </head>
    <body>
        <div class="c0">
            <div class="c1"><img src="img/photo.jpg"></div>
            <div class="c2">这是文字</div>
            <div class="c3"></div>
            <div class="c4">跟c1图片比</div>
        </div>
        <br/>总结：就是不同元素重叠时谁显示在前谁显示在后就有z-index
        <br/>注意：一定要设置了position之后才可以使用z-index（所以我决定在初始化处加入z-index）
        <br/>总结：透明度属性opacity，范围0到1
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>em</title>
    <style>
        div {
            font-size: 40px;
            width: 10em; /* 400px */
            height: 10em;
            border: solid 1px black;
        }
        p {
            font-size: 0.5em; /* 20px */
            width: 10em; /* 200px */
            height: 10em;
            border: solid 1px red;
        }
        span {
            font-size: 0.5em; /* 10px */
            width: 10em; /* 100px */
            height: 10em;
            border: solid 1px blue;
            display: block;
        }
    </style>
</head>
<body>
<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>

</div>
<hr/>
如果显示的方块由边框宽1px所以全部块宽高会加2
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem</title>
    <style>
        html {
            font-size: 10px;
        }
        div {
            font-size: 4rem; /* 40px */
            width: 30rem;  /* 300px */
            height: 30rem;
            border: solid 1px black;
        }
        p {
            font-size: 2rem; /* 20px */
            width: 15rem; /* 150px */
            height: 15rem;
            border: solid 1px red;
        }
        span {
            font-size: 1.5rem; /* 15px */
            width: 10rem; /* 100px */
            height: 10rem;
            border: solid 1px blue;
            display: block;
        }
    </style>
</head>
<body>
<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>
<hr/>
如果显示的方块由边框宽1px所以全部块宽高会加2
</body>
</html>