css 浅析display属性

继续开始个人css之旅吧。今天咱们来讲什么啊。构思了两天仍是没有什么思路，可是学习的步伐咱们不能中止下来。仍是按照以前的计划来说讲display,在讲这个以前咱们仍是按照老规矩来扯扯蛋,步子不可以迈大了。废话不说了。
问你们一个问题哈？块级元素和行级元素，大家知道吗？

什么是块级元素了？(div)是块级元素 什么是行级元素？（span）你能看出他们两则的区别吗？ 先上图

可能有时候你们不是特别的注意他们直接的区别。下面咱们来讲一下他们具体的特性：

块级元素：

1：块级元素会独占一行，其宽度自动填满其父元素宽度

2 ：块级元素能够设置 width, height属性。【注意：块级元素即便设置了宽度，仍然是独占一行的】

3：块级元素能够设置margin 和 padding。

行级元素：

1：行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

2：行内元素设置width,  height无效

3： 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，可是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果换句话说就是  水平方向有效，竖直方向无效

 

前面说了一个简单的例子如今可以看到他们其中存在的区别了吧。说道这里可能要须要补充 一点就是这个元素是个四不像的东西，可变元素。怎么判断他究竟是什么（ 可变元素须要根据上下文的语境来决定他究竟是块仍是行）通俗点讲：

• 块级元素通常用来搭建网站架构、布局、承载内容
• 内联元素通常用来在网站内容中的某些细节或者部位，用以“强调、区分样式、上标、下标、锚点”等等。

你说了这么多东西和咱们要讲的东西有半毛钱的关系，下面咱们就来讲说咱们要讲的到底有几毛钱的关系。到底有没有关系了。若是没有关系咱们说这个又有什么意义。

 其实你能够反过来想其实咱们整个HTML页面不就是行级和块级，最主要的是他们能够经过display:inline|block 相互的转换，如今知道他们有什么卵关系了吧。

既然有关系了，那咱们就须要好好的理一理他们直接深入的关系。有没有很激动啊。 

其实他们的关系很复杂咱们就讲讲几个比较简单的比较经常使用的，若是要深究的话建议本身去看看书.

下面咱们来讲Display这个东西属性太多了，没有办法一个一个说，咱们来讲说关键的几个none、block、inline、inline-block，其实也是平时咱们说的最多的。

（1）：inline

 这个就是文字和图片会常常用到的，咱们能够打一个比方就是，他就是瓶子里面的液体，液体的特色就是没有形状没有大小的。他的大小彻底是由装他的容器来决定的。

其实块和行是能够相互切换的，可是这里面有问题： 这个属性用于定义创建布局时元素生成的显示框类型。对于 HTML 等文档类型，若是使用 display 不谨慎会很危险，由于可能违反 HTML 中已经定义的显示层次结构。他会破坏文档的结构因此请慎用。

哪有人就会问，那若是我要给他设计高度和宽度怎么办？

其实这个吗？咱们下一章会介绍。这个先给你们看一个效果。如何实现发现没有float这个属性

inline元素的特色： 
和其余元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。

（2）Block:

你们看看和上面的截图的却别是什么？内容的宽度？看见没有。如今能不可以理解到以前说的他的宽度和高度的区别了。其实个人理解Block就是一个盒子模型，他须要彻底遵循盒子模型的特色。不懂得化请参考上一个节。谢谢

Block特色

老是在新行上开始；
高度，行高以及顶和底边距均可控制；
宽度缺省是它的容器的100%，除非设定一个宽度

请重点关注一下加粗的部分。

（3）：inline-block：

inline-block顾名思义，它既有inline的特性，又有block的特性，你们能够想一想通常的button、input是什么样子的。　那button举例子。咱们在页面中输入若干个<button>，发现它们是“流”式排列的（能够对比一下若干个<div>的排列方式）。可是针对一个button，咱们还能够自定义修改它的形状，这样就有“块”的特征。这个就是咱们以前讲的四不像。

不知道你们有没有看出来他的特色啊。就是一个四不像。但是咱们会在什么地方使用到了？

1. 按钮和文字排在一行

2. 按钮中文字与外边文字底部自动对齐 这个场景是否是咱们常常会遇到啊。

其实我感受啊只要你理解了这些东西的原来，才可以真真的使用上。在接下来的时候还会更新。期待下一篇博文吧。不知道你们清楚没有。谢谢你们看完，废话不少

参考：http://www.cnblogs.com/wangfupeng1988/p/4317153.html

http://dbear.iteye.com/blog/750950