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;
