CSS十问——好奇心+刨根问底=CSSer (转)

  • 时间:
  • 浏览:0

  第五问:不能 用CSS做出那我图标吗?比如那我三角形?那我小房子?

  当那我元素应用了CSS3的transform属性后,它的后代元素的fixed都将失效。http://www.w3.org/TR/css3-transforms/#issue-ca2c412c。不必 不能 利用这一Bug模拟出那我相对于某个中含块fixed的效果。

时刻保持好奇心

  图中红色框为span标签,天蓝色框为a标签。当设置span的左右margin为-1px时,其便会在左右各突出1px,造成这一1px圆角的视觉效果。同样的道理,在实现某些古老浏览器下的圆角与底色渐变的按钮时,通常也会利用到多层元素层叠制造视觉误差的原理。

  了解浏览器的工作原理不仅不能 认清CSS解析和渲染过程,不能 体会到重排和重绘所处的时机,这对大伙儿写出高效的CSS规则和JavaScript Dom操作有着非常深刻的指导意义。这一话题不必 ,目前我的水平不必 足以涉猎到此,等学有所成后我会再发一篇文章删改谈谈。这里有一篇经典的文章,感兴趣的不能 看看:浏览器的工作原理:新式网络浏览器幕后揭秘。不必 无法访问,查看此国内地址:w3ctech:浏览器的工作原理。

不必 要刨根问底!

  第一问:当margin的值为百分比形式时,为有哪些浏览器会根据父容器高度得出计算值?

  知道这一小tip的人那末了少数,那末是有哪些原理由于这一什么的问题呢?学习CSS就不能 刨根问底,一张图不能 把这一什么的问题说明白。

  在我却说 一篇博客检验你的前端基础——Sit the test中,聊到了margin值为<percentage>时的计算法律依据。假如有那我父容器高度100px,高度1000px,其子元素设置margin:20% 20%后的计算值应该为“margin:120px 100px”还是“margin:100px 100px”呢?按照那篇博客中的理论,第十几个 是正确答案。不必 在今天这篇文章中,我给出的答案是第那我肯定错,第十几个 不必 一定对。那我符合W3C标准的浏览器会根据父容器的高度进行计算,不必 这一仅限于书写模式为横向的却说 。不必 在横向排版时,高度“有迹可循”,不能 把浏览器高度作为参考,不必 高度是不固定的,不必 margin百分比值在计算都会参考父容器的高度。当书写模式改为纵向,其计算参考便会变为父容器的高度了。戳我查看DEMO(请在webkit内核或IE下查看)。

  在现代浏览器中,那我页面从请求到呈现,大致不能 经过解析-构建DOM树-构建呈现树(框架树)-布局(重排)-绘制等十几个 步骤。那我页面的展现并都会一蹴而就的,不必 分步骤有条不紊的进行。众所周知的样式皮层叠顺序和特异性计算所处在构造呈现树的过程中,不必 为了防止规则不止那我时的什么的问题。以上方提到的背景图案为例,浏览器计算完优先级后,不到后定义的背景图案规则被构建到呈现树上。接下来浏览器会进行重排和绘制,浏览器在绘制时才会请求背景图片规则用到的图片文件。这不必 为有哪些只发出那我HTTP请求的由于。

  同样,margin:auto会受书写模式的影响。当书写模式为纵向时,margin:auto垂直方向是不能 居中的,水平方向仍然不能 居中。不信?请自己写个demo试试吧。人太好受到书写模式影响的属性除了有有哪些外,还有margin折叠、padding百分比值的计算等。

  利用border互相覆盖呈现出的斜线,不能 模拟出多种多样的几何状。在CSS3中,每个元素都会::before和::after那我伪元素,对同那我标签,由CSS不能 操控的单位由那我变为那我,再添加绝对定位的辅佐,各种各样的社会形态被创造了出来。

  一个前端er对上方有有哪些什么的问题知道与否,无须影响他与否不能 完成那我项目,建设那我网站。不必 那末好奇心,我你会追究内在由于,仅抱着“让我你会知道那末多东西,反正我会用就行”另那我这一态度,那末他充其量与否那我“tcp连接员”,而非一位“工程师”。

  在页面的CSS中,会就看另那我的规则:

  那末何如构造那我BFC呢?1.float设置为非none值;2.overflow设置为非visible;3.display设置为table-cell,table-caption,inline-block;4.position设置为absolute或fixed。有有哪些法律依据刚好与上方提到构造BFC来清除浮动的法律依据相呼应。

  关于transform更多的影响不能 在张鑫旭的博客中就看:CSS3 transform对普通元素的N多渲染影响。

  最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个什么的问题,跟大伙儿分享一下学习CSS的某些体会,我人太好想科学学CSS,不能 保持一颗好奇心和刨根问底的劲头,而都会克隆好友粘贴,得过且过。自己能力有限,这篇文章从构思加完成用了四3天 ,不必 你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到某些东西;不必 你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,大伙儿一起讨论。

  不能 一阵一阵注意的是,在IE6,7下那末BFC这一概念,不必 有那我与BFC性质同类的概念:layout。在IE6,7中遇到的不必 bug不能 通过让元素has layout来防止,比如浮动margin双边距,躲猫猫,3像素间距等等。

  第八问:CSS规则根据优先级生效,低优先级的规则会被浏览器忽略还是覆盖?

  现在要实现另那我那我功能,通过CSS切换某个面板的显示或隐藏。当提到CSS,大伙儿自然而然想到了控制某个单一元素的样式,一旦涉及到多个元素交互,大伙儿往往使用JavaScript操作Dom。事实上这一需求不但不能 用CSS来实现,甚至实现法律依据不止这一,请狂戳DEMO:这一CSS法律依据实现面板隐藏和显示。

  你不必 会那末回答:使用 “>”,“_”,“*”等各种各样的符号来写hack。是的,另那我做没错,不必 不能 记住每个符号分别被有哪些浏览器识别,不必 写的太乱将造成代码 阅读起来十分困难。学习CSS不能 抱有这一质疑精神,有那末这一hack法律依据不能 不写有有哪些乱七八糟的符号,不必 代码易维护易读呢?大伙儿不能 看看好搜首页是为何在么在做的:在页面上方有另那我搞笑的话:

  这也是为有哪些大伙儿会在IEhack中一直就看“height:1%”、“zoom:1”、“display:inline-block”、“overflow:hidden”有有哪些字眼的主要由于,人太好不必 为了让元素has layout嘛!

  第三问:不能 让那我position:fixed的元素相对于那我容器定位而非浏览器视口吗?

  第七问:行内级元素不能 设置宽高吗?

  另那我做的优点不必 克服了使用特殊符号hack的有有哪些缺点,缺点是不能 写更多的代码,使页面增大。

  与上一问同类,这与布局相关。网页排版时,常规流的块级元素水平方向一直铺满浏览器窗口,垂直方向各块级元素按照先后顺序从上往下排列,当页面内容不必 时网页会出显纵向滚动条,不必 原理上纵向是不能 无限扩展的,计算时那末了那我固定的参考值,不必 纵向的auto无法生效。

  那我标签,放上去HTML中,不到代表这一语义。然而那我标签加CSS,则不能 创发明家 家 无限的不必 。请看DEMO:CSS实现三角形,小房子图案。

  所谓清除浮动,一般是为了防止子元素浮动由于父容器高度坍塌。目前有多种法律依据来防止这一什么的问题,最常见的有after伪元素,父元素设置“overflow:hidden”等等,请看DEMO:七种清除浮动的法律依据。

  提到position:fixed,不必 人都会说这是那我定位属性,与absolute的区别是它针对浏览器视口定位。我的博客导航栏不必 利用“position:fixed”属性,让其始终保持在窗口的最上方。不过还是无须忘记“世事无绝对”,CSS实现了那我position:fixed的元素相对于那我容器定位,请在FireFox下查看此DEMO。

  在我的却说 一篇博客中,提到了浏览器中CSS优先级的使用规则:多个优先级的样式都会被渲染,只不必足优先级会覆盖住低优先级,元素呈现为高优先级的样式。现在请考虑另那我那我什么的问题,在那我div应用了两条background-image规则,照却说 的理论来看,两条规则都会渲染,那末请问浏览器会请求被覆盖规则的背景图片吗?

  第九问:使用margin不能 做出圆角按钮的原理是有哪些?

  当那我常规流块级元素的margin属性左右值设为关键字auto,且它拥有固定高度时,它便会平分剩余的水平空间,居中显示。然而不必 设置上下值为auto,浏览器得到的计算值为0,无须起任何的效果。那末什么的问题来了,为有哪些垂直方向的auto不生效?

  第六问:让我你会写针对IE6,7的hack,该为何在么在写呢?

  学习任何一门语言,不必 那我事物都会能得过且过,抱着前人播种后人收的思想。纵然站在巨人的肩膀上不能 少走不必 弯路,不必 自己仍然要保持好奇心和刨根问底、质疑的精神。多想一下“为有哪些”,少记某些“该另那我做”,这在CSS的学习中尤其重要。

  不必 在IE6-7下,清除浮动除了不能 使用clear:both外(::after伪元素无法使用),另这一法律依据不必 让父元素has layout。

http://www.cnblogs.com/dongtianee/p/45610084.html

  当不到使用border-radius时,何如制造那我圆角按钮?现在有那我制造1px圆角的小技巧:button中嵌套span,设置span的margin为:“margin:1px -1px”。戳我查看DEMO。

  真实清况 是浏览器会聪明到只请求当前应用的背景图片。简单理解搞笑的话,浏览器只会为生效的CSS规则中的图片资源发出http请求。不必 深究搞笑的话,就不能 谈谈浏览器的工作原理了。自己目前水平不足,以下红色字体为自己理解,请选用性阅读。

总结

  第二问:margin:auto为有哪些不到实现水平居中,不到垂直居中?

  不必为自身内容形成新的块,而让内容分布在多行中的元素叫做行内级元素。此类元素不能 与其它行内级元素在同一行中显示而不必另起一行,同类span,strong。在面试时,当被问到行内级元素不能 设置宽高时,根据大伙儿的经验往往会回答不到。不必 另那我往往着了面试官的道,不必 有某些特殊的行内元素,比如img,input,select等等,是不能 被设置宽高的。那我内容不受CSS视觉格式化模型控制,CSS渲染模型无须考虑对此内容的渲染,且元素这一一般拥有固有尺寸(高度,高度,宽高比)的元素,被称之为置换元素。比如img是那我置换元素,当不对它设置宽高时,它会按照这一的宽高进行显示。不必 这一什么的问题的正确答案应该是置换元素不能 ,非置换元素不必能

  第四问:不能 用CSS实现面板的隐藏和显示吗?

  Block formatting contexts(BFC),块级格式化上下文是在CSS2.1中提出的那我概念,在布局中,BFC自成体系,对自己内部的元素负责,不必与浮动元素重叠,相邻BFC上下margin不必 会重叠。不必 大伙儿会通过构造那我BFC来防止margin重叠,清除浮动不必 实现那我双栏布局。

  人太好按照原理,这几种法律依据不能 归纳为这一:clear:both法和构造BFC法。

  CSS很简单,她的出显仅仅是为了排版。CSS很冗杂,那我简单的排版往往有N种防止方案。

  关于清除浮动更多的探讨不能 在一丝冰凉的博客中就看:有有哪些年大伙儿一起清除过的浮动。

  使用“clear:both”来清除浮动自然无须多说,那末有哪些是构造BFC法呢?

  第十问:清除浮动有N种法律依据,大伙儿间有有哪些一起点吗?

  某些元素同类table,input这一就has layout,那末何如让那我普通元素has layout呢?包括但不限于以下几种法律依据:1.position:absolute;2.float不为none;3.display:inline-block;4.height:除auto外任意值;5.width:除auto外任意值;6.zoom:除normal外任意值;7.overflow非visible(仅限IE7)。

  你能想象吗?有有哪些图标都会用CSS画出来的。要想了解更多的CSS3图标,不能 访问这一网站:http://www.uiplayground.in/css3-icons/

  第这一利用了label和checkbox,使控制方和被控制方不必能 有特定的HTML社会形态关系,不必 不能 额外的HTML标签来支持。第二种法律依据利用了hover和子元素选用器,第这一法律依据利用了focus和兄弟元素选用器,后这一都受限于特定的HTML社会形态。这一法律依据都只使用CSS实现了面板的隐藏显示。