css佈局之display屬性詳解

這篇文章帶給大家的內容是css版面之display屬性詳解，讓大家了解display屬性對於css版面的影響。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

我們要知道display 是CSS中最重要的用來控制佈局的屬性。每個元素都有一個預設的 display 值，這與元素的類型有關。對於大多數元素它們的預設值通常是 block 或 inline 。一個 block 元素通常被叫做區塊級元素。一個 inline 元素通常被叫做行內元素。 【更多css視訊學習，可訪問：css教學】

下面我們來看看不同的display屬性值對css控制佈局的影響。

css block屬性值

block元素將顯示為區塊級元素，元素的前後帶有換行符。

特點：

1、每個區塊級元素都從新的一​​行開始，並且其後的元素也另起一行。 （真霸道，一個區塊級元素獨佔一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

範例：div元素

<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>
<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>

效果圖：

#css inline屬性值

inline元素將顯示為行內元素，元素的前後沒有換行符號。一個行內元素可以在段落中包裹一些文字而不會打亂段落的佈局。

特點：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設定；

3、元素的寬度就是它所包含的文字或圖片的寬度，不可改變。

範例：span 是一個標準的行內元素。而a 元素是最常用的行內元素，它可以被用作連結。

<div>测试文字，<span style="background-color: palegreen;">被span元素包围，设置span的背景颜色</span>，<a href="#">a链接</a></div>

效果圖：

#css none屬性值

###################################################################################################################################### css元素另一個常用的display值是none 。某些特殊元素的預設 display 值就是它，例如 script 。 display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。 （none也會與block是一起使用的，使用display:none隱藏元素，在使用display:block來顯示被隱藏的元素；例如：二級導航選單）######它和 visibility 屬性不一樣。把 display 設定成 none 元素不會佔據它本來應該顯示的空間，但設定成 visibility: hidden; 還會佔據空間。 ############css的其他 display 屬性值#############還有許多的更有意思的 display 值，例如 inline-block 和 flex 。在之後的文章中我們將會討論到這兩個屬性值 。 ############display值的轉換############就像是之前討論過的，每個元素都有一個預設的 display 值。不過你可以隨時隨地的重寫它！雖然「人為製造」一個行內元素可能看起來很難以理解，不過你可以把有特定語意的元素改成行內元素。常見的例子是：把 li 元素的預設block值修改成 inline值，用來製作成水平選單。而且轉換的方法也很簡單，使用語句：###

display: inline;

###總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。想要了解更多關於css的知識，推薦影片學習：###css教學###！ ###

以上是css佈局之display屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！