[关闭]
@heqinglin 2019-01-14T16:39:37.000000Z 字数 2181 阅读 99

css高级篇之层叠样式表点豆成兵

css


CSS不是一门很复杂的语言,通常可以在短时间内学会,会导致很多知识点停留在表面。
它是网页视觉呈现中最富创造力的语言,有着赋予页面生命的神奇力量。一个页面从布局到效果到响应式无不体现着css的智慧。
一个专业的前端实现,不应该如蜻蜓点水,对css要充分了解,才能发挥出价值,才能把每一个元素变成强健的战士,共同组合成优质的页面。

死亡10连问

  1. 行内元素拥有盒模型吗?
  2. 可以设置宽度和高度吗?
  3. <input> <select> <button>是什么元素?
  4. 行内元素浮动后,display会变成什么?
  5. 行内元素可以包含块级元素吗?
  6. 行内元素可以相互嵌套吗?
  7. 哪种不可以嵌套?
  8. 块级元素可以相互嵌套吗?
  9. 哪种不可以嵌套?
  10. margin 在行内元素和块级元素的表现是什么样的,那么padding呢?

答案

  1. 行内元素拥有盒模型吗?
    答:有
  2. 可以设置宽度和高度吗?
    答:不可以
  3. <img> <input> <select> <button>是什么元素?
    答:替换元素
  4. 行内元素浮动后,display会变变成什么?
    答:inline-block
  5. 行内元素可以包含块级元素吗?
    答:知识扩展:见文章底部*2
  6. 行内元素可以相互嵌套吗?
  7. 哪种不可以嵌套?
  8. 块级元素可以相互嵌套吗?
  9. 哪种不可以嵌套?
  10. margin 在行内元素和块级元素的表现是什么样的,那么padding呢?

margin重叠知多少

相邻元素重叠 父子重叠

css小数计算

css尽量不要用小数,除了增加计算压力,不同浏览器下问题多,css计算和渲染是两回事

background css3实用性

background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

margin padding上下百分比到底好不好?

百分比是根据父层的宽度计算的,padding,margin这样的属性上下用百分比的时候,最终的结果是根据父层的宽度计算的,而不是根据父层的高度,响应式调整时,通常父级宽度会发生较大改变。
建议: margin padding上下不用百分比,不利于间距的统一。

css选择器的权重

标签的权重为1,class的权重为10,id的权重为100,行内样式1000。数值只是便于理解,10个class权重并不能干掉1个id

display:none和visibility:hidden的区别?

空间占据
回流和渲染
株连性


知识扩展

  • 替换元素:替换元素根据其标签和属性来决定元素的具体显示内容,几乎所有的替换元素都是行内元素,其表现类似于inline-block
    非替换元素:即将内容直接表现给用户端
  • w3c HTML4\XHTML标准里规定,行内元素只可以包含行内元素,块级元素可以包含行内元素和块级元素。
    html4标准下的的任何doctype声明都不允许a标签嵌套div,这属于语义嵌套约束。除此之外,还有严格嵌套约束,例如a标签不允许嵌套交互式元素如 a标签 button select等,p标签不允许嵌套块级元素。
    严格约束在所有的浏览器下都不被允许,而语义约束,浏览器大多会容错处理,但生成的文档树可能不太一样(因为标准没有定义容错行为)。因此你经常会看到行内元素不要嵌套块级元素的说法,它不符合标准,而且可能会导致偏离预期的结果。其他语意嵌套约束还有:li只能用于ul或ol下,dd、dt用于dl下,thead、tbody tr td 用于table下。

  • html5标准
    html5出现之前,元素按照block、inline、inline-block来区分, 依靠css来区分标签,显然不是一种合理的方式。在html5中,元素不再按照display来区分,而是按照元素内容模型(content model)来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一个类别,被称为穿透的;元素可能属于不止一个类别,称为混合的。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注