1. Interviewer: Tell me about your understanding of the box model?
The CSS box model is essentially a box, which includes: content, padding, border, margin. Box models in CSS include the IE box model and the standard W3C box model.
In the standard box model , width refers to the width of the content part.
In the IE box model , width represents the width of the three parts content+padding+border
So there is a difference when calculating the width of the box:
Standard box model: total width of a block = width+margin (left and right) + padding (left and right) + border (left and right)
Weird box model: total width of a block = width+margin (left and right) (both width already includes padding and border values)
2. box-sizing attribute
The box-sizing property in CSS defines how the engine should calculate the total width and total height of an element
box-sizing:content-box|border-box|inherit:
content-box: The width/height of the element does not include padding, border,. 【Standard box model】
border-box: The width/height of the element includes padding and border. [IE box model]
inherit: Inherit the box-sizing value of the parent element.
3. Interviewer: What are the CSS selectors? priority? Which attributes can be inherited?
Commonly used css attribute selectors are:
id selector (#myid)
class selector (.myclass)
attribute selector (a[rel="external"])
Pseudo-class selectors (a:hover, li:nth-child)
tag selector(div, h1,p)
Sibling selector (h1+p)
child selector (ul > li)
descendant selector (li a)
Wildcard selector (*)
priority:
!important
inline styles (1000)
ID Selector (0100)
Class Selector/Attribute Selector/Pseudo-Class Selector (0010)
Element Selector/Pseudo-Element Selector (0001)
Relationship Selector/Wildcard Selector (0000)
The style attribute marked with !important has the highest priority; when the source of the style sheet is the same: !important > inline style > ID selector > class selector > label > wildcard > inheritance > browser default attribute
Inherited properties:
font family attribute
font-family |
font-weight |
font-size |
font-style |
font |
font weight |
font size |
font style |
Text Series Properties
text-indent |
text-align |
line-height |
direction |
color |
text indent |
text level setting |
line height |
writing direction |
text color |
Element visibility visibility etc.
Properties without inheritance:
display
Text attributes: vertical-align, text-decoration,
Background properties, box model properties, positioning properties, etc.
4. Interviewer: Tell me about the difference between em/px/rem/vh/vw?
px: absolute unit, the page is displayed in precise pixels
em: relative unit, the reference point is the font size of the parent node, if you define the font-size by yourself, it is calculated by itself, 1em in the entire page is not a fixed value
rem: relative unit, relative only to the value of the font-size of the HTML root element
vw, is divided into 100 equal parts according to the width of the window, 100vw means full width, similarly, vh is the height of the window vh, vw: mainly used for page viewport size layout, more convenient and simple in page layout
5. Interviewer: In css, what are the ways to hide page elements? the difference?
The methods of hiding elements through css are as follows:
1. display:none After the element is set to display:none, the element will completely disappear on the page, resulting in rearrangement and redrawing of the browser, unable to respond to click events.
2. visibility:hidden only hides the element, and the DOM results will exist, but it is in an invisible state at that time, and will not trigger rearrangement, but will trigger redrawing, and cannot respond to click events.
3. opacity: 0 After setting the transparency of the element to 0, the element is also hidden and will not cause rearrangement. Generally, it will also cause redrawing and can respond to click events
4. Set the height and width model attributes to 0. Set the height and width of the element, such as the attributes that affect the element box model, to 0. If there are child elements or content in the element, you should also set overflow:hidden to hide its child elements. Respond to click events
5. position:absolute moves the element out of the visible area top: -9999px; left:-9999px; Features: the element is invisible and does not affect the page layout
6. Interviewer: Tell me about your understanding of BFC?
BFC (Block Formatting Context), that is, block-level formatting context, it is a rendering area in the page, and has its own set of rendering rules:
1. The inner boxes will be placed one after another in the vertical direction
2. The margins of two adjacent boxes of the same BFC will overlap, regardless of the direction.
3. The left margin of each element touches the left border of the containing block (from left to right), even for floating elements
4. The area of BFC will not overlap with the element area of float
5. When calculating the height of BFC, floating sub-elements also participate in the calculation
6. BFC is an isolated and independent container on the page. The child elements inside the container will not affect the elements outside, and vice versa
How to create BFC?
1. The root element, the HTML element
2. The value of float is not none
3. The position is absolute or fixed
4. The value of display is inline-block, table-cell, table-caption
5. The value of overflow is not visible
BFC application scenarios
1. Prevent margin from overlapping (collapsing)
2. Clear internal floating
3. Adaptive multi-column layout, etc.
7. Interviewer: What are the ways to center elements horizontally and vertically?
1. Centered horizontally
For inline elements : text-align: center;
For block-level elements that determine width:
(1) Width and margin are implemented. margin: 0 auto;
(2) Absolute positioning and margin-left: (parent width - child width)/2, provided that the parent element position: relative
For block-level elements of unknown width
(1) inline-block realizes horizontal centering method. The child element display: inline-block and the parent element text-align: center achieve horizontal centering.
(2) Absolute positioning + transform, translateX can move 50% of its own elements.
(3) The flex layout parent element uses justify-content:center
(4) The table label cooperates with margin left and right auto to achieve horizontal centering. Use the table tag, and then add the left and right margins to the tag as auto.
Second, vertical centering
1. Use line-height to achieve centering, this method is suitable for pure text
2. By setting the relative positioning of the parent container and the absolute positioning of the child, the label realizes self-adaptive centering through margin
3. Elastic layout flex: parent set display: flex; child set margin to auto to achieve adaptive centering
4. Set relative positioning on the parent level, and absolute positioning on the child level, and realize it through displacement transform
5. For table layout, the parent level is converted into a table form, and then the child level is set to vertical-align.
8. Interviewer: How to realize two-column layout and self-adaptation on the right side? What about adaptive in the middle of the three-column layout?
Two column layout:
The effect of the two-column layout is to divide the page into two columns with different widths on the left and right. The column with a smaller width is set to a fixed width, and the remaining width is filled by the other column.
Implementation idea 1:
1. float left floating left column
2. Use margin-left to prop up the content block for content display
3. Add BFC to the level element to prevent the lower element from flying to the upper content, such as overflow: hidden
Implementation idea 2:
flex elastic layout
The parent box display: flex, the width of the left box is written, and the right box flex: 1 occupies a share
three column layout
The three-column layout is arranged in the order of left, middle and right. Usually, the middle column is the widest, followed by the left and right columns.
Implementation idea:
1. Use float on both sides and margin in the middle
2. Use absolute, use margin in the middle
3. The holy grail layout, using the margin negative value method (detailed explanation)
To use the holy grail layout, you first need to include a div outside the center element. To include the div, you need to set the float attribute to form a BFC, and set the width to 100%. In this way, the middle box occupies a single line, and the left and right boxes are squeezed to the bottom, allowing the left box to go up. Set margin-left: -100%, let the box on the right go up to set margin-left: Negative self-width
4. Use display: table to achieve
5. Use flex to set the parent to display: flex; justify-content: space-between;
6. grid grid layout
Set display: grid; width: 100%; grid-template-columns: 300px auto 300px;
9. Interviewer: Tell me about flexbox (flexible box layout model), and applicable scenarios?
Regarding the commonly used properties of flex, we can divide them into container properties and container member properties.
1. Container properties
flex-direction: determines the direction of the main axis flex-direction: row | row-reverse |column | column-reverse;
flex-wrap: Determine the newline rule flex-wrap: nowrap | wrap |wrap-reverse;
flex-flow: Shorthand for the flex-direction and flex-wrap properties
justify-content: alignment method, horizontal main axis alignment
1. space-between: both ends are aligned, and the intervals between items are equal
2. space-around: two items are equally spaced on both sides
align-items: alignment, vertical axis direction
align-content: defines the alignment of multiple axes
2. The properties of the item (the properties of the element):
order attribute: defines the sorting order of the items, the smaller the order, the higher the ranking, the default is 0
flex-grow attribute: defines the magnification ratio of the item, the default is 0, even if there is space, it will not be enlarged
flex-shrink attribute: defines the reduction ratio of the item. When the space is insufficient, it will be reduced proportionally. If the flow-shrink of an item is defined as 0, it will not shrink
flex-basis attribute: defines the space occupied by the item when allocating excess space.
flex: Shorthand for flex-grow, flex-shrink and flex-basis, the default value is 0 1 auto.
align-self: Allows a single item to have a different alignment than other items, which can be overridden
10. Flex realizes the layout css in the upper left corner, middle and lower left corner of the div
The parent sets the child to use absolute positioning to freely move to different positions on the page, such as the upper left corner.
display:flex;
position:relative;
flex-direction:row;
justify-content:space-around;
align-items:center;
11. Interviewer: What are the ways to clear the float?
1. Add additional tags to the parent and add <divstyle="clear:both"></div>
2. Add the overflow attribute to the parent, or set the height
3. Create a pseudo-class selector to clear the float (the following example) or 4. Use the before and after double pseudo-elements to clear the float
.parent:after{
/* Set the content of the added child element to be empty */
content: '';
/* Set the added child element as a block-level element */
display: block;
/* Set the height of the added child element to 0*/
height: 0;
/* set to add child elements invisible */
visibility: hidden;
/* Set clear: both */
clear: both;
}
12. Interviewer: What new features have been added to CSS3?
1. Selector
Some new selectors have been added in css3, mainly including attribute selectors, structural pseudo-class selectors, pseudo-element selectors, etc.
2. New style
frame |
background |
||
border-radius |
Create rounded borders |
background-clip |
Determine the background painting area |
box-shadow |
Add shadows to elements |
background-origin |
Determine image alignment point |
border-image |
Use pictures to draw borders |
background-size |
Resize the background image |
box-shadow |
set element shadow |
|
|
letter |
color |
||
word-wrap |
Allow newlines within words |
rgba |
|
text-overflow |
How to display beyond the border of the container |
rgba is divided into two parts, rgb is the color value, a is transparency |
|
text-shadow |
Apply shadow to text |
|
|
text-decoration |
Deeper rendering of text |
||
Three, transition transition
The transition property can be specified as the transition effect of one or more CSS properties. Multiple properties are separated by commas. The syntax is as follows:
transition: CSS property, cost time, effect curve (default ease), delay time (default 0)
Four, transform conversion
The transform property allows you to rotate, scale, skew or translate a given element
Five, animation animation
6. Gradient: linear-gradient: linear gradient
background-image:linear-gradient(direction, color-stop1, color-stop2, ...);
7. Other new features of css3 include flex elastic layout and grid grid layout
13. Interviewer: What are the CSS3 animations?
There are several ways to implement animation in css:
1. Transition realizes the transition shorthand of gradient animation: transition: all 2s ease-in 500ms;
2. transform transition animation
Contains four commonly used functions: translate: displacement scale: zoom rotate: rotate skew: tilt
3. Animation realizes custom animation
Define keyframes via @keyframes
14. Interviewer: If you want to optimize, what are the ways to improve the performance of CSS?
There are many ways to implement, mainly as follows:
1. Inline the key CSS of the first screen: through the inline css key code, the browser can render it immediately after downloading the html
2、异步加载CSS：
3、资源压缩：利用webpack等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间
4、合理使用选择器：不要嵌套使用过多复杂选择器
5、减少使用昂贵的属性：在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能
6、不要使用@import：@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时
15、面试官：浏览器重绘与重排的区别？
重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
重绘不一定会出现重排，重排必然会出现重绘
如何触发重排和重绘？
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
1、添加、删除、更新DOM节点
2、通过display: none隐藏一个DOM节点-触发重排和重绘
3、通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
4、移动或者给页面中的DOM节点添加动画
5、添加一个样式表，调整样式属性
6、用户行为，例如调整窗口大小，改变字号，或者滚动。
如何避免重绘或者重排？
1、集中改变样式，不要一条一条地修改 DOM 的样式。
2、不要把 DOM 结点的属性值放在循环里当成循环里的变量。
3、为动画的 HTML 元件使用 fixed 或 absolute 的 position，那么修改他们的 CSS 是不会reflow 的。
4、不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
5、尽量只修改position：absolute或fixed元素，对其他元素影响不大
6、动画开始GPU加速，translate使用3D变化
7、将元素提升为合成层
16、面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？
响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计的基本原理：通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
实现响应式布局的方式有如下：1、媒体查询 2、百分比 3、vw/vh 4、rem
媒体查询语法：
@mediascreen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}响应式布局优点：1、面对不同分辨率设备灵活性强2、能够快捷解决多设备显示适应问题
缺点：
1、仅适用布局、信息、框架并不复杂的部门类型网站
2、兼容各种设备工作量大，效率低下
17、面试官：如何实现单行／多行文本溢出的省略样式？
一、单行文本溢出省略
1、text-overflow: ellipsis：规定当文本溢出时，显示省略符号来代表被修剪的文本
2、white-space:nowrap：设置文字在一行显示，不能换行
3、overflow:hidden：文字长度超出限定宽度，则隐藏超出的内容
二、多行文本溢出省略
基于行数截断
-webkit-line-clamp:2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display:-webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow:hidden：文本溢出限定的宽度就隐藏内容
text-overflow:ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
18、面试官：如何使用css完成视差滚动效果?
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验
可以使用transform:translate3D来实现
transform:css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,
perspective:css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感
这种方式实现视觉差动的原理如下：
1、容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，
2、子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样
3、滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果
19、如何画一条0.5px的线
方法一、移动端，采用metaviewport的方式
<metaname="viewport"
content="width=device-width,
initial-scale=0.5, minimum-scale=0.5,maximum-scale=0.5"/>这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。
方法二、采用transform: scale()的方式
transform:scale(0.5,0.5);方法三、使用boxshadow
height:1px;
box-shadow:0 0.5px 0 #000;设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。
20、面试官：CSS如何画一个三角形？原理是什么？
/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
21、面试官：让Chrome支持小于12px的文字方式有哪些？区别？
常见的解决方案有：
1、zoom
zoom的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸
其支持的类型有：
zoom:50%，表示缩小到原来的一半
zoom:0.5，表示缩小到原来的一半
2、-webkit-transform:scale()
针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩
3、-webkit-text-size-adjust:none
该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小
22、面试官：说说对Css预编语言的理解？有哪些区别?
Css作为一门标记性语言，语法相对简单，但同时也带来一些问题。需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，Css预处理器便是针对上述问题的解决方案
Css预编译语言在前端里面有三大优秀的预编处理器，分别是：
1、sass 2、less 3、stylus
变量：less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开
嵌套：三者的嵌套语法都是一致的
作用域：Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js一样，它会先从局部作用域查找变量，依次向上级作用域查找
混入：Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用
代码模块化：模块化就是将Css代码分成一个个模块
使用方法：
@import './common';