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

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

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

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

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

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

正常场景下：

<style>

    .father {

        width: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 {

        width: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.当使用width:100%的时候 也要注意其基准点到底是谁：

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

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

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

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

css的继承之width属性（容易忽略）的更多相关文章

  1. CSS2.1SPEC：视觉格式化模型之width属性详解(上)

    在介绍了包含块之后,CSS2.1标准中介绍了width属性和height属性,这两个属性在我们的页面布局中也发挥着重要的作用.在盒模型中,width和height包围了一个框的内容区域(content ...

  2. css 百分比继承关系的探讨

    引入:近日在回顾css基础的时候发现了一个有趣的问题,就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算,还是继承父级根据百分比计算过后的绝对值.下面举一个简单的例子来描述这一个问题, ...

  3. css中 Span 元素的 width 属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  4. 1.写页面 2.css的继承属性有哪些 3.margin对布局的影响

    1. sparent 透明的 2. placeholder 提示语 写页面 1.搞清结构层次 2. 保证模块化 让它们之间不能收到影响. (1) 元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级 ...

  5. css 可继承属性 display:inline-block 历史

    1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...

  6. css中span元素的width属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  7. css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  8. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  9. HTML <img> 标签的 height 和 width 属性

    定义和用法 <img> 标签的 height 和 width 属性设置图像的尺寸. 提示:为图像指定 height 和 width 属性是一个好习惯.如果设置了这些属性,就可以在页面加载时 ...

随机推荐

  1. Python核心技术与实战——六|异常处理

    和其他语言一样,Python中的异常处理是很重要的机制和代码规范. 一.错误与异常 通常来说程序中的错误分为两种,一种是语法错误,另一种是异常.首先要了解错误和异常的区别和联系. 语法错误比较容易理解 ...

  2. DDD领域驱动设计初探（四）：WCF搭建

    前言:前面三篇分享了下DDD里面的两个主要特性:聚合和仓储.领域层的搭建基本完成,当然还涉及到领域事件和领域服务的部分,后面再项目搭建的过程中慢慢引入,博主的思路是先将整个架构走通,然后一步一步来添加 ...

  3. httprunner

    https://cn.httprunner.org/quickstart/ httprunner官方 https://testerhome.com/opensource_projects/httpru ...

  4. SSM框架整合之单独整合Mybatis

    整合步骤 导入必须jar包 mybatis核心jar包 mybatis依赖jar包 数据库驱动包 建立数据库表 建立实体类 建立Mapper接口 建立sql映射文件 <?xml version= ...

  5. 原生JS 将时间转换成几秒前,几分钟前…常用于评论回复功能

    //格式化时间 留备用~ function getDateDiff(dateStr) { var publishTime = dateStr / 1000, d_seconds, d_minutes, ...

  6. .Net 网站配置文件 webconfig 配置。 字体图标+视频播放 以及 文件上传

    ASP.NET MVC 上传大文件时404 原来IIS7的上传文件大小,即便是在经典模式下,也一定要在system.webServer里设置,加上去就OK了 <system.webServer& ...

  7. Jupyter配置Spark开发环境

    兄弟连大数据培训和大家一起探究Jupyter配置 Spark 开发环境 简介 为Jupyter配置Spark开发环境,可以安装全家桶–Spark Kernel或Toree,也可按需安装相关组件. 考虑 ...

  8. 一本通例题埃及分数—题解&&深搜的剪枝技巧总结

    一.简述: 众所周知,深搜(深度优先搜索)的时间复杂度在不加任何优化的情况下是非常慢的,一般都是指数级别的时间复杂度,在题目严格的时间限制下难以通过.所以大多数搜索算法都需要优化.形象地看,搜索的优化 ...

  9. 学习C#20天有感

    自学C#有20多天了,期间出差去深圳一周,每天平均学习4小时左右,看书+视频,之前有点C语言基础(仅限于基础哈哈),计划30内把C#的基本语法和SQL的基本语法熟悉,把面向对象相对深入的理解一些,然后 ...

  10. url传输中+转为%2B取到变空格的问题

    一个加密串,通过url传过来后怎么也解密不了. 原串: h1tQYMmnx7jdvowi9KnaEM5dHfamJ+rbaRnvhwhUmRAvyxpA2AGzszx5k9K0qdhiQUq7m42S ...