CSS 面试总结

1、 插入样式表的三种方法

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 优先级+作用域+书写顺序

2、 盒子

标准盒子：Margin(外边距) - Border(边框) - Padding(内边距) - Content(内容)
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
怪异盒子：width指的是内容、边框、内边距总的宽度（content + border + padding）；width + margin

3、visibility and display

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

4、选择符

id选择器(#myid) 类选择器(.myclassName) 标签选择器(div,h1,p)
CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器
子代选择器(ul>li 以大于号分隔) 后代选择器(li a 以空格分隔)
相邻兄弟选择器（以加号分隔） 普通兄弟选择器（以破折号分隔）
通配符选择器(*) 属性选择器(a[rel=“external”]) 伪类选择器(a:hover,li:nth-child)
可继承的样式： font-size font-family color
不可继承的样式： border padding margin height width

5、Position

Static：
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效
Relative:
生成相对定位的元素，相对于其正常位置进行定位
Absolute:
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
Fixed:
生成绝对的元素，相对于浏览器窗口进行定位
Sticky:
基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
Inherit:
规定应该从父元素继承 position 属性的值。

6、Flex布局

Justify-content: flex-start | flex-end | center | space-between | space-around

Align-items: flex-start | flex-end | center | baseline | stretch

7、浏览器

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性

8、图片加载优化

CSSSprite 减少对服务器请求 将小icon合并成一张图片,只需要加载一次这样就可以节约大量请求
SVGSprite 体积小，矢量
Iconfont 体积小，矢量，集成度高
Base64减少http请求，也不占用服务器的内存资源，缺点在于base64格式的图片比原图大，占用了更多的存储空间，而且浏览器不会对该资源进行缓存。
图片懒加载使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。

9、清浮动

清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示：1、父级div定义height 2、最后一个浮动元素后加空div标签 并添加样式clear:both。3、包含浮动元素的父标签添加样式overflow为hidden或auto。 4、父级div定义zoom

10、CSS特性

过渡、动画、形状转换、选择器、阴影、边框图片、边框圆角、反射、文字、换行、超出省略号、多行省略号、文字阴影、颜色、渐变、滤镜、弹性布局

11、居中

12、常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序

13、@import 和 link

link引入的css在加载页面时同时加载，而@import中的css要在页面加载完毕后加载
link是html提供的标签，不仅可以加载css文件，还能定义 RSS、rel 连接属性等。而@import是css中的语法规则
link属于XHTML标签，而@import是CSS提供的。
import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
link方式的样式权重高于@import的权重。
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

14、BFC规范（块级格式化上下文 block formatting context）

Block-level box + Formatting Context
它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
触发条件(满足一个)：

• 根元素，即HTML元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed
  特性：阻止垂直外边距折叠 包含浮动元素

15、行内元素 块状元素 行内块状元素

(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素

16、居中大汇总

• 元素居中对齐水平居中对齐一个元素(如
  ), 可以使用 margin: auto;设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。
  .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
• 文本居中对齐
  如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
  .center { text-align: center; border: 3px solid green; }
• 图片居中对齐
  要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
  img { display: block; margin: auto; width: 40%; }
• 垂直居中对齐 - 使用 padding
  .center { padding: 70px 0; border: 3px solid green; }
  如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
  .center { padding: 70px 0; border: 3px solid green; text-align: center; }
• 垂直居中 - 使用 line-height
  .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; }
  /* 如果文本有多行，添加以下代码: */
  .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }
• 垂直居中 - 使用 position 和 transform
  .center { height: 200px; position: relative; border: 3px solid green; }
  .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

17、隐藏页面元素

• opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
• visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了
• overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互
• display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
• z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
• transform: scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

18、em\px\rem

px：绝对单位，页面按精确像素展示。
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持

19、Css Sprites

是什么 ？
雪碧图也叫CSS精灵， 是一CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图。
如何操作？
使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。 使用图片时，将相应的类添加到你的元素中。
好处：
减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）
提前加载资源
不足：
CSS Sprite维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片
加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个连接通道搞定