display:none ,inline, block, inline-block

---

说明:本次总结的内容来源于–<<精通Css与HTML设计模式>>Page80
内容如有不对的之地，还请各位好汉留言相告。抱拳！！！！

---

display:inline

• 别名：内联， 内联元素， 静态内联盒模型等。

• 内联格式化环境 : 是指内联元素按照 ->(右) 或是 (左)< - 的顺序排列时，当超过他们最近的终端块状祖先的宽度时，便会换到新的一行

  css属性：width height overflow 作用在内联元素上“无效”（width 和 height 总是和内容保持一致）

  margin 和 line-height 以及border：
  margin-left 和 margin-right 可以保持内联元素和其他元素之间的距离margin-top 和 margin-bottom 确是不起作用

  line-height:可以设置内联元素行的高度
  图片是line-height:10 和 110 的对比 他们会在文档流中占用空间的。

border的存在不会改变元素的行高，但是边框会覆盖邻近行,如下图所示：

---

display：inline-block

• 把任何的内联元素当做包含在内联环境下的块状元素显示

  inline-block和一般的内联元素的区别：
  inline-block包含了一些属于块状元素的属性
  如：margin paddding border width height

  案例：改变display:inline-block的width和height
  
  

• inline-block元素不会和其他的行交叉的（会添加行高以适应自身的高度，边距等等）
  margin-top 和 margin-bottom会改变内联块状元素的行高
  举例：
  
  

• margin-left 和margin-right则是控制和前后元素的距离

---

display：block

• 感觉没有什么可说的
  此处省略n….个字
  

用margin-left:auto 和 margin-right 控制以及已经固定好大小的块状元素水平排列
当设置了width时，单独设置margin-right会让块状元素靠其父元素的left一侧
或者 单独设置margin-left会让块状元素靠其父元素的right一侧
同时设置的话，则块状元素会处于父元素的中间

---

---

                 纸上得来终觉浅，绝知此事要躬行

---