css文本标签和列表

<em>和<strong>

  <em>标签用于表示一段内容中的着重点。
  <strong>标签用于表示一个内容的重要性。
  这两个标签可以单独使用，也可以一起使用。
  通常em显示为斜体，而strong显示为粗体

<i>和<b>

 <i>标签会使文字变成斜体；
 <b>标签会使文字变成粗体；
 这两个标签和em、strong类似，但是这两个标签没有语义；
 所以根据html5标准，当我们只想设置文本特殊显示，而不在需要强调内容时就可以使用i和b标签。

<small>

small标签表示细则一类的旁注，通常包括免责声明,注意事项、法律限制、版权信息等。
浏览器在显示small标签时会显示一个比父元素小的字号。

<cite>

• 使用cite标签可以指明对某内容的引用或参考。例如：戏剧、文章或图书的标题，歌曲、电影、照片或者雕塑的名称等。

  <p> 
      <cite>《论语》</cite>作者是孔子 
  </p>
  

sup和sub

• ^{标签用于上标的多少次方 例如： 10的3次方}

• _{标签用于下标签的多少次方 例如 : H2O}

    <p>10<sup>3</sup></p>   
                                              
    <p>H<sub>2</sub>O</p> 
  

<blockquote>和<q>

• blockquote>和<q>
  blockquote和q表示标记引用的文本。

• blockquote用于长引用，q用于短引用。

• 在两个标签中还可以使用cte属性来表示引用的地址。

<ins>和<del>

• ins表示插入的内容，显示时通常会加上下划线；
• del表示删除的内容，显示时通常会加上删除线。

<code>和<pre>

• 如果你的内容包含代码示例或文件名，就可以使用code元素。
• pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码

有序列表

• 使用ol和li来创建一个有序列表。

无序列表

• 使用ul和li创建一个无序列表

定义列表

• 使用dl dd dt来创建一个定义列表

盒子模型

• 一个盒子我们会分成几个部分：

内边区(content)
内边距(padding)
边框(border)
外边距(margin)

内容区

• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。
• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
• 通过width和height两个属性可以设置内容区的大小。
• width和height属性只适用于块元素。

内边距

• 内边距指的是元素内容区与边框以内的空间。
• 默认情况下width和height不包含padding的大小。
• 使用padding属性来设置元素的内边距
• padding:10px 20px 30px 40px
  设置元素的上、右、下、左四个方向的内边距。
• padding:10px 20px 30px;
  设置元素的上、左右、下四个方向的内边距。
• padding:10px 20px;
  设置元素的上下、左右四个方向的内边距。
• padding:10px
  设置元素上下左右四个方向的内边距。
• 同时在css中还提供了padding-top、padding-right、padding-left、padding-bottom分别用来指定四个方向的内边距。

 .box1{
        width: 200px;
        height: 200px;
        background-color: red;
        /*设置边框*/
        border: 10px black solid;
        padding: 100px 100px 100px 100px;
    }
    /*创建一个子元素box2占满box1*/
    .box2{
        width: 100%;
        height: 80%;
        background-color: yellow;
    }

边框

• 可以在元素周围创建边框，边框是元素可见框的最外部。
• 可以使用border属性来设置盒子的边框。
• 和padding一样，默认width和height并包括边框的高度。
• border：1px red solid
  分别指定了边框的宽度、颜色、样式。
• 使用border-top/left/right/bottom分别指定上左右下四个边框的方向。

.box{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border:10px red solid;
}

边框的多种样式

• --none 没有边框
• --dotted 点线
• --dashed 虚线
• --solid 实线
• --double 双线
• --groove 槽线
• --ridge 脊线
• --inset 凹边
• --outset 凸边

外边距

• 外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距。
• 使用margin-top/right/left/bottom为元素设置四个方向。
• 使用margin：0 auto 可以使元素居中。

.box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px solid red;
        margin:10px 20px 30px 40px;
 }
.box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
 }

margin:0 auto;