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

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

inline
block
inline-block
none

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

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

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

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

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

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

行內元素特色

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

塊級元素特色

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

有類特殊的元素：如img|input|select|textarea|button|label等，他們被稱爲可置換元素（Replaced element）。他們區別通常inline元素（相對而言，稱non-replaced element）是：這些元素擁有內在尺寸(intrinsic dimensions),他們能夠設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。

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

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