元素分類--塊級元素(特點:獨占一行, 寬高邊距可改)

什么是塊級元素？在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>

效果:

轉載于:https://www.cnblogs.com/Rinpe/p/5547508.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/374601.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/374601.shtml
英文地址，請注明出處：http://en.pswp.cn/news/374601.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！