定位(相对定位、绝对定位、固定定位)、overflow属性

定位

属性

position

  • static 静态定位 (默认值)
  • relative相对定位
  • absolute绝对定位
  • fixed固定定位

配合指定位置的属性(偏移量)

  • 水平方向位置

    • left:距左侧的距离
    • right:距右侧的距离
  • 垂直方向位置

    • top:距顶部的距离
    • bottom:距底部的距离

相对定位

相对于元素本身原来位置进行定位

  • 不定义偏移量时对元素本身基本没有影响
  • 不脱离文档流(原来位置仍然占位)
  • 提升元素层级
  • 通常配合绝对定位使用(作为定位父级)

绝对定位

  • 脱离文档流
  • 提升元素层级
  • 通常配合相对定位使用(作为定位子元素)—— 父相子绝

没有定位父级时,相对于根元素(html)进行定位

有定位父级时,相对于【最近】的定位父级进行定位

固定定位

始终相对于窗口进行定位

  • 脱离文档流
  • 提升元素层级

实现定位元素的水平垂直居中

方法一:

left:50%;margin-left:负盒子宽度的一半;margin-top:负盒子高度的一半;

方法二

left:0;
right:0;
top:0;
bottom:0;
margin:auto;
  • ie7及以下不支持

定位特性

绝对、固定定位

  • 脱离文档流
  • 提升层级
  • 会使未定宽度的块元素适应内容
  • 会使行内元素生成一个块级框(支持宽高、垂直方向的padding,margin,line-height…)
  • ————————————————————————————————————————
  • 包含浮动子元素,高度不塌陷
  • 子元素的margin值不会出现传递塌陷问题

相对定位

不定偏移量时基本对元素没有影响(不改变元素本身的特性-但提升了层级)

覆盖关系总结

  • 普通元素,(1)结构上靠后的覆盖靠前的,子元素覆盖父元素
  • 浮动元素覆盖普通元素(浮动元素之间同上(1))
  • 定位元素覆盖普通、浮动元素 (定位元素之间默认同上(1))
    • 定位元素之间层级关系可以通过z-index调整

z-index

z轴顺序堆叠顺序(控制定位元素之间的层级关系)

  • 默认0

  • 取值:不带单位的数值

  • 值越大显示越靠上

  • 注:从父原则(拼爹)

浮动与定位(fixed,absolute)脱离文档流的区别

  • 浮动和定位元素,都会脱离文档流

  • 浮动和定位元素,都会使行内元素生成块级框

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

    区别:

  • 浮动元素是不脱离文本流(文字、图片及其它内联元素产生绕排),定位元素既脱离文档流又脱离文本流

常用其它属性

overflow属性(overflow-x,overflow-y)

当内容溢出时的处理

  • visible显示
  • hidden隐藏
  • scroll显示滚动条
  • auto 自动

vertical-align

1) 用于td,th,控制它们内容在垂直方向的对齐方式

2)用于行内元素

  • 控制图片与文字垂直方向的对齐方式

    img{
        vertical-align: top;
    }
    
  • 控制图片与图片垂直方向的对齐方式(图片也是行内块)

    img{
        vertical-align: middle;
     }
    
    <div class="box">
            <img src="pic1.jpg" alt="" height="100">
            <img src="pic1.jpg" alt="">
     </div>
    
  • 行内块与行内块元素之间的对齐方式 (inline-block)

常用值

  • baseline默认值 (基线对齐)
  • top顶部对齐
  • middle居中对齐
  • bottom底部对齐
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值