css display

一、

常见的块级元素：

dl - 定义列表、form - 交互表单、 h1-h6级标题、hr - 水平分隔线、table - 表格、 p - 段落、 ul - 非排序列表、li

ol、div

常见的行内元素

i - 斜体、img - 图片、input - 输入框(单行)、span - 常用内联容器，定义文本内区块、a - 锚点、<b>, <td>,

二、

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

三、

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

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

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

四、

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

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

2、元素的高度、宽度、行高以及顶和底边距都可设置。

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

五、

提示：

大家要注意到inline内联元素之间有一个间距问题，inline-block元素也有，解决的办法可以是设置float:left或者是设置负的margin-left,效果还不错

六、

小技巧：

大家使用ul、li、a标签创建导航条时，可以设置a标签为块状元素，并设置宽度，

·        display:block -把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。

·        width:45px -块元素默认占用全部可用宽度。

当然创建水平导航条可以使用display:inline; 也可以使用float:left

CSS display:inline和float:left两者区别

①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示)

②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。

那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。

简单的说就是float可以设置宽高，然而display:inline;虽然也会浮动，但是他不能设置宽高。

 浮动元素会生成一个块级框，而不论这个元素本身是什么，例如a元素，它可以设置宽高，margin等

七、

display:none;元素以及它所包含的元素彻底消失，不占用空间，仿佛从未存在过，一般用于一些切换效果，如tab切换等