码迷,mamicode.com
首页 > Web开发 > 详细

css display visibility overflow

时间:2020-07-08 11:45:58      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:fixed   限制   查看   隐藏   属性   定位   otto   滚动条   块元素   

1. display和visiblity

对于 CSS 里的 visibility 属性,通常其值被设置成 visible 或 hidden

visibility: hidden 相当于 display:none,能把元素隐藏起来,但两者的区别在于:

  •  1、display:none 元素不再占用空间。
  •  2、visibility: hidden 使元素在网页上不可见,但仍占用空间。

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

 

display: block;

  • 块元素:宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
  • 在前后都是换行符。总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

display: inline

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,由内容撑起;

display:inline-block

  • 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性,常将所有<li>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了

利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。

 

2.  overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值:‘

  •  visible 默认值。内容不会被修剪,会呈现在元素框之外
  • hidden 内容会被修剪,并且其余内容是不可见的。
  • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

3. position

position 属性的五个值:

  • static HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
  • relative 作为其后代绝对定位基准
  • fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动:
  • absolute: 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
  • sticky: 依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

重叠元素

使用定位时可能出现元素的重叠,z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

 

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

 

注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

 

css display visibility overflow

标签:fixed   限制   查看   隐藏   属性   定位   otto   滚动条   块元素   

原文地址:https://www.cnblogs.com/kongrui/p/13265971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!