前端3+1(Day12)

常见的浏览器内核都有哪些，介绍你对内核的理解

什么是内核，浏览器的作用

浏览器的主要功能就是向服务器发送请求，在浏览器窗口展示您使用的网络资源。这里所说的资源是指HTML文档，pdf，或者图片等其他类型。资源的位置由用户使用URL指定。

浏览器的内核是指，浏览器运行的最核心的程序，分为两个部分：渲染引擎和JS引擎

渲染引擎：

他负责取得网页的内容（HTML，XML，图像等等），整理讯息（加入CSS），以及计算网页的显示方式，然后输出至显示器或者打印机

JS引擎：

解析JavaScript语言，执行JavaScript语言来实现网页的动态交互效果

因为JS引擎越来越独立，所以内核就倾向于渲染引擎

常见的浏览器内核

1. Trident（IE内核）

国内很多的双核浏览器其中一核便是Trident，“兼容模式”

2. Gecko（firefox）

3. webkit（safari）

4. Chromium/Bink（chrome）

5. Presto（Opera）

谈谈你对CSS盒模型的理解

盒子分为块级盒子和内联盒子

块级盒子：

1. 会换行，width和height属性发挥作用

2. padding，margin，border会将其他元素从当前元素周围推开

内联盒子：

1. width，height不起作用

2. 垂直方向的内边距，外边距以及边框会被应用但是不会把其他内联盒子推开

3. 水平方向的内边距，外边距以及边框会被应用且会把其他的内联盒子推开

补充：

盒子：每一个盒子都有一个外部盒子和一个内部盒子。

外部盒子：用来决定盒子是块级还是内联

内部盒子：用来决定盒子内部元素是如何布局的，默认都是按照正常的文档流布局

一般经过flex的display，都是改变的是内部盒子

css盒模型

盒模型的各个部分：

1. Content box：这个区域用来显示内容 通过设置width和height

2. Padding box：文本和边框的那个区域，padding设置

3. Border box：盒子的边框，border设置

4. Margin box：盒子最外边的区域，盒子和盒子之间的间距区域，通过margin来设置

标准盒模型：

在标准盒模型里，你设置的width，height，其实是你的content box

padding ，border， 再加上宽高表示盒子整个的大小

但是我们可以是使用IE盒模型,是盒模型的宽度都要加上边框和内边距

html {
  box-sizing: border-box;
} 
*, *::before, *::after {
  box-sizing: inherit;
}