• 静态页面实例-京东商城03


    16.清除浮动(补充)

    有时候在页面布局的时候,父盒子的高度无法确定,是由内部子盒子的高度撑起的,但如果子盒子设置浮动以后,会使父盒子的高度会变为0,就相当于父盒子在标准流中没有位置了,这种情况就是父盒子发生了高度塌陷,而清除浮动就是清除父盒子高度塌陷时对页面布局产生的影响。

    17.块级元素水平垂直居中的实现

    块级元素的水平居中可以使用margin: 0 auto;属性来实现,但是此刻块级元素还在标准流中,且块级元素的位置自由度低。

    所以我们可以将块级元素定位(固定定位或者绝对定位),并设置水平或者垂直方式达到相对于浏览器或者父盒子50%的位置,然后再让元素回退自己宽度或者高度的一半,这样就能实现块级元素垂直或者水平居中的效果。

    在块级元素回退自己宽度或者高度一半时,只能设置margin-left或者margin-top,并没有margin-right或者margin-bottom两个属性。

    18.透明度 opacity

    所有浏览器都支持opacity属性,但是IE8以及更早的版本支持替代的filter属性。

    opacity属性在设置透明度时,元素的内容也会随之透明,会使用户看不清具体的内容。

    所以我们可以对元素设置背景颜色的透明作为突出点,具体属性为:background: rgba(0,0,0,.3);

    其中rgba的值分别为:r代表红色值;g代表绿色值;b代表蓝色值;a代表透明度。a代表的透明度和opacity一致,取值范围为0~1,但是这里的a值只改变背景颜色的透明度,不影响元素的内容。

    19.相邻元素的层级

    由于定位元素的层级关系,相邻多个元素设置同样的定位,这时选中前面元素时会出现元素显示不全的问题,如以下代码:

     <style>
            * {
                margin: 0;
                padding: 0;
            }
            div {
                 200px;
                height: 500px;
                border: 10px solid blue;
                float: left;
                margin-left: -10px;
                position: relative; /*定位了的元素,默认的都会有层级的概念,而且默认的层级都是0*/
            }
            div:hover {
                border-color: red;
            }
        </style>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>

    这时选中其中前面的div时,它的边框会有部分被后面的div覆盖了,如果想要将它全部显示出来,需要在hover中增加其定位后的层级,即增加如下代码:

    div:hover {
                border-color: red;
                position: relative;
                z-index: 1;
            }

    提高该div触发时的层级。

  • 相关阅读:
    异步加载技术实现瀑布流效果
    点击向下展开的下拉菜单特效
    几个个实用的PHP代码片段【自己备份】
    cache和buffer区别探讨
    windows 文本文件放到linux下使用
    制作rpm包
    mariadb在线热备份做主从
    检查目录下备份文件的脚本
    different between method and function
    mysql忘记root密码解决
  • 原文地址:https://www.cnblogs.com/chendu/p/5705780.html
Copyright © 2020-2023  润新知