1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         .test1{
    8.             width: 150px;
    9.             height: 100px;
    10.             background: skyblue;
    11.             margin: 50px;
    12.             padding: 50px;
    13.             box-sizing: content-box;
    14.         }
    15.     </style>
    16. </head>
    17. <body>
    18. <!--盒子模型    1.所有元素都可以有宽高    2.所有元素都是一个矩形    3.所有元素都可以当成一个盒子     4.盒子包括：外边距 边框 内边距 元素内容
    19.     5.外边距   margin-方向: 值;
    20.         外边距的方向top  bottom  left  right
    21.         外边距的尺寸(值)   尺寸单位
    22.         当四个方向的外边距都设置时
    23.             四个值：代表上右下左
    24.             三个值：代表上 左右 下
    25.             二个值：代表上下 左右
    26.             一个值：代表上右下左
    27.      6.外边距上下排列时，上下外边距会合并(上下外边距取最大值)
    28.      7.外边距左右排列时，左右外边距会叠加(左右外边距会相加)
    29.      8.行级元素只有左右外边距，没有上下外边距
    30.      8.块级元素和行内块级元素的外边距4个方向都有效
    32.      9.内边距 margin-方向: 值;
    33.          内边距的方向top  bottom  left  right
    34.          内边距的尺寸(值)   尺寸单位
    35.          当四个方向的内边距都设置时
    36.             四个值：代表上右下左
    37.             三个值：代表上 左右 下
    38.             二个值：代表上下 左右
    39.             一个值：代表上右下左
    40.      10.正常情况下，内边距和边框是在元素设置的宽度和高度之上进行绘制的
    41.      11.box-sizing: 值;
    42.         content-box 默认值     内边距和边框是在元素设置的宽度和高度之上进行绘制的
    43.         border-box            内边距和边框是在元素设置的宽度和高度之内进行绘制的
    44.      12.设置的宽度=左边框+右边框+左内边距+右内边距+元素内容高度
    45.      13.设置的高度=上边框+下边框+上内边距+下内边距+元素内容高度
    46. -->
    47.     <div style="background: gray;height: 50px"></div>
    48.     <div class="test1">王者荣耀</div>
    49.     <div style="background: red;height: 50px"></div>
    50. </body>
    51. </html>
    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         div{
    8.             width: 400px;
    9.             height:200px;
    10.             background: skyblue;
    11.             border:2px solid red;
    12.             overflow: hidden;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17. <!--溢出隐藏    overflow: 值;
    18.     overflow属性规定内容溢出了元素框时发生的事情
    19.         1.visible 内容不会被修剪，会显示在元素框之外，默认值
    20.         2.hidden  内容会被修剪，溢出的内容不可见
    21.         3.scroll  内容会被修剪，会显示滚动条，以便溢出的部分可见
    22.         4.auto    当内容大于元素框时，内容会被修剪，显示滚动条，以便查看溢出的内容
    23.                   当内容小于元素框时，内容不会被修剪
    24. -->
    25.     <div></div>
    26. </body>
    27. </html>
    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         body{
    8.             text-align: center;
    9.         }
    10.         p{
    11.             width: 300px;
    12.             background: skyblue;
    13.             margin: 0 auto;
    14.             text-align: center;
    15.         }
    16.         span{
    17.             background: skyblue;
    18.             margin: 0 auto;
    19.             text-align: center;
    20.         }
    21.         *{
    22.             margin: 0;
    23.             padding: 0;
    24.         }
    25.     </style>
    26. </head>
    27. <body>
    28. <!--元素居中
    29.     margin: 0 auto;只对块级元素有效
    30.     如果行级元素需要水平居中，需要在父级声明
    32.     样式重置
    33.         *{margin: 0;padding: 0;}
    34. -->
    35.     <p>块级元素居中及样式重置</p>
    36.     <span>行级元素居中</span>
    37. </body>
    38. </html>