css 中宽高为什么没有继承？

来源：蜘蛛抓取(WebSpider) 时间：2022-05-11 02:55 标签： css哪些样式可以继承

想想自己为什么要写这个，难道不是因为这篇《》文章最近被转载的多，比较多而凑热闹蹭热点？显然，肯定是因为这样我才打算写的。而且还有就是，我的公众号也很久没有更新了，微信说长期不更新会关掉公众号的，怕……

对于 CSS 方面的工作以及跟 CSS 有关的东西，我已经有一些时间没有接触了，自从离开上家公司到了目前所在的公司，处理小程序方面的事情以后，有关 CSS 的内容我都只是大概瞄一下，没去过多思考。看了这篇文章后，发觉自己再不思考，真的是要废了。

根据这篇文章的题目以及答案，再结合自己的一些经历以及想法，稍微理一理，不对的请喷，毕竟我所考虑的点还是很有限的。

问题直接复制过来，那篇文章的答案引用部分，在引用的答案下面附带我个人的一些看法。

首先抛开所谓的标准不说，因为这个标准是 W3C 那边制定后跟各大厂商沟通去做统一的。在这个答案中，如果按照严格来说，首先会问基本怎么计算，就像上面这个答案，不过需要注意一下顺序。

标准的盒模型是基于 doctype 正确书写的情况下，并且是高于 IE6 的浏览器才会有的，如果是低于 IE6 的浏览器，就算是正确的 doctype 的书写情况下也是进入怪异模式的；在 IE 浏览器中如果写错了 doctype 或者是 doctype 之前有其他字符，那么可能就让 IE 进入怪异模式，从而导致浏览器解析元素盒模型出现问题，比如：

这种情况下就会让低版本的 IE 进入怪异模式，导致的可能不仅仅只是盒模型计算问题，还有可能是其他的一些情况，早年之前有不少公司直接利用这种方式对低版本和高版本的浏览器做样式上的区别操作对待。

附带一条 URL： 供参考学习。

  • 根据 box-sizng 改变的盒模型的计算方式，跟这个标准盒模型以及怪异模式的盒模型的计算方式有什么区别？

当我们了解一个元素的盒模型之后，其实对于这个的理解就简单很多了，比如我们可以这样理解，然后延伸来说明：

  • content-box：一个标准模式下的盒模型的计算方式

  • border-box：一个怪异模式下的盒模型的计算方式

目前来说，低版本的 IE 已经逐渐淡出了大家的视线了，所以，怪异模式和标准模式已经不再有太多人去关注，而且 doctype 也基本上会在各种编辑器中自动添加为 <!doctype html> 了，但这不代表我们不会在意盒模型的计算，只是不在意怪异模式和标准模式的浏览器解析方式。

在现在移动端中，很多时候为了便于盒子的计算，我们会使用 box-sizing:

注：省略部分原文的答案

这个问题应该来说是两个问题，分别是选择器和属性的问题，或许可能是考核一个人对 CSS 选择器的了解程序以及对 CSS 属性的掌握程度吧。对于这个问题，个人觉得并不会要求把所有的都回答出来，要真都回答出来了，那就可能是背课文了。

这是早之前我整理的一份有关选择符的图，大家可以感受一下。

这图已经好久没有更新了，可能有一些新的草案没增加，不过无所谓拉，这么多东西，目前我们能使用到也就那么几个，也就是原文中所提供的答案。

那么对于哪些属性可以继承这个问题，这又是一个很大的话题了，可能需要对 CSS 的所有属性都进行一次归整才会有一个相对比较完整的结果。这里我就提一个在原文答案中提到的可继承属性中的 font-size 这个属性。

  • h1 系列的标题元素标签在浏览器默认样式中是使用了 em 作为单位的，会根据父级的 font-size 而改变（讲真，这到底算不算继承呢，）

  • input 系列的控件元素，是直接有浏览器默认文字大小，并且是 px 作为单位的（这个又是因为已经被定义过了属性，但实际上应该算是继承了吧，只是权重值不够高，无法覆盖了 body 的 font-size）

在这个问题中，提到了一个优先级：

不知道是不是跟下一个问题搞混了，但是这里应该是少了一个 style 属性吧。

并且我没看懂为什么原文的答案这里有一个中括号，是想说代表这个是可选的呢，还是怎么样呢。

这个我觉得吧，并没有任何问题，不过在面试的时候，提到了这个之后，可能会被问其他相关的问题。

选择符优先级的拓展问题：

  • 有 11 个元素选择符的优先级跟 1 个 class 选择符优先级哪个高呢？

  1. !important声明的样式优先级最高，如果冲突再进行计算。

  2. 如果优先级相同，则选择最后出现的样式。

  3. 继承得到的样式的优先级最低。

这三点概括的并不是十分全面吧，在面试的过程中，如果面试官提到了有关选择符优先级的问题，那么可能会给几个 demo 来让你想一下哪个文字是什么颜色之类的，最后再问原理。

这个可以说的内容其实也挺多的，还是可以参考之前那张图，具体的哪些是伪元素选择符哪些是伪类选择符，根据图中的所列的情况可以一目了然看到。

  • :nth-child(an+b) 可以做的 XXX 事情，我们应该怎么实现（具体可能会根据不同面试官给出不同的题目而定）；

诸如此类的问题很多，在 CSS3 中对于选择符可以玩的情况太多了，就看怎么去想这个问题，但只要掌握了原理，无论面试官怎么去改变，最终原理是差不多的，万变不离其宗嘛，对吧。

看到这个问题，我能想到的是，果然水平垂直居中的题目会出现啊。

一个 div 元素的居中，这里并没有提到说这个 div 标签使用的是什么类型的 display 值，那么对于我们来说可以拓展的方式就非常非常多了。

那么这里提到的是块级元素，那么我们可以假设一下，如果我们把 display: block; 换成了：

接着就可以通过这个问题延伸出第二个问题：如何居中一个浮动元素。

这里提到的一个点是，居中一个浮动元素，并没有说是水平居中还是垂直居中，或者是两者并存，也并没有说这个浮动元素是否有子元素或者是父元素，那么可操作的方式又有很多了。

如果只是水平居中的话，前提是浮动了，当设置了 float 之后，使用 margin: 0 auto; 方式居中是不可能的了，如果只有一个元素的话，那就只能通过原文答案中提到的通过 position:

不过呢，仅仅只是水平居中的一个浮动元素的话，如果存在父级元素，可以考虑使用“float: center;”，嗯，这里是加引号的，并不是真的有这个属性值。

部分代码是这样的，具体的可以看  这里，这个方法在几年前还是用的比较多的，尤其是在水平居中的一个分页数控件。

反正不管怎么样，这个是带有浮动属性的元素，进行了居中的操作了。如果有垂直居中的话，就按照原文答案的方式来操作就可以了，毕竟浮动了之后 display 的属性值是 block，不会改变的。

如何让绝对定位的div居中？

这个问题我就没看明白跟上面那个浮动元素中使用了绝对定位方式居中有什么区别了。无非就是 margin 或者 transform 的方式来操作。

对于水平垂直居中的方法，网络上有很多很多的文章了，不同的方式会带来不同的效果情况。在日常使用的过程中，我们是会根据页面的实际需求情况而采用不同的居中方式，原理都差不多，只是实现的方式不同。对于这个题目，总而言之一句话就是：如何做好一个元素的居中。

小小的结束一下，嗯，不是小小的总结，是小小的结束，写这些东西真累，偷懒花一点时间写一下，回头一看，原来才写 7 点，后面还有那么多，先这样吧，后面看情况再说了。

而且说实在的，目前这个写的的内容其实也很笼统，并不全面。

css 子元素继承父元素的高度

父元素中有a、b两个子元素，a高度为300px，撑开父元素也是300px，此时想让b也是300px。

会发生什么事是，使用CSS添加的内容继承span（字 '随机'）的宽度。有没有办法删除继承的宽度没有增加的宽度值来覆盖继承

什么你”因为元素使用display:inline呈现，所以重新寻找white-space:nowrap;。它实际上并没有继承width，因为BoltClock指出它是而不是隐式继承的属性，而是用允许包装填充父元素。

尝试使用不同的值打content，看到自己（即文本比父元素，文本短无空格等）

我要回帖

更多关于 css哪些样式可以继承 的文章

 

随机推荐