CSS篇

display: none;和visibility: hidden;的区别？

两个都可以隐藏元素，display: none不占用空间。visibility:hidden仍然占用空间

CSS选择器优先级怎样的？如果我在class里面写了三个class，例如<p class="class1, class2, class3">，会最终用那个?

!important > [ id > class > tag ] 

这个和class1, class2, class3 在元素中顺序无关，而与css文件里面写的顺序有关，css文件里，越后面的优先级越高。

子元素如何垂直水平居中? 你会用哪几种方式？不使用margin和padding的情况下

方法一：使用flex, 无论子元素是行级元素还是块级元素，都能搞定

.parent {
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
}

方法二: 如果子元素是行级元素, text-align和line-height就可以解决

.parent {
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px; // Same as height
}

如果子元素是块级元素，使用table-cell  + vertical-align也可以解决

.parent{
  display: table-cell;
  vertical-align: middle;
}

.child {
  margin: 0 auto;
}

方法三：transform可以解决

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%; 
  left: 50%; // 从相对父元素宽高50%的地方开始绘制子元素
  transform: translate(-50%, -50%); // 把绘制好的子元素，往上和左边，平移子元素50%的宽高
}

Float布局有哪些缺陷？如何清除浮动？

使用float之后，元素跳出文档流，容易引发父容器塌陷，最好的解决方式是给复用器加上::after伪类进行清除浮动

CSS Sprite（雪碧图，精灵图） 是什么，谈谈这个技术的优缺点？

就是把很多图标合并到一张图上，然后根据图片的位置（background-position）加上显示的宽高来控制具体用哪个图标，这样可以减少网络请求，但是制作和使用会显得复杂一些。

标准盒子模型和IE（怪异）盒子模型理解多少？

box-size：content-box是标准盒子模型，实际的区域是padding + border + content，content区域就是设置的元素宽度，padding和border会占用外部空间

box-size：border-box的话，元素的宽度为padding + border + content，元素设置了宽度，不会占用外部空间。

我们会在写css的时候做一些标签选择器的初始化样式？为什么？比如：

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}

ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

为了保证默认的标签样式在不同浏览器能有一致的效果

理解BFC、IFC、GFC 和 FFC

BFC（Block formatting contexts）：块级格式上下文

如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC 布局规则：
1. 内部的 Box 会在垂直方向，一个接一个地放置。
2. 属于同一个 BFC 的两个相邻的 Box 的 margin 会发生重叠
3. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置 float
4. BFC 的区域不会与 float box 重叠。
5. 计算 BFC 的高度，浮动元素也参与计算

属于同一个BFC的两个相邻Box的margin会发生重叠, 可以使用BFC的隔离特性来消除重叠

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

IFC（Inline formatting contexts）：内联格式上下文

GFC（GrideLayout formatting contexts）：网格布局格式化上下文

FFC（Flex formatting contexts）:自适应格式上下文

inline-block 之间的间隙如何去掉？

两个并列的 inline-block 中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。

解决办法：

  1. 删除两个标签间的空格，但是这样 html 排版不好
  2. 容器元素 font-size: 0 然后再在里面再重新设置字体大小

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高

纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px

百分比：将计算后的值传递给后代

文字和图片放在一起，为什么无法底部对齐

因为 img 也相当于一个 inline 的元素， inline 就要遵守行高的构成，它会按照 base 基线对齐，基线对齐的话那么它就会和底线间有一个缝隙。

对于img，因为它会遵守文字对齐方案，那么就把图片的对齐方式修改为 vertical-align: bottom。或者让他display: block，这样图片虽然会换行，但是没有间隙了

vertical-align什么时候生效

父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用

当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，无法子元素居中对齐父元素

如何让文字换行

word-wrap，word-break，white-space都可以做到
word-wrap: normal;遇到空格才换行
word-break：break-all；把所有字符（包括空格）当一行，遇到边界换行
word-break：break-word；先按空格换行，再拆分单词和word-wrap：break-word一样
white-space：normal；正常遇到空白换行
white-space：no-wrap；空白都不换行，一行显示所有

word-wrap 和 word-break在flex布局下的效果，word-wrap不能换行，word-break可以。

但是如果二者都有width或者min-width限制，效果一样。

  <divstyle="border: 1px solid red; width: 200px; height: 200px; display: flex;">
    <divstyle="flex: 1;word-wrap: break-word;">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
    <divstyle="min-width: 100px;border: 1px solid green">sss</div>
  </div>

  <divstyle="border: 1px solid red; width: 200px; height: 200px; display: flex;">
    <divstyle="flex: 1;word-break: break-word;">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
    <divstyle="min-width: 100px;border: 1px solid green">sss</div>
  </div>

如何控制单行显示且显示不下显示...

overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;

CSS 优化、提高性能的方法有哪些？

多个 css 合并，尽量减少 HTTP 请求
css 雪碧图
抽象提取公共样式，减少代码量
选择器优化嵌套，尽量避免层级过深 （用‘>’替换‘ ’）
属性值为 0 时，不加单位
压缩 CSS 代码
避免使用 CSS 表达式，它们要计算成千上万次并且可能会对你页面的性能产生影响。

CSS3 新特性你能说出哪些？

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
变形 transform
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform: translate(20px, 20px);
缩放 transform: scale(.5);

如何用CSS做一个勾号和一个三角形？

勾号：左边框和下边框，然后配合旋转
三角形：宽度为0，三边透明，一边着色

rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

伪元素和伪类的区别和作用？

伪元素:在内容元素的前后插入额外的元素或样式类似::before, ::after,::first-letter，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素
伪类: 将特殊的效果添加到特定选择器上类似:hover,:first-child。它是已有元素上添加类别的，不会产生新的元素。

 

下一节：HTML篇