【校招VIP】html5：块级元素- 校招VIP

转载声明：文章来源https://blog.csdn.net/qq_45158336/article/details/119332418

最常见块级元素：div

div的属性：

1	`<div title="title属性">title属性</div>`

title属性：

当鼠标悬停在div上时候会有一个小的提示框

1	`<div id="div1">div1</div>`

id属性可以理解为为当前div提供一个唯一标识，可以理解为我们的身份证号

1	`<div class="box1">box1</div>`

class属性是为当前div定义一个类名，以后学到css时候会在style标签内运用.class获取类名为其设计样式

1	`<div style="color: red;">我是一个div</div>`

style属性当前div设计简单的样式

1	`<div style="border: 1px solid red">我是一个块级元素</div>`

当我们在div内写内容的时候，div的高度会由内容的高度决定，也可以使用hight来修改

1	`<div style="border: 1px solid rgb(0, 0, 0) ;height:100px">我是一个块级元素</div>`

border为设置边框厚度为1px（像素）， solid表示的是实线，（dashed表示的是虚线），rgb为取色器，括号内内容为颜色坐标（rgba也是取色器，a是设置其透明度，取值为0-1之间）

块级元素特点：

独占一行空间

默认宽度为100%

高度由子元素或内容决定

可以通过css指定其宽度

块级元素包括：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...

目前使用最多的就是div，div属于无样式的块级元素，div后面那些都是在div的基础上加了内嵌样式，所以div适用的上述四种属性，在其他后面那些样式里面也同样适用

以下介绍几个写代码小技巧（彩蛋）：

div.class回车 == <div class="class"></div>

div>div ==

还有朋友在写代码时候发现在div里面写不了空格占位，或者是写一堆空格只能显示一个空格的

以下为大家提供参考：