【学习笔记】CSS深入理解之absolute

Anleb 发布于2019-08-30 15:54 / 3104人阅读

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。

《张鑫旭的CSS深入理解之absolute》学习笔记

绝对定位的特性

绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代

绝对定位的行为表现 无依赖绝对定位元素

在未手动定位的情况下，绝对定位元素有以下特性

去float化 - float属性将会失效

跟随性 - 根据原有位置脱离文档流放置

无依赖绝对定位元素 —— 即未手动定位的绝对定位元素

无依赖绝对定位元素的使用

无依赖绝对定位元素可以使用margin值进行定位，实现脱离文档流的相对定位效果，脱离文档流可以解决溢出限制的问题

应用实例：

图标定位：角标之类的可以使用DOM位置结合绝对定位margin偏移实现定位，不一定要使父容器成为包含块

下拉框定位：下拉框和输入框之间的联系可以使用绝对定位margin偏移实现

边缘定位：利用跟随性，使元素跟随空白字符放置

图标对齐和文本溢出处理

绝对定位脱离文档流

绝对定位+动画，避免回流和重绘

覆盖层级，z-index + 绝对定位 > 后置绝对定位元素 > 前置绝对定位元素 > z-index > 普通元素
https://codepen.io/curlywater...

绝对定位和width/height

无固定width/height，绝对定位方向是对立的（如left vs right, top vs bottom）的时候，绝对定位元素拉伸。可应用于宽高自适应

有固定width/height，绝对定位拉伸失效

固定width + left + right，相当于元素有了一个固定宽度，这时使用margin: auto可达到居中效果

总结

绝对定位相对于包含块定位；
在日常使用种，一般会习惯性对父容器使用relative，使用top/bottom/left/right来脱离文档流的绝对定位；
但无依赖绝对定位元素结合margin偏移使用也可以实现一些实用的效果。

利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。

绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。

混合云专线服务深入理解webrtc之aec 如何深入理解深度学习深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117048.html

【学习笔记】CSS深入理解之margin

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素，可改变元素水平方向的可视尺寸占据尺寸对于元素，可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽张鑫旭的CSS深入理解之margin学习笔记 margin与容器的尺寸可视尺寸：对于没有设定width的块元素，margin可改变元素水平方向...

stefan 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之overflow

摘要：张鑫旭的深入理解之学习笔记基本属性属性介绍默认当与值相同时，等同于当与值不相同时，其中一个值被赋予时，若另一个值为，那这个会被重置为作用前提元素非对应方位的尺寸限制拉伸对于单元格等需要为状态才可以与滚动条页面默认滚动条来自与无《张鑫旭的CSS深入理解之overflow》学习笔记 overflow基本属性 overflow属性介绍 overflow: visible(默认)|hidd...

Ali_ 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之vertical-align

摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值百分...

ermaoL 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之float

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏包裹：即产生一个BFC破坏：使父容器...

denson 2019-08-29 17:31 评论0 收藏0
【学习笔记】CSS深入理解之padding

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸元素值过大，一定影响元素尺寸为定值，会影响元素尺寸为或者为，同时值没有暴走，不影响元素尺寸元素水平影响尺寸，垂直不影响尺寸，但是会影响占据空间会显示背景色负值与百分比单位不支持负值百分比相对于自身宽张鑫旭的CSS深入理解之padding学习笔记 padding与容器的尺寸 block元素 padding值过大，一定影响元素尺寸 width为定...

learn_shifeng 2019-08-30 15:54 评论0 收藏0