前端三件套之css(6) 元素显示类型与定位

元素显示类型

块级元素

块级元素是指像div这样，有着框模型的元素，即有着：外边距，边框，内边距，内容的模型。并且可以设置宽高的元素。但是块级元素不能横向排列，要横向排列就必须浮动，但浮动会脱离文档流。

行内元素

行内元素是指像p标签，span标签这种。他们的特点是不能设置宽高。但是可以横向排列。

行内块

行内块是综合了块级元素与行内块元素的特点，可以设置宽高，也能横向排列。

例如像这种页面索引栏，就是行内块元素的例子。

还有img标签，它默认就是行内块元素。 

元素消失

元素消失类似于脱离文档流，即让该元素不占空间也不显示。

元素类型转换

元素类型转换需要用到display。

display: block;/* 强转为块级元素 */
display: inline;/* 强转为行内元素 */
display: inline-block;/* 强转为行内块元素 */
display: none;/* 让元素消失 */ 

元素类型转换的一个实例就是：一般来说a标签的超链接，是要点字才能跳转。但是我们可以把他转换成块级元素，这样点这个区域都可以跳转了。

例如小米商城，就是利用了强转，导致点击这片区域都可以跳转。

置换元素

置换元素又叫替换元素，指类似于：img，input，select，object，canvas，iframe，textarea这种标签，在不用css的情况下，元素存在一定的固有尺寸，且会影响元素的显示效果。然而在进行强转的情况下，会存在某些功能消失的元素。

例如input设置为botton(按钮)，如果设置css让它存在一定的弯角(例如让它变成圆形：border-radius: 50%)；那么点击的效果将会消失，即不可再进行点击。

元素隐藏

元素隐藏类似于hover效果，即鼠标移入前是一个状态，鼠标移入后又是一个状态。

例如将鼠标移入到“Xiaomi手机”，下面就会出现一个弹窗。

他的本质做法就是让这个弹窗隐藏(display:none)，然后在鼠标移入的时候，在hover伪选择器里面又不进行隐藏了。

让元素隐藏还有一个方法：

visibility: hidden;

这样也可以隐藏，但是与display:none；的区别是：vis只是隐藏内容，其原本的空间还在。

定位

元素默认的定位是：static，也被叫做静态定位。

改变定位的方式是：

position: relative;
/* 像这样,就让它相对定位 */

定位有四个属性：top，left，right，bottom。分别表示上，左，右，下。在定位之后，可以通过调整这四个属性，来改变元素的位置。

top: 50px; /* 向下移动50像素 */
left: 50px; /* 向右移动50像素 */
right: 50px; /* 向左移动50像素 */
bottom: 50px; /* 像上移动50像素 */

top: -50px; /* 向上移动50像素 */
left: -50px; /* 向左移动50像素 */
right: -50px; /* 向右移动50像素 */
bottom: -50px; /* 像下移动50像素 */

特别要注意的是，这个移动，给正值是反着来的。即：给正值朝着中心移动，给负值背离中心移动。

相对定位

相对定位是：position：relative;

参考物：元素本身

不脱离文档流

在相对定位下，采用top，left，right，bottom进行改变元素的位置，是根据它原本的空间进行移动

 

绝对定位

绝对定位是：position：absolute;

参考物：父元素或上级元素

脱离文档流

在绝对定位下，采用top，left，right，bottom进行改变元素的位置，是根据它父元素的空间进行移动，前提是父元素必须有定位，如果父元素没有定位，那么参考已经有定位的爷爷，如果爷爷没有定位，那继续往上找，假设都没定位，那参考的就是网页界面。

固定定位

固定定位是：position：fixed;

参考物：网页界面

脱离文档流

在固定定位下，采用top，left，right，bottom进行改变元素的位置，是根据网页界面进行移动，并且移动过后，就定在哪里的，如果页面过大有滚动条，那么固定定位的元素位置不改变。

粘性定位

粘性定位是：position：sticky;

参考物：上一个兄弟元素

不脱离文档流

在粘性定位下，采用top（注意粘性只有top）进行改变元素的位置，是根据它上一个已定位的兄弟进行移动，如果没有，那就再上一个，都没有那就父元素。