美文网首页
解决高度塌陷、定位(补充版)、opacity、filter、ba

解决高度塌陷、定位(补充版)、opacity、filter、ba

作者: 琉佳 | 来源:发表于2019-10-16 19:35 被阅读0次

解决高度塌陷

    清除浮动:将最后一个盒子设为空白盒子再clear:both;就可以撑开父元素,防止高度塌陷

    用after在后面加入内容,为兼容ie6需加zoom  eg:.clearfix:after{content:"";display:block;clear:both;}

                                                  .clearfix{zoom:1;}  【最推荐使用】

定位:元素开启定位后比文档流高一层

        position:

                  static:默认值,没有定位

                  relative:{position:relative;left:100px;top:200px;}

            相对定位相对于元素在文档流原来的位置

            开启相对定位后不会影响元素性质

                  absolute:元素相对于html元素或离他最近 的祖先定位元素进行定位(一般帮他的父元素先开启相对定位)

    绝对定位,会使元素完全脱离文本流

    开启绝对定位后会影响元素性质

    绝对定位的块元素的宽度会被其内容撑开

                  fixed:固定定位,元素会被锁定在屏幕的某个位置上,网页滚动时保持不动

                  (开启以上三种定位后可使用(top、right、bottom、left)属性)

        z-index:元素开启定位后可使用,可提升定位元素所在的层级

                  可指定一个整数作为参数,值越大优先级越高,显示在网页上层

  未开启定位则不可以使用

opacity:设置透明,0为完全透明,1为完全不透明;

filter:alpha(opacity=50):一般也会加上这个滤镜用于支持ie浏览器(选值0~100)

background-image:url(图片路径)

一般设置背景图片时同时指定背景颜色

background-repeat:设置是否重复背景图

    repeat  重复图片

    no-repeat  不重复,只一张

                  repeat-x  只横排重复

                  repeat-y  只竖排重复

background-position:设置背景图像的起始位置 

    eg:background-position:bottom center;可选值一个设为横,一个为竖 

    eg:background-position:100px 200px;      也可为负值

background-attachment:设置背景图片是否会随着页面其余部分的滚动而滚动

      fixed    固定背景

小注意点:如父子元素则子元素永远在父元素之上

  相对路径写到哪儿便从哪儿开始找

相关文章

  • 解决高度塌陷、定位(补充版)、opacity、filter、ba

    解决高度塌陷 清除浮动:将最后一个盒子设为空白盒子再clear:both;就可以撑开父元素,防止高度塌陷 ...

  • 前端笔记(5)

    代码:(1)高度塌陷 (2)解决高度塌陷1 (3)解决高度塌陷2 (4)解决高度塌陷3 (5)相对定位 (6)绝对...

  • HTML-05day

    1、高度塌陷 2、清除浮动 3、导航条 4、解决高度塌陷 5、相对定位 6、绝对定位 7、近期开班

  • 2018-11-22

    导航条 清除浮动 解决高度塌陷 相对定位 绝对定位 固定定位 作业

  • 前端盒子模式 解决高度塌陷

    高度塌陷 这样会造成高度塌陷 解决1 解决2 解决3

  • 解决高度塌陷、定位问题

    高度塌陷 父元素包含的子元素,子元素多高。父亲没指定,默认子元素高。子元素设置浮动以后,子元素脱离文档流,此时子元...

  • 解决高度塌陷、定位问题

    高度塌陷 父元素包含的子元素,子元素多高。父亲没指定,默认子元素高。子元素设置浮动以后,子元素脱离文档流,此时子元...

  • 解决高度塌陷定位问题

    先问一下什么是高度塌陷? 答:简单来说,就是包含含有浮动的元素的上一级的高度变为0了,下面的元素会上去 这个可以简...

  • 解决高度塌陷、外边距重叠

    高度塌陷 同时解决高度塌陷和外边距重叠

  • 前端05day

    相对定位 绝对定位 固定定位 CSS高度塌陷 高度塌陷问题 在文档流中,父元素的高度默认是被子元素撑开的,也就是子...

网友评论

      本文标题:解决高度塌陷、定位(补充版)、opacity、filter、ba

      本文链接:https://www.haomeiwen.com/subject/qzoumctx.html