當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

布局display

發布時間：2023/11/27 生活经验 36 豆豆

生活随笔收集整理的這篇文章主要介紹了布局display 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是布局：瀏覽器以正確的大小將元素擺放在正確的位置上。

布局：元素擺放的模式。

影響元素大小和位置的css屬性： display? position?? float? flex

display

設置元素的顯示方式，包括大小和位置 , display的取值有：

block

inline

inline-block

none

display : block

block元素又稱為『塊級元素』

特性:

1 .默認寬度為父元素寬度

2. 可以設置寬高

3. 換行顯示( 前序元素相對于 display : block 是換行顯示的，后續元素相對于 display : block 也是換行顯示的。)

默認的html 元素中，? div, p , h1-h6, ul, form, … 默認的display 是? block

display : inline

紅色邊框為父級元素

display: line的特性：

1.默認寬度為內容寬度

2.不可設置寬高? ，因為行級元素是不可設置寬高的

3.同行顯示。? 如果前序元素和后續元素都是 display:inline? (行級元素) ，那么他們是同行顯示的。可以在元素內部換行。

默認display: inline 元素? span , a , label, cite , em, …

舉個栗子:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>display_inline</title><style type="text/css">.sample{background-color: pink;}/* 行級元素設置寬高無效 */.sample{width: 200px;height: 200px;}/* 指定em為塊級元素 ，塊級元素換行顯示（自身相對前序元素是換行的）*/em{display: block;}</style>
</head>
<body><span>before inline</span>
<span class="sample">display : inline;</span>
<em>after inline</em>
</body>
</html>

block vs inline 對比

display	默認寬度	可設置高度	起始位置
block	父元素寬度	是	換行
inline	內容寬度	否	同行

display : inline-block

圖1

??????? 圖二

????? 圖三

display: inline-block 特性

1.默認寬度為內容寬度? (圖一所示)

2.可設置寬高?

3.同行顯示 (圖三所示)

4.整塊換行如果超過了 inline-block的寬度，會『整行換行』。而『inline』是可以在『元素內』換行的。

默認 display: inline-block 元素? input , textarea , select , button …

舉一個栗子:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>display_inline-block</title><style type="text/css">.sample{background-color: pink;}.sample{display: inline-block;}.sample{width: 200px;height: 200px;}/* inline-block元素還具有其他inline元素的特征 ,  比如設置垂直居中（由于sample比較高，所以sample的前序和后序兩個元素在『一行』垂直居中）*/.sample{vertical-align: middle;}</style>
</head>
<body>
<span>before inline-block</span>
<span class="sample">display : inline-block;</span>
<em>after inline-block</em>
</body>
</html>

display : none

設置元素不顯示

dislplay: none? vs visibility:hidden

visibility:hidden會繼續占據位置。

舉個栗子:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>display_none vs visibility_hidden</title><style type="text/css">.parent{margin: 30px;border: 1px solid pink;}.dn{/*display: none;*/}.vh{/*visibility: hidden;*/}</style>
</head>
<body>
<div class="parent"><div class="dn">display : none;</div>
</div>
<div class="parent"><div class="vh">visibility : hidden;</div>
</div></body>
</html>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

轉載于:https://www.cnblogs.com/qq-757617012/p/6019488.html

總結

以上是生活随笔為你收集整理的布局display的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。