行內元素有哪些?塊級元素有哪些?CSS的盒模型?轉載

時間 2019-11-12

標籤元素哪些 css 模型轉載欄目 CSS 简体版

原文原文鏈接

塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，paddingjavascript

css中的display屬性(行內元素和塊級元素)

咱們經常使用的display屬性值有：css

inline block inline-block none

把 display 設置成 none 不會保留元素本該顯示的空間，可是 visibility: hidden 還會保留。html

咱們最關心的仍是display:inline、display:block和display:inline-block的區別：java

inline特性
內聯對象inline給它設置屬性height和width是沒有用的，導致它變寬變大的
緣由是：
它實際寬度爲：內部元素的寬+2*(padding+border+margin)。
inline對象不單獨佔一行。nginx

block特性
而塊對象block是能夠設置寬高的，可是它的實際寬高是：width+2*(padding+border+margin)。
block元素單獨佔一行。segmentfault

然而，當咱們即須要div有寬高，又不但願它獨佔一行怎麼辦？瀏覽器

inline-block特性
這個時候咱們就須要使用inline-block了：
由於inline-block既具備block的寬高特性又具備inline的同行元素特性。性能

行內元素特色ui

一、和其餘元素都在一行上；
二、元素的高度、寬度、行高及頂部和底部邊距不可設置；
三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊級元素特色spa

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。
二、元素的高度、寬度、行高以及頂和底邊距均可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%，除非設定一個寬度。

元素分類(關於這點我還有些問題，暫且放上來，慢慢修改，很是歡迎糾正)

HTML中的標籤元素大致被分爲三種不一樣類型：塊狀元素，內聯元素和內聯塊狀元素

常見的塊狀元素有：

<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>, <address>,<blockquote>,<form>

常見的內聯元素有：

<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>, <img>,<input>,<select>,<textarea>,<button>

margin在塊級元素下，他的性能能夠徹底體現，上下左右任你設定。

margin也能用於內聯元素，這是規範所容許的，可是margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，而且因爲邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。

css中display屬性

display屬性

首先，全部主流瀏覽器都支持 display 屬性。其次，咱們都知道display 屬性規定元素應該生成的框的類型。默認值：inline

咱們經常使用的display屬性值有：

inline
block
inline-block
none

把 display 設置成 none 不會保留元素本該顯示的空間，可是 visibility: hidden 還會保留。

那麼，display:inline、display:block和display:inline-block有什麼區別呢？

<style> .inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;} .block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;} .inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;} </style> <body> <span class="inline"> inline </span>inline <span class="block"> block </span> block <span class="inline-block"> inline-block </span>inline-block </body>

點擊result查看demo:

http://jsfiddle.net/qjgcjLm8/

inline特性

咱們發現內聯對象inline給它設置屬性height和width是沒有用的，導致它變寬變大的
緣由是

內部元素的寬高`+padding`。觀察inline對象的先後元素咱們會發現`inline`不單獨佔一行， 其它元素會緊跟其後。

block特性

而塊對象`block`是能夠設置寬高的，可是它的實際寬高是自己寬高`+padding`。 觀察`block`的先後元素咱們會發現`block`要單獨佔一行。

然而，當咱們即須要div有寬高，又不但願它獨佔一行怎麼辦？

inline-block特性

這個時候咱們就須要使用inline-block了，再觀察一下上面的demo，咱們會發現：

inline-block既具備block的寬高特性又具備inline的同行元素特性。

也就是說，當咱們想要讓一個元素既不獨佔一行，又能夠設置其寬高屬性的時候，咱們就能夠選擇inline-block了。

然而，在IE6/7下padding對inline的寬高是對其沒影響的。

由此，咱們能夠聯想到行內元素和塊級元素

行內元素特色

一、和其餘元素都在一行上；

二、元素的高度、寬度、行高及頂部和底部邊距不可設置；

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

塊級元素特色

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

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行內元素（inline）元素。

塊級元素是能夠設置寬高的，可是它的實際寬高是自己寬高+padding。block元素要單獨佔一行。內聯元素不單獨佔一行，給他設置寬高是沒有用的。

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示爲塊級元素。以下代碼就是將行內元素a轉換爲塊狀元素，從頁使用a元素具備塊狀元素特色。

a{display:block;}

那麼，display的其餘屬性值呢？

list-item 此元素會做爲列表顯示。

run-in此元素會根據上下文做爲塊級元素或內聯元素顯示。

compact CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。

table 此元素會做爲塊級表格來顯示（相似table），表格先後帶有換行符。
inline-table 此元素會做爲內聯表格來顯示（相似table），表格先後沒有換行符。
table-row-group 此元素會做爲一個或多個行的分組來顯示（相似tbody）
table-header-group 此元素會做爲一個或多個行的分組來顯示（相似thead）
table-footer-group： 此元素會做爲一個或多個行的分組來顯示（相似tfoot）
table-row 此元素會做爲一個表格行顯示（相似 tr ）。
table-column-group 此元素會做爲一個或多個列的分組來顯示（相似 colgroup ）。
table-column 此元素會做爲一個單元格列顯示（相似 col ）
table-cell 此元素會做爲一個表格單元格顯示（相似 td 和 th）
table-caption 此元素會做爲一個表格標題顯示（相似 caption）