zoukankan      html  css  js  c++  java
  • 你不知道的css之 width “继承”篇。

    众所周知,css的三大特性分别是 继承性,层叠性,和优先级

    那么这里就详细说一下css中width的继承性及其特殊情况。

    继承性概念详解:css的继承性指的被包在内部的标签拥有外部标签的样式性,子元素可以继承父元素的属性。但也不是所有的css属性都有继承性的。

      常见的拥有继承性的属性以 text- 、 font- 、line- 开头的属性较为常用。其中也有例外如a标签的字体颜色是不继承的,它有它自己的默认颜色-蓝色,下划线等自带样式,h1~h6的字体大小是不继承的,跟a标签一样都是有自带默认值,除非单独为其设置样式 才可以改变。

    下面就来详细说一下width属性的“继承”关系。

    大家在写代码过程中,是不是经常遇到 个一个父div设置了一个width值 如.father {200px}; 其子元素div只设置一个高度就会有宽高了。

    正常场景下:

    <style>
        .father {
            200px;
            height:200px;
            background-color:green;
        }
        .son {
            height:100px;
            background-color:red;
        }
    </style>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>

    效果图:

    特殊场景一:

    那么如果子元素是一个内联元素,或内联块元素呢?会是什么效果?

    <style>
        .father {
            width:200px;
            height:200px;
            background-color:green;
        }
        .son {
            display:inline-block;
            height:100px;
            background-color:red;
        }
    </style>
    <body>
        <div class="father">
            <!-- <div class="son"></div> -->
            <a href="#" class="son"></a>
        </div>
    </body>

    你会发现只有一个绿色背景,红色子元素并没有显示出来。这表明只有块元素才可以默认“继承”其父元素的width.(项目中就遇到一个类似的坑,所以写此笔记记录一下)。

    特殊场景二:

    如果子元素是定位元素或浮动元素,其“继承性”还正常么?下面就用代码实验一下。

    .father {
            200px;
            height:200px;
            background-color:green;
        }
        .son {
            /* position:absolute; */
            float:left;
            height:100px;
            background-color:red;
        }
    </style>
    <body>
        <div class="father">
            <!-- <div class="son"></div> -->
            <div class="son">我是子元素</div>
        </div>
    </body>

    实验结果发现,.son的元素宽度只是其字撑开的那么宽,并没有“继承”其父元素的宽度。可见,浮动元素和定位元素也是不默认(不自动)“继承”其父元素宽度的

    当我们遇到这三种情况的时候,就需要为这些元素单独设置一下width。width的单位有固定单位和相对单位,你可以把它设置称一个固定值(200px),也可以把它设置为一个百分数(100%)。

    那么问题又来了,百分数是一个相对单位,它的基准是什么呢?是相对于谁的百分比呢?

    场景一中,其就是默认相对于其父元素.father的宽度。

    场景二中,float的子元素其width 百分数也是始终相对于其父元素.father而言, 但定位的子元素就比较特殊了:

      position为absolute的子元素

      (1) 如果.father是一个static的元素,则.son的宽100%是基于body说的。跟body的宽度一样大。

      (2) 但是如果.father也是一个定位的元素,设置了relative或absolut或fixed,则.son的width100%就是相对于.father而言的。否则就是相对于离其最近的一个拥有定位元素的父元素而言。

      position为fixed的子元素:

      其width的100%是相对于body而言。

      position为relative的子元素:

      不管直接其父元素是否为定位元素,其width100%始终是相对于其直接父元素而言的。

    总结:

    1.当符合css默认“继承”的情况下(子元素必须是块级元素且无定位或浮动),是不需要写width属性,就可以默认“继承”的。

        否则就要特殊声明一下width属性。

    2.当使用100%的时候 也要注意其基准点到底是谁:

    (1)对于使用position:relative的子元素或浮动的子元素,其基准点始终是基于其直接父元素而言的,跟其父元素是否有定位无关。

    (2)对于绝对定位position:absolute的子元素,其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位,则是相对于body而言。

    (3)对于使用position:fixed的子元素,其基准点就是body。跟父元素无关。

    如果还有其他特殊情况,欢迎大家评论指出哦。我会再做补充上去。

  • 相关阅读:
    SQL Server2008中删除重复记录
    Php环境在Windows (server 2003) 服务器部署标准 白丁简明版
    国外服务器鸟文windows,时间12小时制,如何改成24小时呢?我来告诉你
    将Capicom调用代码封装到ActiveX——解决javascript调Capicom读取数字证书信息时,IE弹出安全提示的问题
    Linq处理List数据
    C#将窗口最小化到系统托盘,并显示图标和快捷菜单
    C# 将程序添加到启动项 (写入注册表),及从启动项中删除
    C#中string[]数组和list<string>泛型的相互转换
    IIS7.5部署ASP.NET失败
    IIS 7.5版本中一些诡异问题的解决方案
  • 原文地址:https://www.cnblogs.com/chenshanyuanzi/p/7698867.html
Copyright © 2011-2022 走看看