块状元素

Posted 2020-12-23 cuishuangshuang

块状元素的特点

（1）独占一行

（2）标签宽度与父标签宽度相同

（3）标签可以设置width、height、padding、border、margin样式，都可以生效

（4）块级元素有：html、body、header、h1-h6、div、p、nav、ul、ol、main、footer、dl、dt、dd

1、div

　双标签、块状元素、将页面分成各个区块

　没有语义

2、p

　双标签、块状元素、一般用在网页文章中的段落上或者用在网页中某一段很长的句子上

　语义：段落标签

　默认样式margin：16px  0；

3、header

　双标签、块状元素、、一般用来包裹网页的头部内容

　语义：表示网页头部内容

4、main

　双标签、块状元素、一般用来包裹网页的主体内容

　语义：表示网页主体内容

5、footer

　双标签、块状元素、一般用来包裹网页的底部内容

　语义：表示网页底部内容

6、h1-h6

　双标签、块状元素、一般用来包裹标题内容

　语义：标题标签

7、nav

　双标签、块状元素、一般用来包裹导航内容

　语义：导航标签

8、ul

　双标签、块状元素、一般用来包裹列表内容

　语义：无序列表

　默认样式margin：16px  0；padding-left：40px；

　list-style：复合属性，在一个声明中设置所有的列表属性，通常使用none去掉列表符号；

　list-style-type：设置列表符号的类型；

　list-style-image：设置列表符号的图片；

　list-style-position：设置列表符号放置的位置；

9、ol

　双标签、块状元素、一般用来包裹列表内容

　语义：有序列表

　默认样式：margin：16px  0；padding-left：40px；

10、body

　双标签、块状元素、一般用来包裹浏览器可视窗口的内容

　默认样式margin：8px；

11、blockquote

　双标签、块状元素、定义摘自另一个源的块引用内容，使用时推荐搭配cite属性来指定引用的url源地址，便于让搜索引擎能获得更多的相关信息

　语义：引用的是其它来源的内容

　默认样式margin：16px  40px；

12、hr

　单标签、块状元素、水平线

　语义：表示文本内容和主题的分隔

　默认样式border：1px  solid  black;margin：8px  0；width：0；

13、dl、dt、dd

　都是双标签、块状元素、配合使用

　dl默认样式margin：16px  0；

　dt默认样式width：0；

　dd默认样式：margin-left：40px；