outline、display和visibility、区块和内联元素、定位、cursor


outline

outline


visibility和display的区别

visibility:
hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:
none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。


块元素和内联元素

  • 块元素占用了全部的宽度,前后都是换行符,如:
    < h1>
    < p>
    < div>
  • 内联元素只需要必要的宽度,并不强制换行,如:
    < span>
    < a>

display:inline 将块元素转换为内联元素。

li{display:inline}

display:block 将内联元素转化为块元素。

span{display:block}


定位

  • fixed

Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。

position:fixed;

  • Relative定位
    相对定位元素的定位是相对其正常位置。
    可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

position:relative;
top:-50px;

  • Absolute元素
    绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。

  • 重叠元素
    元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素,z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
    一个元素可以有正数或负数的堆叠顺序:

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}


overflow
当内容超过指定范围后,可以用overflow属性创建对应的滚动条;


cursor
当鼠标移动到对应区域时,鼠标变为cursor设定的样式;


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,277评论 0 1
  • 一、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:1、浮动模型是一种可视化格式...
    青鸣阅读 1,139评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,675评论 32 459
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,157评论 0 5