1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 100px;
    9.             height: 20px;
    10.             background-color: deepskyblue;
    11.         }
    12.         span{
    13.             background-color: deeppink;
    14.         }
    15.     </style>
    16. </head>
    17. <body>
    18.     <!--
    19.         块级元素：
    20.             可以设置宽高，不可以和其他元素共占一行
    21.             当块级元素没有设置宽高时，宽度会和父级宽度一样，高度由元素内容决定
    22.         行级元素：   不可以设置宽高，可以和其他元素共占一行
    23.             行级元素的宽高由元素内容确定
    24.         行内块级元素：可以设置宽高，可以和其他元素共占一行
    25.             宽高由元素内容决定
    26.     -->
    27.     <div>我是DIV</div>
    28.     <span>我是span</span>
    29.     <img src="images/bg.jpg">
    30. </body>
    31. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         a{
    8.             background: gray;
    9.             display: block;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <!--display: ;
    15.         block：       转换为块级元素
    16.         inline：      转换为行级元素
    17.         inline-block：转换为行内块级元素
    18.     -->
    19.     <a href="https://www.baidu.com">点我跳转</a>
    20. </body>
    21. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 200px;
    9.             height: 80px;
    10.             background-color: skyblue;
    11.         }
    12.         span{
    13.             display: none;
    14.             background-color: red;
    15.         }
    16.     </style>
    17. </head>
    18. <body>
    19.     <!--display: none;
    20.         none：表示元素不显示，所占的区域也会被隐藏
    21.     -->
    22.     <div>我是div</div>
    23.     <span>我是span</span>
    24. </body>
    25. </html>
    1. 是以自身字体大小作为参考，是自身字体的倍数，自身字体大小改变时，em会跟着改变
    1. 1rem = 16px
    2. 以html根元素为参考
    1. 是以父级元素为参考，是父级的百分比