CSS学习笔记五：display，position区别

最近常用css，经常在位置方面使用导display与position这两个属性，所以想要弄清楚它们之间的意思。

一、display 

作用是规定元素应该生成的框的类型。意思是定义建立布局时元素生成的显示框类型。其默认值位inline，JavaScript语法：object.style.display="inline";

display 的可能值比较多，不过我自己常用的只有几个；

常用的值有 none，block，inline-block，inline，inherit。

none 是让这个元素不会被显示出来。我使用的时候是在设置这种先设置这个区域位隐藏状态，当鼠标触发事件后则显示出来

 .container:hover .btn{
   display: block;
  }

inline 是个默认样式，该元素被认为为内联样式。

inherit继承父类样式；.container样式是父类 其display:block;，   .container .box display:inherit;，这里box是含block；

二、position

position是规定元素的定位类型。position的值比较少包含absolute，fixed，relative，static，inherit。

static是默认属性值。而absolute和fixed是绝对定位，其位置通过top， left， bottom， right来设置，但是又有所不同，fixed是相对于浏览器定位的，该样式如果使用了fixed，那它便回始终处于浏览器的某个地方，不会随着你的滑动而移动或者消失。像那些返回顶部的样式基本都使用该属性值。

relative 是一个生成相对定位的元素，该样式不会重叠，但可以通过四个方向进行移动。

inherit是集成父类的属性值，父亲有什么它就有什么。

转载于:https://www.cnblogs.com/skylarzhan/p/7286713.html