zoukankan      html  css  js  c++  java
  • css-关于absolute和relative的一些笔记

    根据张鑫旭老师的博客,一些笔记留作备忘

    1、position:absolute

    具有包裹性——包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签。

    具有破坏性,会使父元素塌陷

    有评论说absolute不会使宽度塌陷,实验后确实如此。

    absolute不利于扩展维护,尽量少用。

    2、absolute可用于实现左右分栏等高的效果

    div元素absolute后不在文档流中,设置足够高的高度,边界可用于分栏的中线。

    父元素要overflow hidden。

    3、现代浏览器下block水平元素absolute化后不支持图片混排

    4、relative影响最小化

    将需要绝对定位的元素单独放在relative属性的标签下,于是,relative相对定位就不会影响任何其他元素,仅仅是其内部的绝对定位元素。

    定位这个东西,如果要使用相对定位属性或是绝对定位属性,我个人比较推荐如下组合:absolute+margin(左上角元素定位,作用于当前元素)、float+relative(右上角元素定位,作用于当前元素)和relative+absolute(右下角元素定位,直接父标签+当前定位元素)。而目前web届大肆使用的外层div层设置relative属性,里面一些absolute元素定位的方法是不推荐的。

  • 相关阅读:
    kafka 配置权限
    转战 rocketmq
    从 spring-cloud-alibaba-nacos-config 进入 nacos-client
    sc 使用了配置中心后,如何设置远程和本地配置的优先级
    nacos 使用 servlet 异步处理客户端配置长轮询
    NacosValue 注解
    curl 使用 post 请求,传递 json 参数,下载文件
    nginx 代理 https 后,应用变成 http
    数据集市
    支付宝数据建模介绍
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6083203.html
Copyright © 2011-2022 走看看