zoukankan      html  css  js  c++  java
  • css布局

    浮动的清除:clearleftrightboth

    定位有四种,分别是静态定位、相对定位、绝对定位、固定定位。

    静态定位:所谓的静态定位就是按照标准流中出现的顺序依次格式化

    相对定位:就是微调元素位置的。让元素相对自己原来的位置,进行位置调整

    相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。

    相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:

    1微调元素

    2) 做绝对定位的参考,子绝对定位父相对定位

    绝对定位:脱离标准流,相对于自己的父级元素进行偏移。

    绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。

    绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了

    绝对定位的参考点:

    绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:

    如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角

    面试题:

    答案:

    bottom的定位的时候,参考的是浏览器首屏大小对应的页面左下角。

     

    以盒子为参考点

    一个绝对定位的元素,如果父辈元素中出现了相对定位的元素,那么将以父辈这个元素,为参考点。

    “子绝对定位父相对定位”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。

    绝对定位的儿子,无视参考的那个盒子的padding

    下图中,绿色部分是divpadding,蓝色部分是div的内容区域。那么此时,div相对定位,p绝对定位。

    p将无视父亲的padding,在border内侧为参考点,进行定位:

    绝对定位的盒子居中

    绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。

    1  600px;

    2  height: 60px;

        position: absolute;

    left: 50%;

    4  top: 0;

    margin-left: -300px;   → 宽度的一半(根据自己的情况设定)

    就是left:50%; margin-left:填宽度的一半的相反数。

     

    固定定位:就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。

    固定定位脱标!(固定定位就是一种特殊的绝对定位)

    处理溢出

    overflow: hidden; 隐藏所溢出的内容

    overflow:auto;  超出就出现滚动条,没有超出就不出现滚动条

    overflow:scroll;  出现滚动条

    overflow:visible;(默认)超出就超出,不进行裁剪

    元素的可见性

    Displayblock ;inline; none;

    visibility: hidden;隐藏盒子,但是位置还在

    Visibility:visible盒子可见,默认值

    处理元素重叠

    z-index属性,不用加单位(可以看作为高度)

    注意点,必须position取值为absoluterelative

    z-index值表示谁压着谁。数值大的压盖住数值小的。

    ● 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用。

    z-index值没有单位,就是一个正整数。默认的z-index值是0

    ● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

    ● 从父现象:父亲怂了,儿子再牛逼也没用。

  • 相关阅读:
    Spring Boot (20) 拦截器
    Spring Boot (19) servlet、filter、listener
    Spring Boot (18) @Async异步
    Spring Boot (17) 发送邮件
    Spring Boot (16) logback和access日志
    Spring Boot (15) pom.xml设置
    Spring Boot (14) 数据源配置原理
    Spring Boot (13) druid监控
    Spring boot (12) tomcat jdbc连接池
    Spring Boot (11) mybatis 关联映射
  • 原文地址:https://www.cnblogs.com/cp168168/p/5840900.html
Copyright © 2011-2022 走看看