CSS基础样式

咩Kakao

于 2022-08-20 01:19:18 发布

阅读量369

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52142992/article/details/126421192

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（1）盒子的隐藏和显示

1、display的取值

block：块级，显示
inline：行内，显示
inline-block：行内块，显示
none：隐藏
flex：弹性盒子，显示（单独介绍）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给所有p标签设置为200px宽, 50px高,灰色边框 */
         p{
            width: 200px;
            height: 50px;
            border: 1px solid gray;
        }
      
        /* 第一个p标签设置为块级 */
        .box p:first-child{
            display: block;
        }
        /* 第二个p标签设置为行内 */
        .box p:nth-child(2){
            display: inline;
        }
        /* 第三和第四个标签设置为行内块级标签 */
        .box .item{
            display: inline-block;
        }
        /* 第五个p标签设置为隐藏 */
        .box p:last-child{
            display: none;
        }
      </style>
</head>
<body>     
      <div class="box">
        <p>我爱web1</p>
        <p>我爱web2</p> <br>
        <p class="item">我爱web3</p>
        <p class="item">我爱web4</p>
        <p>我爱web5</p>
      </div>
</body>
</html>

2、visibility的取值

visible：可见，默认
hidden：不可见
当visibility的值为hidden时，元素仍然占位，只是不可见了，并不是消失了；而display为none时，才是隐藏不占位了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将所有div元素高度设置为50px */
        /* 将class="aa"的元素设置为隐藏-visibility */
        /* 将class="bb"的元素设置为隐藏-display */
        
        div {
            height: 50px;
        }
        .aa {
            /* 位置还会继续保留 */
            visibility: hidden;
        }
        .bb {
            display: none;
        }
        
    </style>    
</head>
<body>
    <div class="aa">aaaa</div>
    <div>我爱web</div>
    <hr>
    <div class="bb">bbbb</div>
    <div>我爱web</div>
</body>
</html>

3、消除行内块级元素之间的空隙

使用margin负值
父元素设置font-size为0, 子元素重新设置font-size的值
将父元素设置为弹性盒子 display:flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 50px;
            border: 1px solid gray;
        }
        .box p.item{
            display: inline-block;
        }
        /* 第一种方法：将父元素的font-size设为0，元素字体改回 */
        /* .box{
            font-size: 0;
        }
        .box p{
            font-size: 20px;
        } */

        /* 第二种方法：使用margin，给第二个盒子向左的负值 */
        /* .box .item:nth-child(2){
            margin-left: -5px;
        } */

        /* 第三种方法：使用display,给父元素设置弹性盒子 */
        .box{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="item">我爱web1</p>
        <p class="item">我爱web2</p>
     </div>
</body>
</html>

（2）宽高

1、px

2、%：相对于父元素

3、vw、vh：相对于整个网页，也就是html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 所有p标签添加红色边框 */
        p{
            border: 1px solid red;
        }

        /* 第一个p标签设置为300px宽, 100px高 */
        p:nth-child(1){
            width: 300px;
            height: 100px;
        }

        /* 第二个p标签设置为50%宽, 100px高 */
        p:nth-child(2){
            width: 50%;
            height: 100px;
        }
    
        /* 第三个p标签设置为50vw宽, 10vh高 */
        p:nth-child(3){
            width: 50vw;
            height: 10vh;
        }

      </style>
</head>
<body>
    <!--
    	px
        百分比:相对于父元素，这里也就是body
        vw和vh：相对于整个网页，也就是html
    -->
    <p>px</p>
    <p>百分比</p>
    <p>vw和vh</p>
</body>
</html>

4、calc()函数

当需要除一个元素以外的所有高度都设置另外的颜色时，可以使用calc函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        margin: 0;
        padding: 0;
    }
    /* 设置整个页面的高为100% */
     html,body{
        height: 100%;
    }
    nav{
        background-color: #fff;
        height: 50px;
    }
    main{
        color: #fff;
        background-color: #000;
        /* 将整个页面的高度减去使用了的页面高度，剩下的页面就是所求页面高度 */
        height: calc(100% - 50px);
    }
   </style>
</head>
<body>
    <nav></nav>
    <main>111</main>
</body>
</html>

5、rem

6、em

（3）字体

1、字体

font-family
可设置单个或多个字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
          font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }
 
        p:nth-child(1) {
         font-family: Sans-serif;
        }
        p:nth-child(2) {
         font-family: Monospace;
        }
        p:nth-child(3) {
         font-family: Cursive;
        }
     </style>
</head>
<body>
    <div> 生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。 </div>
       <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
       <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
       <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
</body>

2、字号

font-size

3、字体大小、粗细

font-weight：
bold 加粗
normal 正常大小
100~900 数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
          width: 800px; 
          border: 1px solid; 
          font-size: 20px;
        }
    
        /* 给.box的9个p元素的font-weight分别设为100~900 */
        p:nth-child(1){
            font-weight: 100;
        }
        p:nth-child(2){
            font-weight: 200;
        }
        p:nth-child(3){
            font-weight: 300;
        }
        p:nth-child(4){
            font-weight: 400;
        }
        p:nth-child(5){
            font-weight: 500;
        }
        p:nth-child(6){
            font-weight: 600;
        }
        p:nth-child(7){
            font-weight: 700;
        }
        p:nth-child(8){
            font-weight: 800;
        }
        p:nth-child(9){
            font-weight: 900;
        }

        /* 给.box的p加粗 */
        .box2 p {
          /* 字体粗细 */
          font-weight: bold;
        }
      </style>
</head>
<body>
    <div class="box">
        <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>4.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>5.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>6.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>7.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>8.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
        <p>9.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
      </div>
    
      <div class="box2">
        <p>生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
      </div>
      
</body>
</html>

4、字体颜色

color:
英文单词
十六进制
rgb
rgba
transparent：透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 英文单词 */
        p:nth-child(1){
            color: aqua;
        }
        /* 十六进制,白色, 黑色, 灰色, 红色 */
        p:nth-child(2){
            /* color: #fff;
            color: #000;
            color: #999; */
            color: #ff0000;
        }
        /* rgb */
        p:nth-child(3){
            color: rgb(31, 143, 31);
        }
        /* rgba */
        p:nth-child(4){
            color: rgba(24, 24, 209, 0.5);
        }
        /* 透明色 */
       p:nth-child(5){
        border: 1px solid salmon;
        /* transparent：透明色 */
        border-bottom: transparent;
       }
      </style>
</head>
<body>
    <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>4.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>5.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
</body>
</html>

5、文本对齐

text-align:
center 居中
left 左对齐
right 右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 500px;
            border: 1px solid;
            height: 50px;
        }
        /* 第一行居中对齐 */
        p:nth-child(1){
            text-align: center;
        }
        /* 第二行左对齐 */
        p:nth-child(2){
            text-align: left;
        }
        /* 第三行右对齐 */
        p:nth-child(3){
            text-align: right;
        }
      </style>
</head>
<body>
      <p>1.生如蝼蚁, 当立鸿鹄之志</p>
      <p>2.生如蝼蚁, 当立鸿鹄之志</p>
      <p>3.生如蝼蚁, 当立鸿鹄之志</p>
</body>
</html>

5.1、行内元素居中

以下span元素会成显示在一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid salmon;
            height: 100px;
            text-align: center;
        }
        span{
            color: #fff;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>span</span>
        <span>span</span>
        <span>span</span>
        <span>span</span>
        <span>span</span>
</body>
</html>

6、文本的行高

line-height:
line-height 取值为数值
line-height 取值为倍数
当文字只有一行, line-height = 元素高度时, 文本垂直居中
行高可继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            border: 1px solid;
            height: 100px;
        }
           
        /* 行高为px */
        p:nth-child(1){
            line-height: 30px;
        }

        /* 行高为倍数 */
        p:nth-child(2){
            line-height: 1.2;
        }

        /* 单行文本垂直居中, 单行 */
        p:nth-child(3){
            line-height: 100px;
        }
    </style>
</head>
<body>
    <p>1.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
    <p>2.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
    <p>3.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
</body>
</html>

6.1、行高的继承

当父元素设置了行高，则其下的子元素会继承它的行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            line-height: 1;
        }
    </style>
</head>
<body>
    <div>1.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</div>
    <div>2.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</div>
    <div>3.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</div>
</body>
</html>

6.2、字体大小与实际高度的高度不符

样式重置为什么line-height要设为1？
因为默认情况下, 字体上下会有空白, 整个元素的高度会变大, 导致量尺寸的时候会有偏差, line-height设为1后, 就可以消除这种偏差

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	  div {
	      font-size: 20px;
	      line-height: 1;
	  }
	</style>
</head>
<body>
	<div>哈哈哈哈哈哈哈哈哈哈</div>
</body>
</html>

（4）背景

1、background

颜色背景:颜色值;
颜色背景的两种写法：background: 颜色值;或background-color: 颜色值;
图片背景：url();
图片背景的两种写法：background: url();或background-image: url();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 100px;
            background: gray;
        }
        .box1{
            margin-top: 10px;
            height: 200px;
            background-color: gray;
        }
        .box2{
        	background: url(../img/picture.png);
        }
        .box3{
        	background-image: url(../img/picture.png);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

2、背景图片重复

background-repeat:
repeat 重复（默认）
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 自动刷新 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
          width: 200px;
          border: 1px solid;
          height: 200px;
          background: url(../img/chrome.png);
        }
     
        /* 默认横向重复, 纵向重复 */
        p:nth-child(1){
            background-repeat: repeat;
        }
        /* 不重复 */
        p:nth-child(2){
            background-repeat: no-repeat;
        }
        /* 横向重复 */
        p:nth-child(3){
            background-repeat: repeat-x;
        }
        /* 纵向重复 */
        p:nth-child(4){
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>   
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>

3、背景图片大小

background-size:
contain：保持宽高比例, 长边拉伸至最大
cover：保持宽高比例, 短边拉伸至最大, 长边会被截掉一部分
xx% xx%; 不保持宽高比例, 可以设置任意数值或者百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
          width: 600px;
          border: 1px solid;
          height: 400px;
          background: url(../img/picture.png)no-repeat;
        }
        
        /* contain；保持宽高比例, 长边拉伸至最大。 */
        p:nth-child(2){
            background-size: contain;
        }
        /* cover；保持宽高比例, 短边拉伸至最大, 长边会被截掉一部分 */
        p:nth-child(3){
            background-size: cover;
        }
        /* (X Y)或者(xx% xx%) 不保持宽高比例, 可以设置任意数值或者百分比 */
        p:nth-child(4){
            background-size: 20% 20%;
        }
      </style>
</head>
<body>   
      <p></p>
      <p></p>
      <p></p>
      <p></p>
</body>
</html>

4、背景图片位置

background-position:
使用px
使用百分比
使用定位单词,两个选项：水平方向和垂直方向
使用定位单词, 只有一个选项：默认水平方向与所设定的值一致，而垂直方向默认居中（如：background-position-x: right;background-position-y: center;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
          height: 100px;
          width: 200px;
          border: 1px solid;
          /* background-image: url(../img/chrome.png); */
          background-image: url(../img/chrome.png);
          background-repeat: no-repeat; 
        }
       p:nth-child(1) {
          background-position: 10px 10px;
        }
      
       p:nth-child(2) {
          background-position: 20% 20%;
        }
    
       p:nth-child(3) {
          background-position: center center;
        }
      
       p:nth-child(4) {
           background-position: right; 
        }
      </style>
</head>
<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>

5、背景合并写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
          width: 400px;
          border: 1px solid;
          height: 200px;
          /* 背景图片设置为不重复,位置放在右下角 */
          background: url(../img/chrome.png)no-repeat right bottom;
        }
      </style>
</head>
<body>
      <p></p> 
</body>
</html>

（5）边框

1、边框设置

border:边框大小边框样式边框颜色;
border:none;（无边框）
border-top:边框大小边框样式边框颜色; （上边框）
border-bottom:边框大小边框样式边框颜色; （下边框）
border-left:边框大小边框样式边框颜色;（左边框）
border-right:边框大小边框样式边框颜色;（右边框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            height: 100px;
            width: 100px;
           
        }
        P:nth-child(1) {
            border: 1px solid red;
        }
        p:nth-child(2) {
            border-top: 1px solid;
            border-bottom: 1px solid;
        }
    </style>
</head>
<body>
    <p></p>
    <p></p>
</body>
</html>

2、圆角

border-radius
使用border-radius设置元素的圆角, 取值可以使用px或者百分比
当border-radius的值为50%的时候, 元素是个圆(前提是元素宽高相等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            height: 100px;
            width: 100px;
           border: 1px solid;
        }
         /* 圆角设为10px */
        p:nth-child(1){
            border-radius: 10px;
        }
         /* 圆角设为50% */
         p:nth-child(2){
            border-radius: 50%;
        }
      
    </style>
</head>
<body>
    <p></p>
    <p></p>
</body>
</html>

2.1、三角形

宽高设为0
边框设为20px(根据需要)
除底部边框外, 其它边框设为透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            /* border: 1px solid lawngreen; */
            display: flex;       
        }
        .trigon1{
            height: 0px;
            width: 0px;
            border: 50px solid blueviolet;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            margin-left: 50px;
            margin-top: 100px;

        }
        .trigon2{
            height: 0px;
            width: 0px;
            border: 50px solid gold;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            margin-left: -100px;
            margin-top: 200px;
        }
        .trigon3{
            height: 0px;
            width: 0px;
            border: 50px solid salmon;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
            margin-top: 100px;
        }
        .trigon4{
            height: 0px;
            width: 0px;
            border: 50px solid palegreen;
            border-right-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
            margin-top: 200px;
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <!-- 用css编写两个三角形, 一个尖角朝左的三角形和一个尖角朝右的三角形 -->
    <div class="box">
        <p class="trigon1"></p>
        <p class="trigon2"></p>
        <p class="trigon3"></p>
        <p class="trigon4"></p>
    </div>
</body>
</html>

3、CSS3新增-边框图片

border-image
Old Firefox：-moz-border-image
Safari and Chrome：-webkit-border-image
Opera：-o-border-image

（6）内边距和外边距

1、padding

padding样式来设置元素边缘跟元素内容之间的空白

padding
padding-top
padding-bottom
padding-left
padding-right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            border: 1px solid;
        }

        p:nth-child(1) {
            /* 分开写 */
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
            
        }

        /* 合并写法: 1个选项 */
        p:nth-child(2) {
          padding: 10px;
        }

        /*  合并写法: 4个选项上-右-下-左(顺时针) */
        p:nth-child(3) {
            padding: 10px 15px 20px 25px;
        }
         /*  合并写法: 3个选项上-左右-下 */
         p:nth-child(4) {
            padding: 10px 20px 10px;
        }
         /*  合并写法: 2个选项上下-左右 */
         p:nth-child(5) {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <p>
        1.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        2.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        3.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        4.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        5.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p> 
</body>
</html>

2、margin

当前元素与包含它的元素之间的距离

margin
margin-top
margin-bottom
margin-left
margin-right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            border: 1px solid;
        }

        p:nth-child(1) {
            /* 分开写 */
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            
        }

        /* 合并写法: 1个选项 */
        p:nth-child(2) {
          margin: 10px;
        }

        /*  合并写法: 4个选项上-右-下-左(顺时针) */
        p:nth-child(3) {
            margin: 10px 15px 20px 25px;
        }
         /*  合并写法: 3个选项上-左右-下 */
         p:nth-child(4) {
            margin: 10px 20px 10px;
        }
         /*  合并写法: 2个选项上下-左右 */
         p:nth-child(5) {
            margin: 10px 20px;
        }
    </style>
</head>
<body>
    <p>
        1.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        2.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        3.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        4.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        5.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p> 
</body>
</html>

2.1、外边距塌陷

塌陷现象
当我们给子元素设置margin-top的时候, 子元素与父元素并没有产生距离, 但是父元素往下"掉"了, 这种现象我们称之为margin-top塌陷, 原因是因为父元素和子元素在margin-top上进行了合并, 合并后的margin-top只作用于父元素上。
解决的办法：
给父元素添加边框
给父元素添加padding-top
给父元素添加overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aa {
            margin-top: 10px;
            width: 300px;
            height: 300px;
            background-color: gray;  
            /* border: 1px solid; */
            /* padding-top: 10px; */
            overflow: auto;
        }
        .aa .bb {
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
 	<div class="aa">
        <div class="bb"></div>
    </div>
</body>
</html>

2.2、元素居中

使用margin: 0 auto; 可以使块级元素在它的父元素内居中对齐
对于行内元素, 使用对它的父元素使用 text-align: center; 进行居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
         width: 300px;
         height: 100px;
         border: 1px solid;
         margin: 50px auto;
        }
      </style>
</head>
<body>
    <p>
        生活总是两难，再多执着，再多不肯，最终不得不学会接受。从哭着控诉，到笑着对待，到头来，不过是一场随遇而安。
    </p>
</body>
</html>

2.3、行内或行内块元素居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
     .aa {
       width: 300px;
       height: 300px;
       border: 1px solid;  
       text-align: center;
     } 
    </style>
  </head>
  <body>
    <div class="aa"> 
      <span class="bb">我爱web</span>
    </div>
  </body>
</html>

2.4、外边距合并

两个元素的margin进行合并的时候不是简单的相加
规则: 正正取最大，负负取最负，正负就相加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
          width: 200px;
          height: 200px;
          border: 5px solid;
        }
  
        .box1 {
          margin-bottom: 20px; 
        }
    
        .box2 {
          margin-top: 30px;
        }
      </style>
</head>
<body>
    <div class="box1"> </div>
    <div class="box2"> </div>
</body> 
</html>

（8）固定定位

1、position:fixed;

使用top bottom left right四个属性的时候，前提必须要有定位样式（如绝对：abslute，相对relative，固定fixed）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: #fff;
        }
        .top{
            width: 100%;
            height: 50px;
            background-color: cyan;
            position: fixed;
            top: t;
        }
        .left{
            margin-top: 50px;
            height: 100px;
            width: 100px;
            background-color: purple;
            position: fixed;
            left: 0;
        }
        .right{
            margin-top: 50px;
            height: 50px;
            width: 50px;
            background-color: green;
            position: fixed;
            right: 0;
        }
        .bottom{
            height: 50px;
            position: fixed;
            width: 100%;
            background-color: blue;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="top">固定在顶端</div>
    <div class="left">固定在左边</div>
    <div class="right">固定在右边</div>
    <div class="bottom">固定在底部</div>
</body>
</html>

2、固定定位导致的元素塌陷现象

文档流是什么?
一般情况下, 盒子像流水一样, 从左到右填充, 然后从上到下填充。
而元素设置为固定定位之后, 元素会脱离文档流，跟在它后面的元素，会“陷进去”。

所以固定位置也会有塌陷现象，元素变成行内块，脱离文档流。
这个时候有两种方法：
1. top: 100px;
2. 使用一个div代替，去撑开它的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0;}
       /* 将导航栏设置为固定定位, 宽300px, 高50px;离顶部距离0px, 背景绿色 */
        nav{
            position: fixed;
            width: 300px;
            height: 50px;
            background-color: green;
            top: 100px;

        }
        /* 将div设置为宽400px, 高100px, 背景灰色 */
        .box1{
            width: 400px;
            height: 100px;
            background-color: gray;
        }
       
      </style>
</head>
<body>
    <nav>导航栏</nav>
    <div class="box1">hello web前端</div>
</body>
</html>

3、固定定位元素的位置之争

两个元素都设置了固定定位, 并且重叠在了一起, 使用z-index来改变元素顺序，值越大越在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aa{
            position: fixed;
            height: 100px;
            width: 100px;
            background-color: blueviolet;
            z-index: 2;
        }
        .bb{
            position: fixed;
            height: 100px;
            width: 100px;
            background-color: goldenrod;
            left: 20px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="aa"></div>
    <div class="bb"></div>
</body>
</html>

4、固定定位的应用

4.1、顶部导航栏和底部导航栏

顶部导航栏：设置固定样式position:fixed;然后固定在顶部top:0;
底部导航栏：设置固定样式position:fixed;然后固定在底部bottom:0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        header{
            height: 50px;
            width: 100%;
            background-color: brown;
            position: fixed;
            top: 0;
        }
        footer{
            height: 50px;
            width: 100%;
            background-color: blueviolet;
            position: fixed;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header></header>
    <footer></footer>
</body>
</html>

4.2、半透明遮罩层

使用固定定位position:fixed;然后网页四边的像素都为零，可以看做是反向选定，这样就是整个网页页面，最后在设置它的透明色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        p{
            background-color: yellowgreen;
            color: #fff;
        }
    </style>
</head>
<body>
    <div></div>
    <p>xxxxxxxx</p>
    <p>xxxxxxxx</p>
    <p>xxxxxxxx</p>
</body>
</html>

4.3、屏幕正中的对话框

设置为固定定位
top:50%, left: 50%;
margin-left: 元素宽度一半(取负数), margin-top: 元素高度一半(取负数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 200px;
            width: 150px;
            background-color: greenyellow;
        }
        .pop{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .dialog{
            width: 200px;
            height: 100px;
            position: fixed;
            background-color: #fff;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -25px;
        }
    </style>
</head>
<body>
    <div class="box">
        设置为固定定位<br>
        top:50%, left: 50%;<br>
        margin-left: 元素宽度一半(取负数),  margin-top: 元素高度一半(取负数)
    </div>
    <div class="pop"></div>
    <div class="dialog"></div>
</body>
</html>

（9）相对和绝对定位

绝对定位元素特征
给元素设置为绝对定位之后, 元素拥有和固定定位类似的特征:

    + 元素变成"行内块级"
    + 脱离文档流, 跟在其后面的元素会"陷进去"
    + 也可以使用z-index来调整元素的叠放顺序

定位子元素在父元素中的位置
可以使用相对定位和绝对定位把子元素放置到父元素的任意一个位置, 步骤：
```
    + 把父元素设置为相对定位
    + 把子元素设置为绝对定位
    + 设置子元素在父元素中的位置*
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对绝对成双对</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .rel{
            position: relative;
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
        }
        .abs{
            position: absolute;
            height: 50px;
            width: 50px;
            bottom: 0;
            right: 0;
            background-color: blueviolet;
        }
        /* 也可以将子元素定位到父元素外面去，如购物车上的标识： */
        .rel-one{
            position: relative;
            height: 50px;
            width: 50px;
            background-color: red;
            left: 500px;
            color: #fff;
        }
        .abs-one{
            position: absolute;
            height: 20px;
            width: 20px;
            background-color: #000;
            top: -5px;
            right: -5px;
        }
    </style>
    <!-- 注意：相对位置设置在父元素中，二绝对位置设置在子元素中（父绝子相） -->
</head>
<body>
    <div class="rel">父元素
        <div class="abs">子元素</div>
    </div>
    
    <!-- 也可以将子元素定位到父元素外面去，如购物车上的标识： -->
    <div class="rel-one">父
        <div class="abs-one">子</div>
    </div>
</body>
</html>

（10）元素内容溢出

当元素里的内容大于元素的宽度或者高度的时候, 内容就会溢出, 我们使用overflow(overflow-x, overflow-y)样式来处理溢出, 它的取值
- hidden 隐藏
- scroll 滚动
- auto 自动

注: 当内容是没有空格的字母时, 不会自动换行, 比如 ppppppppppp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 150px;
            height: 50px;
            border: 1px solid red;
        }
        p:nth-child(1) {
           /*溢出隐藏*/
           overflow: hidden;
        }
        p:nth-child(2) {
           /*水平方向溢出用滚动条*/
           overflow-x: scroll;
        }
        p:nth-child(3) {
           /*垂直方向溢出用滚动条*/
           overflow: scroll;
        }
        p:nth-child(4) {
           /*垂直方向溢出用滚动条*/
            overflow-y: auto;
        }
        p:nth-child(5) {
           /*垂直方向溢出用滚动条*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <!-- hidden 隐藏 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
    <!-- scroll 水平滚动条 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
    <!-- scroll 没有溢出时,同样会有滚动条的'轨道'' -->
    <p> ppppppppppppp</p> 
    <!-- scroll 垂直方向滚动条 -->
    <p>pppppppppppppp ppppppppppppp ppppppppppppp ppppppppppppppp</p>
    <!-- auto 自动 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
     <!-- auto 不溢出时没有滚动条 -->
    <p> ppppppppppp </p>
</body>
</html>

文本溢出用省略号显示
- 多行文本溢出
- 单行文本溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
          width: 300px;
          border: 1px solid;
          line-height: 20px;
          height: 40px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
         
        }
      </style>
</head>
<body>
    <p>
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 300px;
            border: 1px solid;
            line-height: 20px;
            height: 30px;
        /*内容溢出隐藏*/
            overflow: hidden;
        /*遇到空白怎么处理:不换行*/
            white-space: nowrap;
        /*文字溢出设置*/   
            text-overflow: ellipsis;
        }
      </style>
</head>
<body>
    <p>
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
    </p>
</body>
</html>

（11）盒子模型

什么是盒模型, 盒模型包含哪些东西
一个元素尝尝包含以下这几部分内容, 这几部分内容就组成了一个盒子模型:
```
  width(height)
  padding
  border
  margin
```

一个盒子所占空间尺寸为:

  总宽度：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

上面例子的元素所占空间总宽度为: 202 + 102 + 202 + 100 = 200*

盒子的总宽度为: 160(不算margin)

盒模型的两种类型(模式)有什么区别：
w3c标准模型(默认), 盒子宽度(高度)的计算公式为:
```
 盒子的总宽度 = border-left + padding-left + width + padding-right + border-right (边框+padding+width)
```
IE盒模型(怪异盒模型)：盒子的总宽度 = width
两种盒模型的区别(主要是盒子宽度计算方式不一样):

标准盒模型: 给元素添加border和padding, 盒子会"变"大
怪异盒模型: 给元素添加border和padding, 盒子不会"变大"
box-sizing修改盒模型的类型
什么是盒模型, 盒模型包含哪些东西？盒模型的两种类型有什么区别？
box-sizing修改盒模型的类型
box-sizing: content-box w3c标准盒模型(默认)
box-sizing: border-box 怪异盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .b1{
            width: 50%;
            height: 500px;
            display: flex;
            flex-direction: column;
        }
        .b2{
            width: 50%;
            height: 500px;
            display: flex;
            flex-direction: column;
        }
        .b1,.p1{
            float: left;
        }
        .b2,.p2{
            float: right;
        }
        .box1{
            float: left;
            height: 100px;
            width: 100px;
            border: 10px solid salmon;
            margin: 10px;
            padding: 10px;
            /* 标准模型 */
            box-sizing: content-box;
        }
        .box2{
            float: right;
            width: 100px;
            height: 100px;
            border: 10px solid sandybrown;
            margin: 10px;
            padding: 10px;
            /* IE模型 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <p>w3c标准盒模型和怪异(IE)盒模型</p>
    <div class="b1">
    <p class="p1">
        1. W3C标准盒模型(默认): <br>
        padding和border都会撑开盒子，改变盒子的宽度高度<br>
        总宽度：width + 左右border宽度 + 左右padding宽度 + 左右margin宽度<br>
        内盒宽度：width + 左右border宽度 + 左右padding宽度
    </p>
    <div class="box1"></div>
    </div>

    <div class="b2">
        <p class="p2">
            IE盒模型: <br>
            padding和border都不会撑开盒子，不会改变盒子的宽度，盒子的内容会相应缩小<br>
            总宽度：width + 左右margin宽度<br>
            内盒宽度： width
        </p>
        <div class="box2"></div>
    </div>
    
</body>
</html>