1. Pseudo-classes and pseudo-elements in CSS3
Pseudo-classes can be implemented by adding actual classes, pseudo-elements can be implemented by adding actual elements, the difference is whether abstraction creates new elements. The CSS3 standard is to use a single colon ":" for pseudo-classes and a double colon "::" for pseudo-elements, but before that, both pseudo-classes and pseudo-elements used a single colon ":". Note that when used, pseudo-classes, like real classes, can be used on top of each other; pseudo-elements can only appear once in a selector, and only at the end .
2 What is the difference between double colon and single colon in ::before and :after? Explain what these two pseudo-elements do.
Single colons (:) are used for CSS3 pseudo-classes, and double colons (::) are used for CSS3 pseudo-elements. ::before is a pseudo-element defined before the main content of the element with the existence of a child element. Does not exist in the DOM, only exists in the page. The two pseudo-elements :before and :after are new in CSS2.1. Initially, pseudo-element prefixes used single-colon syntax, but with the evolution of the web, in the CSS3 specification, pseudo-element syntax was modified to use double colons, becoming ::before ::after.
3. CSS priority
! important > Inline Styles > ID Selector > Class Selector > Tag Selector > Wildcard Selector > Inherit > Default
Weight calculation rules: the weight of the inline style sheet is 1000; the weight of the ID selector is 100; the weight of the Class selector is 10; the weight of the HTML tag selector is 1.
When the priority is the same, the principle of proximity is adopted, and the style that appears later overrides the style that precedes it.
4. Why are CSS selectors parsed from right to left?
CSS selectors are parsed from right to left. If you match from left to right and find that it does not conform to the rules, you need to backtrack, which will lose a lot of performance. If matching from right to left, first find all the rightmost nodes, and for each node, look up its parent node until the root element or the matching rule that satisfies the condition is found, then the traversal of this branch is ended. The performance of the two matching rules is very different, because the right-to-left matching filters out a large number of rightmost nodes (leaf nodes) that do not meet the conditions in the first step, while the performance of the left-to-right matching rules All wasted on failed lookups.
5. Font size font-size
When the unit is em, it is a multiple of the font size of the parent element; when the unit is %, it is the percentage of the font size of the parent element;
6. Line-height
Line height is the vertical distance between the baselines between the lines of the context. The baseline is an invisible line on which most of the letters sit. When the line height unit is em, the line height is a multiple of the current font size, and when the line height unit is %, it is a multiple of the current font size.
Vertically centering a single line of text: Set the value of line-height to be as large as height.
Vertical centering of multi-line text: You need to set the display property to inline-block.
7. What is the principle of creating a triangle with pure CSS?
Set the width and height of the element to 0, and set the three borders to be transparent.
8. Is the vertical percentage setting of an element relative to the height of the container?
When setting the width of an element and some properties representing vertical distance in percentages, such as padding-top , padding-bottom , margin-top , margin-bottom , etc., it is based on the width of the parent container, not the height.
9. Why initialize CSS styles
Due to browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, there will often be differences in page display between browsers.
10. Combine top and bottom margins
In standard typography flow, when two or more adjacent block-level elements meet in vertical margins, the vertical margins are combined into a single margin. If the combined margins are all positive values, the combined height is equal to the largest of the combined margin heights; if the combined margins are not all positive, the two block-level elements will be pulled closer together. Vertical distance, and even overlap:
(1) Merge the margins of adjacent elements - collapse
The margin-bottom of the upper element is merged with the margin-top of the lower element: when all are positive values, the combined height is equal to the largest of the combined margin heights; if not all positive values, the combined outer margin The height of the distance is the sum of the combined margins. When the sum is negative, adjacent elements overlap in the vertical direction, and the overlap height is equal to the absolute value of the sum of the margins.
(2) Merge the margins of the included elements: When the parent element has no content or the content is behind the child element, and there is no padding and no border, the top margin of the child element will be merged with the top margin of the parent element. The outer margin, which is the larger of the two, and the top margin is used as the top margin of the parent element. To prevent the upper and lower margins of the parent and child elements from merging, you only need to set the content in front of the child element or set the border or padding to the parent element, which can also be solved by triggering BFC.
11. Characteristics of block-level elements, inline elements and inline-block elements
(1) Block-level elements: a. Exclusive line; b. When the width is not set, the width automatically fills the width of the parent element; c. The width and height and the inner and outer margins in four directions can be set. Common block-level elements include div, p, h1~h6, ul, ol, etc.;
(2) In-line elements: a. Adjacent in-line elements will be arranged in the same row from left to right until one row cannot be arranged; b. The width and height cannot be set, and the width and height are determined by the length and height of the content ;c. You can set the padding in four directions and the left and right margins, but you cannot set the upper and lower margins; common inline elements include span, etc.;
(3) Inline block elements: a, and adjacent inline elements or inline block elements are arranged on the same line from left to right in sequence, until one line cannot be arranged (in addition, like inline elements, line breaks in the source code will be parsed space); b. You can set the width and height; c. You can set the inner and outer margins in four directions. Common inline block elements are input and img.
12. The value and function of display
inline (inline element); block (block element); inline-block (inline block element); table (table display); list-item (list item display); none (hidden)
13. What is the difference between setting display to none and setting visibility to hidden? What is the difference between visibility set to collapse in different browsers?
display设置为none则不显示对应的元素，在文档布局中不再分配空间；visibility设置为hidden则隐藏对应的元素，但在文档布局中仍然保留原来的空间。在Chrome中，visibility设置为collapse与visibility设置为hidden效果相同；在Firefox，Opera和IE中，visibility设置为collapse与display设置为none效果相同。
14.浮动（float）
元素设置为浮动以后，其display变成了block。
浮动元素的特征：（1）浮动可以让块级元素显示在同一行；（2）浮动使行内元素具有了块级元素的特征，即可以设置宽高和四个方向的内外边距；（3）浮动元素不设置宽高时，宽高由内容撑开；（4）当父元素没有设置高度，且所有子元素设置浮动后，父元素高度塌陷；（5）浮动元素会脱离文档流，提升层级，任何显示在浮动元素下方的元素将会在“上移”（使用BFC可以防止浮动元素覆盖文档流元素）；（6）浮动元素碰到包含它的边框或者浮动元素边框则停止。
15.解决父元素高度塌陷的问题
（1）设置父元素高度；（2）使用空div清除浮动；（3）使用伪元素（并将其display设置为block）清除浮动；（4）使用BFC来解决父元素高度塌陷问题；
16.触发BFC
（1）元素display设置为inline-block时触发BFC；（2）设置浮动触发BFC；（3）设置overflow为除默认值之外的其他值时触发BFC；（4）position设置为absolute或fixed；
17.position
（1）static（默认）；
（2）relative（相对定位）：a 相对于自身原始位置进行定位；b 不脱离文档流；c 提升层级；
（3）absolute（绝对定位）：a 相对于最近一个position不为static的祖先元素进行定位；b 脱离文档流；c 提升层级；d 绝对定位块级元素不设宽度时，宽度由内容撑开；e 绝对定位的行内元素可以设置宽高以及内外边距；f 触发BFC;
（4）fixed（固定定位）：a 相对于浏览器可视窗口进行定位；b 脱离文档流，提升层级，且不随滚动条滚动而变化；c 固定定位块级元素不设宽度时，宽度由内容撑开；d 固定定位的行内元素可以设置宽高以及内外边距；e 触发BFC。
18.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
scroll：必会出现滚动条；auto：子元素内容大于父元素时出现滚动条；visible：溢出的内容出现在父元素之外。
hidden：溢出隐藏。
19.水平居中的实现
（1）行内元素水平居中：把行内元素包裹在一个display属性为block的父元素中，并且给父元素设置text-align:center;
（2）单个块级元素水平居中：设置width及margin：0 auto；
（3）多个块级元素水平居中：（a）为多个块级元素设置display:inline-block属性，其父元素设置：text-align:center; （b）使用flex布局实现：在多个块级元素的父元素上设置display:flex;justify-content:center
20.垂直居中
（1）单行行内元素：设置子元素的line-height与父元素的height相等；
（2）多行行内元素：给父元素设置display: table-cell;vertical-align:middle；
（3）已知子元素宽度和高度时：在子元素上设置position：absolute；top:50%;left:50%(因为子元素的左右上下移动是以该元素的左上角的为顶点的，因此需要再利用margin-top和margin-left)再稍微调整。
21.水平垂直居中：
（1）单行行内元素：（a）img元素：在父元素上设置 display:table-cell；text-align：center ；vertical-align:middle ；（b）span元素：在父元素上设置text-align:center 自身设置line-height等于父元素的高度 ；
（2）单个块级元素：同时利用position和负margin;
（3）利用flex布局。
22.CSS3有哪些新特性？
RGBA和透明度；background-image、background-origin（背景图片定位区域）(content-box/padding-box/border-box) 、background-size（设置背景图片尺寸）、background-clip（背景图片绘制区域）(content-box/padding-box/border-box)；word-wrap（对长的不可分割单词换行）word-wrap：break-word；文字阴影：text-shadow；font-face属性：定义自己的字体；圆角：border-radius 属性用于创建圆角；边框图片：border-image；盒阴影：box-shadow；媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性。
23.box-sizing属性
用来控制元素的盒子模型的解析模式，默认为content-box。context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽；border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽。
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。
25 什么是响应式设计？响应式设计的基本原理是什么？关于Viewpoint？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。
26.CSS3转换transform、过渡transition和动画animation
转换transform：平移translate；旋转rotate；缩放scale；倾斜skew；
过渡transition：transition-property transition-duration transition-timimg-function transition-delay;
动画animation：animation-name(由@keyframes定义关键帧) animaiton-duration animation-timing-function animaiton-delay animation-iteration-count animaiton-direction
27.CSS3弹性盒子
display:flexbox；
flex-direction:raw/raw-reverse/column/column-reverse；
justify-content:flex-start/flex-end/center/space-between/space-around;
align-items:flex-start/flex-end/center/baseline/stretch;
28.多媒体查询
@media not|only mediatype and（expressions）{CSS代码}；
<link rel="stylesheet" media="mediatype and|not|only(expressions)" href>
29.property和attribute的区别：
property是DOM中的属性，是javascript的对象；attribute是HTML标签上的特性，它的值只能是字符串；每一个DOM对象都会有它默认的基本属性，而在创建的时候它只会创建这些基本属性，我们在HTML标签中自定义的属性是不会直接放到DOM中的。DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候在DOM对象上创建。如果在HTML标签对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面。property能够从attribute中得到同步，attribute不会同步property上的值。
30.页面导入样式时，使用link和@import有什么区别?
（1）link属于HTML标签，除了用于加载CSS外，还能用于定义RSS、定义rel属性等作用；而@import是CSS提供的，只能用于加载CSS；（2）页面加载时，link会被同时加载，而@import要引用的CSS等到页面加载完才进行加载；（3）link无兼容性问题，而@import存在兼容性问题。