Front-end interview questions (1)

1. The browser kernel?

1. IE browser kernel: Trident kernel (Trident), IE kernel
2. Chrome browser kernel: collectively referred to as Chromium kernel or Chrome kernel, formerly Webkit kernel, now Blink kernel;
3. Firefox browser kernel: Gecko kernel , Commonly known as Firefox kernel;
4. Safari browser kernel: Webkit kernel;
5. Opera browser kernel: originally its own Presto kernel, later Webkit, now Blink kernel;
6. 360 browser, cheetah browser kernel: IE +Chrome dual-core;
7. Sogou, Aoyou, QQ browser kernel: Trident (compatible mode) + Webkit (high-speed mode);
8. Baidu browser, Window of the World kernel: IE kernel;
9, 2345 browser kernel: before It is the IE core, and now it is also the IE+Chrome dual core

2. Box model?

content (content) + padding (inner margin) + border (border) + margin (outer margin)

3. Classification of element types

(1) Block elements

A: Blocky elements are displayed in the form of blocks on the web page. The so-called blocky means that the elements are displayed as rectangular areas.
B: By default, blocky elements will occupy one line. In layman's terms, two adjacent blocky elements do not There will be a phenomenon of side-by-side display; by default, block elements will be arranged in order from top to bottom.
C: Block elements can define their own width and height.
D: Block elements are generally used as containers for other elements, which can contain other inline elements and other block elements. We can compare this container to a box.
*Nesting rules: p>p(wrong) p>div(wrong) span>p(wrong) div>p(correct) p>span(correct)

div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td  表格及行-单元格
pre

-(2) In-line element (inner element):

A: The expression of inline elements is always displayed one by one in the line;
B: Inline elements have no shape of their own, and its width and height cannot be defined. The displayed width and height can only be based on the height and width of the content contained. To be sure, its smallest content unit will also present a rectangular shape;
C: Inline elements will also follow the basic rules of the box model, such as padding, border, margin, background and other attributes can be defined, but individual attributes cannot be displayed correctly; (padding- top/bottom;margin-top/bottom;)

a –超链接（锚点）    
span - 常用内联容器，定义文本内区块                           
br - 换行                             
i - 斜体
em - 强调    
                                   
label - 表单标签                  

b - 粗体(不推荐) 
strong - 粗体强调
sub - 下标   
sup - 上标
u - 下划线

(3) Inline block elements (added in css2.1):

img - 图片                         
input - 输入框 
textarea - 多行文本输入框
select button

(4) Variable element: It is
necessary to determine whether the element is a block element or an inline element according to the context.

4. Flexible box

display:flex

主轴对齐方式：justify-content:
	flex-start
	flex-end
	center
	space-between
	space-around	

交叉轴对齐方向：align-items:
	flex-start
	flex-end
	center
	baseline
	stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

定义一条轴线排不下，如何换行：flex-wrap:
	nowrap:默认不换行
	wrap:换行，第一行在上方
	wrap-reverse:换行，第一行在下方

定义主轴方向：flex-direction:
	row、row-reverse
	column、column-reverse

flex-flow:flex-wrap与flex-direction的缩写属性
	flex-flow:<flex-direction> <flex-wrap>
	默认：row nowrap

The following are the item properties of flex:

align-self:允许单个项目与其他项目有不同的对齐方式，能覆盖align-items属性
	默认值：auto,继承父元素的align-items，
	flex-start/flex-end/center/baseline/strech		

order:默认为0，数字越大越往后排，支持负数

flex：1 1 10%/px
	(三项分别是：flex-grow、flex-shrink、flex-basis)
	flex-grow:规定项目相对于其他灵活的项目进行扩展的量（默认为0.有空间也不放大）
	flex-shrink:项目默认为1，值为0不压缩
	flex-basis:在分配多余空间之前，项目占据的主轴空间，计算主轴是否有多余的空间，默认值为auto，即项目的本来大小，还可以设置px,则项目占据固定空间
	默认属为：flex:0,1,auto

Commonly used: flex:1

定义多根轴线的对齐方式：align-content:
	flex-start
	flex-end
	center
	space-between
	space-around
	strech

   flex-wrap: wrap;
   align-content: flex-start;

      flex-wrap: wrap;
      align-content: flex-end;

      flex-wrap: wrap;
      align-content: center;

      flex-wrap: wrap;
      align-content: space-around;

   flex-wrap: wrap;
   align-content: space-between;

      flex-wrap: wrap;
      align-content: stretch;
      /* 项目不设置高 */

5.margin merge problem

Description: Two div containers in the upper and lower position relationship, when margin-top and margin-bottom are set respectively, if the values ​​of the two attributes are the same, the distance between the two containers is this value; if the values ​​of the two attributes are different , The larger value is taken as the distance between the two containers;
solution:
(1) Set an outer margin for one of the elements
(2) Set an element on the outer layer of the element, and set overflow: hidden for the parent element

<style>
  div{
     
     
    width: 30px;
    height: 30px;
    background:orangered;
  }
  .box1{
     
     
    margin-bottom: 10px;
  }
  .box2{
     
     
    margin-top: 20px;
  }
  h1{
     
     
    overflow: hidden;
  }
</style>
<body>
  <h1>
    <div class="box1"></div>
  </h1>
  <div class="box2"></div>
</body>

Description: When the parent box model does not add padding or border, the margin-top of the first child element in the internal document flow will pull down the parent element, that is, the outer margin is transferred to the outer margin of the parent element.
Solution:
(1) Add overflow-hidden
to the parent element (2) Add border to the parent element
(3) Add padding to the parent element
(4) Add absolute positioning and float

<style>
  *{
     
     
    margin: 0;
    padding: 0;
  }
  .box{
     
     
    width: 100px;
    height: 100px;
    background: rgb(238, 177, 155);
    /* border: 1px solid #fff; */
    /* overflow: hidden; */
    /* float: left; */
    position: absolute;
  }
  .box div{
     
     
    width: 30px;
    height: 30px;
    background: palegoldenrod;
    margin-top: 20px;
  }
</style>
<body>
  <div class="box">
    <div></div>
  </div>
</body>

6.margin collapse problem (clear float):

Description: When the parent element does not set the height, it will be automatically opened by the child element, but the child element leaves the layout flow after floating and does not occupy a place, and the height of the parent element disappears (equivalent to the floating element on the second floor and the parent element on the first floor).
(Upper and lower elements, when there is a floating effect, directly use clear:left/right/botn, clear is to prevent the element from being affected by the floating element)
Solution:
(1) Set a fixed height for the parent element (not adaptive)
(2) Parent Element floating (affect the overall layout)
(3) overflow: hidden sub-elements will have an impact
(4) display: inline-block (affect the following element X)
(5) set an empty label, not recommended, an additional label will be added

  <div class="box">
    <div></div>
    <div style="clear:both"></div>
  </div>

(6) After pseudo-class:

  .clearfix:after{
    
    
    content: '';
    display: block;
    height: 0;
    width: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
  }

7. BFC specification

Formatting context

It is a concept in the W3C CSS2.1 specification. It is a rendering area on the page, and has a set of rendering rules, which determine how its child elements will be positioned, as well as the relationship and interaction with other elements.

BFC stands for Block Formatting Contexts (block-level formatting context)

It belongs to one of the above specifications. Elements with BFC characteristics can be regarded as isolated independent containers. The elements inside the container will not affect the outside elements in the layout, and BFC has some characteristics that ordinary containers do not have.

Trigger BFC:

• Floating elements: float values ​​other than none

• Absolutely positioned elements: position (absolute, fixed) Note: Relative is not allowed

• display 为 inline-block、table-cells、flex

• overflow values ​​other than visible (hidden, auto, scroll)

BFC layout rules:

• The inner boxes will be placed one after another in the vertical direction.

• The vertical distance of the box is determined by the margin. The margins of two adjacent boxes belonging to the same BFC will overlap.

• BFC is an isolated and independent container on the page, and the child elements inside the container will not affect the outside elements. The reverse is also true.

• When calculating the height of the BFC, the floating element also participates in the calculation. Therefore, one of the functions of BFC is not to prevent floating elements from running around.
  
  

application:

Solve margin merging and margin collapse

8. Achieve the horizontal and vertical centering of elements:

(1) Positioning to achieve centering:

  <div class="box1">
    <div class="box2"></div>
  </div>

  .box1{
    
    
    width: 300px;
    height: 300px;
    position: relative;
    background: rosybrown;
  }
  .box2{
    
    
    width: 100px;
    height: 100px;
    position: absolute;
    left:50%;
    top:50%;
    margin-top:-50px ;
    margin-left: -50px;
    background:royalblue;
  }

(2) Child element: always fixed in the center

  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  
  width: 100px;
  height: 100px;
  background: salmon;

(Unfinished...)