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效果)是透明的，他也没有任何的视觉影响。