css块级元素与行级元素
生活随笔
收集整理的這篇文章主要介紹了
css块级元素与行级元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
看先下效果圖
代碼
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>div{background: #DD28A0;}span{background: #EEE8AA; }.one{width: 30px;height: 50px;margin-top: 30px;margin-left: 30px;margin-right: 30px;}</style><body><div>塊級元素</div><div>塊級元素</div><span>2222222222222222</span> <span class="one">2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span></body>
</html>
?效果圖如下
?從上面可以看出什么
塊級元素都是獨自站一行, 行級元素缺不是 設置一個行內元素看出來他的kuan,高,頂部距離都是失效的
總結一下他們的特點
?
塊級元素
特點：1.每個塊級元素都是獨自占一行，其后的元素也只能另起一行，并不能兩個元素共用一行。
2.元素的高度、寬度、行高和頂底邊距都是可以設置的。
3.元素的寬度如果不設置的話，默認為父元素的寬度。
常見的塊級元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
行級元素
特點：1.可以和其他元素處于一行，不用必須另起一行。
2.元素的高度、寬度及頂部和底部邊距不可設置。
3.元素的寬度就是它包含的文字、圖片的寬度，不可改變。
?
塊級元素與行級元素的轉換
? ? ?display:inline將塊級元素設為行級元素
? display:block將行級元素設為塊級元素
設置代碼
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>div{background: #DD28A0;display: inline;}span{background: #EEE8AA;display: block; }/*.one{width: 30px;height: 50px;margin-top: 30px;margin-left: 30px;margin-right: 30px;display: block;}*/</style><body><div>塊級元素</div><div>塊級元素</div><span>2222222222222222</span> <span class="one">2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span></body>
</html>
?
?
總結
以上是生活随笔為你收集整理的css块级元素与行级元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 非常可爱的狗狗 是什么品种？
- 下一篇： display:inline-block