初学CSS需要注意（display总结）

1.前言

   接触web前端才不到一个月的时间，从了解到去学习虽然存在某些人的推波助澜，但是自己的想法是清楚的，那就是从入手比较快的前端出发，转行去做IT人。但是现实总是很残酷，任何事情都是从原点出发慢慢的积累的过程，同样学习也不例外，作为这个行业的菜鸟，能总结的实在有限，好在有他山之石可以攻玉，这里就借鉴网上的一些大神的经验，自己在加以实践，得到如下的总结。希望大神们能够多多提出批评意见，跪谢。

2.初学总结

     CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言（百度文库，懵懵懂懂，似乎这个也不是很重要）。通过控制元素的属性来进行布局，一般来说总体布局可以采用float 和绝对定位 以及 控制display属性等；下面主要介绍下控制display属性，至于个人偏爱的定位和时下流行的float，就下次介绍啦。

3.display属性

    display 顾名思义 既是规定元素应该生成的框的类型，通俗的讲就是用于定义建立布局时元素生成的显示框类型，对于布局最常用一般有inline，inline-block，block，none。因其不需要具体的参数而强大的能力被广泛的应用，再加上除了几乎主流的所有浏览器都支持这个属性而深受广大开发者青睐。

内嵌元素的display的默认值为inline，而inline属性也会使块状元素显示为内嵌元素。和其他元素都在一行上；其特点是使元素具备内嵌元素的性质，高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变，<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

与inline相对应的属性是block，块状元素的display属性默认值为block，我们也可以通过设置display：block使内嵌元素显示为块状元素。其特点是换行显示，并且高宽可以随意控制，如不设置则会有和父级元素同等的宽度。通过设置这个属性我们可以使一些内嵌元素也参与布局，这样可减少层的增加，具有一定的意义。

inline-block属性是既是行内块元素，既对象在一行显示，但是作为块元素传递。不得不提的是在IE下会不识别的，但是我们可以在设置这个后在另一个标签里面设置inline来兼容IE。抛去这点不谈，这个属性在布局中还是很有用处的，我们可以使div块状元素在同一行里面显示，而且具备的是块状元素的 性质。我们可以设置vertical-align属性来控制块状元素的对齐方式，vertical-align:top 顶部对齐是我们需要的啦。并且也可以控制letter-spacing属性去掉换加宽块状之间的间隙，原则上来说其值为负并且小到一定值（-8px）的时候就可以完美去除啦，但是不得不提的是它的浏览器兼容问题，有可能在safari中出现反弹致使没有用。这个就很恼火了。（唉，兼容性的问题是我暂时处理不了的问题，再说也是菜鸟进阶，我想应该够用了哈。嘿嘿）

至于none属性，因其隐藏的可以一点看不见而且又不占空间，确实具有诱惑力，但是对于块状元素的设置是有副作用的，因其隐藏块元素是有局限性的，其子元素会隐藏不掉的而千方百计的逃出来的，致使我们设置失败。

 

转载于:https://my.oschina.net/u/1418192/blog/184952