什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block
就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
我来试一试:感受一下块级元素的特点
在右侧代码编辑器中输入各种块级标签,试一试他们的特点。
这一小节没有正确性验证,单击“提交”按钮进入下一小节学习。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内联块状元素</title> <style type="text/css"> div, p { background: pink; } </style> </head> <body> <div>div1</div> <div>div2</div> <p>段落1段落1段落1段落1段落1</p> </body> </html>