初---程序猿面试题{css盒模型？选择器有哪些及它们的优先级？Css垂直居中有哪些方式？lnline-block和block区别？box-sizing?你用过的编程语言中长度单位有哪些？}

1.css盒模型？

css盒模型（box model），它是包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）属性的一个盒子模型。
盒子分为三类标准：标准盒子模型和IE盒子模型（怪异盒子模型）、弹性盒子模型。

在标准盒模型中，盒子的width是指content的宽高，

IE盒子模型中就比较怪异了，它包含了content、border和padding的距离
。
两者区别：在于width和height的计算方式不同。
IE盒子模型：盒子的总宽度=border+padding+content
标准盒子模型：盒子的总宽度=content的宽度

2.选择器有哪些及它们的优先级？

选择器：
元素选择器

id选择器

类选择器

后代选择器

子代选择器

兄弟选择器

相邻选择器

群组选择器

全局选择器

属性选择器

伪类选择器
优先级：
！important>行间样式>ID选择器>属性选择器&&伪类选择器&&类选择器>元素选择器

3.Css垂直居中有哪些方式？

css垂直居中的8中方式：
1.通过vertical-align:middle实现垂直居中

2.通过display:flex实现css垂直居中

3.通过伪元素:before实现css垂直居中

4.通过display:table-cell实现css垂直居中

5.通过隐藏节点实现css垂直居中

6.已知父元素高度通过transform实现css垂直居中

7.到垂直居中的位置

8.通过line-height实现css垂直居中

4.lnline-block和block区别？

inline-block:简单的说，就是将对象呈现为inline对象，让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体

display:block特点
	1、独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满其父元素宽度
	2、block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。
	3、block元素可以设置margin和padding属性。

5.box-sizing?

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing：content-box | border-box
默认值：content-box

content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding)此属性表现为标准模式下的盒模型。

border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

6.你用过的编程语言中长度单位有哪些？

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em：相对长度单位。基准点为父节点字体的大小，即相对于当前对象内文本的字体尺寸（继承父节点字体大小）。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸( 16px )。

3、rem：相对长度单位。r’是“root”的缩写，相对于根元素的字体大小。

4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。

5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。

7.Em和vw和vh？

em是相对长度单位，它是基于父元素的字体大小。

当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。

vm、vh、是一种视窗单位，也是相对单位。主要用于页面视口大小布局，相对于rem在页面布局上更加方便简单,

由视窗大小来决定的，单位 1，代表类似于 1%。

在pc端中，指的是浏览器的可视区域。

在移动端中，指的则是布局视口。

小作者在持续更新中…