为什么css里写了样式,检查网页元素却找不到?

linux下设置开机自启动脚本

  返回  

关于CSS的几种定位方法、CSS透明度的一些问题

2021/7/21 19:46:40 浏览:

定位的作用

普通文档流中块元素垂直排列,行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置。(自由的在某个盒子内移动位置或者固定在屏幕中的某个位置)

定位的实现

使用定位需要指定一个元素在文档中的定位模式,配合设置【边偏移量】决定元素最终的显示及位置

定位模式通过position属性来设置,以下为常用四种定位模式静态定位,相对对定位,绝对定位,固定定位

边偏移定位元素的位置,使用“top”、“right”、“bottom”和“left”来描述。

  • 边偏移属性

    left:设置元素的左侧 距离参考点的左侧 距离 right:设置元素的 右侧 距离参考点右侧 距离 top:设置元素的 顶部 距离参考点 顶部的 距离 bottom:设置元素元素 底部 距离 参考点底部的 距离

  • 取值

    • 长度值:px/em等

    • 百分比:相对于包含块计算

    • auto 默认值

    • 允许使用负值

注:

通常水平位置通过left或right控制,垂直位置通过top或bottom控制

非定位元素设置此属性无效定位模式详解

postion:relative相对对定位

相对于元素在正常的文档流中的位置移动它,把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。 它原本所占的空间不会改变

偏移的参考位置: 相对于 原来的的位置 进行偏移

基础特性

  • 不脱离文档流

  • 提升元素层级

  • 不定义偏移量时对元素基本没有影响

应用场景

通常作为定位父级配合绝对定位使用

postion:absolute绝对定位

没有定位父级时 相对于html进行定位,有定位父级时相对于最近的定位父级进行定位

以有定位属性的父元素为参考进行偏移,如果父元素没有定位属性,继续向上一级找有定位属性的先辈元素,如果都没有,找到html进行偏移

基础特性

  • 脱离文档流

  • 提升元素层级

应用场景:

通常配合绝对定位使用(父相子绝),如焦点图中的分页,翻页,视频网站中的 vip标签等

postion:fixed 固定定位

始终相对于浏览器窗口定位。即使窗口是滚动的它也不会移动:

基础特性总结

  • 脱离文档流

  • 提升元素层级

应用场景:

相对于窗口定位的元素 如弹窗、跟随滚动的导航、侧边栏

postion:static静态定位

表示“将元素放在文档布局流的默认位置,HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

  • 常用于重置 定位属性

  • 静态定位的元素不会受到 top, bottom, left, right影响。

定位元素的层级顺序

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

  • 取值

    • auto(默认值) 堆叠顺序与父元素相等

    • 不带单位的数字:值越大显示越靠上

  • 总结

    • 普通层,浮动层,定位层覆盖关系总结

      • 普通层:结构靠后的覆盖靠前的,子元素覆盖父元素

      • 浮动层:浮动层覆盖普通层,浮动层之间同上

      • 定位层:定位层高于普通和浮动层 【定位层之间默认是同上,也可以通过z-index调整覆盖关系】

实现盒子水平垂直居中的方法

方法一:

  • 实现思路:margin负值配合定位的百分比

    • 给需要居中元素设置定位

    • left:50%

    • top:50%

    • margin-left: -当前元素宽度的一般

    • margin-top: -当前元素高度的一半

方法二:

  • 实现思路:left,right,top,bottom并用,配合margin:auto;

    如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的,那么元素的“height”和“width”将隐式地由偏移量决定。
  • 注意:ie7及以下浏览器不兼容

定位对元素的影响

  • 相对定位基本不改变元素本身的特性

  • 绝对、固定定位

    • 脱离文档流

    • 提升元素层级

    • 未定宽度的块元素适应内容

    • 使行内元素生成块级框

  • 注意:定位并不是一种用来做主要页面布局的方式,主要用于管理和微调页面中的一个特殊项的位置。

CSS 透明

rgba()

  • 语法: rgba(r,g,b,a), 说明:r表示red,g表示green,b表示blue,a表示alpha透明度

  • 取值: r,g,b取值范围 0-255 a透明度,取值0-1

  • 使用说明:

    设置颜色的不透明度, [一般用于调整background-color、color、box-shadow等的不透明度】

  • 兼容性:IE6、7、8【不支持】,IE9及以上版本和标准浏览器都支持

opacity

  • 语法: opacity:0.5:

  • 【取值:0-1】 0表示全透明,1表示全不透明,0-1之间表示半透明

  • 使用说明:

    设置opacity元素的所有后代元素会随着一起具有透明性, 【一般用于调整图片或者模块的整体不透明度】

  • 兼容性:IE6、7、8【不支持】,IE9及以上版本和标准浏览器都支持

补充了解:IE专属滤镜

  • 语法:  filter:alpha(opacity=数字)

  • 取值:

    数字取值0-100

    0表示全透明,100表示全不透明,0-100之间表示半透明

  • 兼容性:仅支持IE6、7、8、9,在IE10版本被废除

  • 注意:在IE6、7、8中,设置了filter:Alpha的元素,子元素设置为【相对定位】,可以让子元素不透明

  • 思维导图 

 

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号