getability eleven--for-end review

text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

把文本排列到中间。作用在block元素上,能让块级元素内的inline元素和inline-block元素水平居中。

IE 盒模型和W3C盒模型有什么区别?

getability eleven--for-end review_第1张图片
盒模型
  • W3C盒模型
    • 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
  • IE盒模型
    • IE盒模型的计算方式和W3C的很相似,但有一点是非常不同的,这就是:填充和边框并不被包含在计算的范围内。

    • 总宽度 = margin-left + width + margin-right

    • 这就意味着一旦元素拥有横向的填充和/或边框,实际的内容区域(content area )就要扩大来创造出他们占据的空间。

*{ box-sizing: border-box;}的作用是什么?

  • box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
    例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。


    getability eleven--for-end review_第2张图片

line-height: 2和line-height: 200%有什么区别?

  • 计算方法的区别。
    数值:继承的时候,浏览器会先将line-height这个属性继承给子元素,再由子元素计算。
    百分数:继承的时候,浏览器会先将行高对应的具体的数值计算出来以后再继承。

inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

  • inline-block是结合了inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。
  • 缝隙是什么呢,它们是空白符。
  • 要去除空白符产生的间隙,首先要理解空白符归根结底是个字符,通过设置font-size属性可以控制产生的间隙的大小。设置font-site属性为0px。
    高度不一样的inline-block元素默认基线对齐,设置vertical-align:top 实现顶端对齐。

CSS sprite 是什么?

雪碧图;把小图片整成大图,减少请求,减轻服务器压力;

让一个元素"看不见"有几种方式?有什么区别?

  • display:none;(脱离文档流 不占据位置)
  • opacity:0,(透明但仍然在文档流中)。
  • visibility:hidden,基本与opacity一致。
  • text-indent:让某段文字彻底移走,表面上看不到,但是元素依旧在原地.
  • z-index:设置为无限大的值如9999;或-9999让其覆盖或者被其他元素覆盖.(同级)
  • 用一个设置为inline-block,设置宽、高并让它移动到某个位置然后设置-背景色为白色,实现一个遮罩的方式。

实现雪碧图效果

  • 使用 CSSsrpite 实现如下效果
    • 效果图

9/19/2017

你可能感兴趣的:(getability eleven--for-end review)