2017/5/10 freeCodeCamp html + css 部分总结（三）

三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)

<style>
    .injected-text {
      margin-bottom: -25px;
      text-align: center;
    }

    .box {
      border-style: solid;
      border-color: black;
      border-width: 5px;
      text-align: center;
    }

    .yellow-box {
      background-color: yellow;
      padding: 20px 40px 20px 40px;   <!--顺时针 上右下左-->
    }

  

    .red-box {
      background-color: red;
      margin: 20px 40px 20px 40px;
    }

    .green-box {
      background-color: green;
      padding: 40px 20px 20px 40px;
    }

    body {                                      <!--body对background的修改-->
      background-color: black;
    }

</style>

优先级：body<class 前<class 后<id<行内样式

color: pink !important;确保不会被覆盖

<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

 

表示颜色       

 

<style>
    body {
      background-color: #000000;          <!--16进制 hex code RGB各两位 也可缩写为三位-->

      background-color:  rgb(0, 0, 0);    <!--0-255 RGB各一位-->
    }
</style>