-
display 属性
- none
- block
- inline
- inline-block
-
none 不显示
-
block 占一行
- 默认 block 的标签有
- div p ul ol li h1 h2 h3 h4 h5 h6
- inline 只占 content 的尺寸
- inline-block
- inline-block 是 inline 布局 block 模式
- inline-block 对外表现为 inline,所以可以和别的 inline 放在一行
- 对内表现为 block,所以可以设置自身的宽高
-
position 属性用于元素定位
- static 默认定位
- relative 相对定位, 相对于自己本来应该在的位置
- absolute 绝对定位, 行为有点奇怪
- fixed 固定定位, 相对位置是整个窗口
-
非 static 元素可以用 top left bottom right 属性来设置坐标
-
非 static 元素可以用 z-index 属性来设置显示层次
-
relative 是相对定位
-
absolute 完全绝对定位, 忽略其他所有东西相对于(相对于页面,有页面滚动条时,随滚动条滚动)
- 往上浮动到 非 static 的元素
-
fixed 基于 window 的绝对定位
- 不随页面滚动改变
-
overflow 属性
- visible 默认
- auto 需要的时候加滚动条
- hidden 隐藏多余元素
- scroll 就算用不着也会强制加滚动条
选择器优先级:
- !import:最高级别
- 内联样式
- id选择器
- class选择器
- 元素选择器
display:
- block 以块显示
- none 不显示
- inline 放在一起(清除块)
- inline-block
positive
- static 默认定位
- relative 相对于自身的定位,通过
top
和left
来调整,不会改变页面布局(悬空调整) - absolute 绝对位置,会浮动,指导找到非static的父元素,
top
left
right
来调整,随滚动条滚动。 - fixed 基于windows的,不随滚动条滚动;
overflow
- visible 默认,显示全部
- auto 需要的时候加滚动条
- bidden 设置长宽后,隐藏多余的元素
- scroll 强制加滚动条
网友评论