CSS学习笔记（显示dispaly与定位position）

一.显示（dispaly visibility）

隐藏元素

display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

visibility:collapse 一般的元素的表现与 visibility: hidden 一样，会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group 等，其表现却跟 display: none 一样，其占用的空间会释放。

更改内联元素和块元素

display:block – 显示为块级元素

display:inline – 显示为内联元素

display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

内联元素与块元素

块级元素(block)特性

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

内联元素(inline)特性

和相邻的内联元素在同一行

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小

主要块级元素

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

主要内联元素

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素

根据上下文关系确定该元素是块元素还是内联元素：
applet ,button ,del ,iframe , ins ,map ,object , script

二、定位（position）

先设置元素的 position 定位方式，才能使用 top right left bottom 属性定位

static（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。

fixed（相对固定）

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动

relative（相对定位）

相对其正常原本位置进行定位，经常被用来作为绝对定位元素的容器块。

absolute（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 html

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素可以和其他元素（后面的元素）重叠。

sticky（粘性定位）

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

三、其他定位属性

top right bottom left

需先设置position属性才可生效

z-index

设置元素的堆叠顺序

clip

剪辑一个绝对定位的元素例：
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

overflow

设置当元素的内容溢出其区域时如何处理。
auto
hidden
scroll
visible
inherit

overflow-y overflow-x

设置当元素的内容溢出其顶部、底部 / 左侧、右侧区域时如何处理。