@heqinglin
2019-01-14T16:39:37.000000Z
字数 2181
阅读 99
css
CSS不是一门很复杂的语言,通常可以在短时间内学会,会导致很多知识点停留在表面。
它是网页视觉呈现中最富创造力的语言,有着赋予页面生命的神奇力量。一个页面从布局到效果到响应式无不体现着css的智慧。
一个专业的前端实现,不应该如蜻蜓点水,对css要充分了解,才能发挥出价值,才能把每一个元素变成强健的战士,共同组合成优质的页面。
死亡10连问
- 行内元素拥有盒模型吗?
- 可以设置宽度和高度吗?
<input> <select> <button>
是什么元素?- 行内元素浮动后,display会变成什么?
- 行内元素可以包含块级元素吗?
- 行内元素可以相互嵌套吗?
- 哪种不可以嵌套?
- 块级元素可以相互嵌套吗?
- 哪种不可以嵌套?
- margin 在行内元素和块级元素的表现是什么样的,那么padding呢?
答案
- 行内元素拥有盒模型吗?
答:有- 可以设置宽度和高度吗?
答:不可以<img> <input> <select> <button>
是什么元素?
答:替换元素- 行内元素浮动后,display会变变成什么?
答:inline-block- 行内元素可以包含块级元素吗?
答:知识扩展:见文章底部*2- 行内元素可以相互嵌套吗?
- 哪种不可以嵌套?
- 块级元素可以相互嵌套吗?
- 哪种不可以嵌套?
- margin 在行内元素和块级元素的表现是什么样的,那么padding呢?
相邻元素重叠 父子重叠
如果两个margin都是正值,那么取margin值最大那个,例如父元素设置margin-top为20px,而子元素也设置了margin-top为50px,那么最终是以子元素的margin-top为准;
如果两个margin值为一正一负,则最终的margin值以这两个margin值相加的结果为准;
如果两个margin值都为负数,则取这两个负margin值中绝对值最大的那个负margin值为准;
css尽量不要用小数,除了增加计算压力,不同浏览器下问题多,css计算和渲染是两回事
background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
百分比是根据父层的宽度计算的,padding,margin这样的属性上下用百分比的时候,最终的结果是根据父层的宽度计算的,而不是根据父层的高度,响应式调整时,通常父级宽度会发生较大改变。
建议: margin padding上下不用百分比,不利于间距的统一。
标签的权重为1,class的权重为10,id的权重为100,行内样式1000。数值只是便于理解,10个class权重并不能干掉1个id
空间占据
回流和渲染
株连性
- 替换元素:替换元素根据其标签和属性来决定元素的具体显示内容,几乎所有的替换元素都是行内元素,其表现类似于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)。元素不属于任何一个类别,被称为穿透的;元素可能属于不止一个类别,称为混合的。