元素分类--块级元素(特点:独占一行, 宽高边距可改)
什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block
就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
示例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>内联块状元素</title> <style type="text/css"> div,p, ol{background:pink;} li{background:red;} </style> </head> <body> <div>div1</div> <div>div2</div> <p>段落1段落1段落1段落1段落1</p> <h1>xxx</h1> <ol> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> </ol> </body> </html>
效果: