css(二)1. 盒模型组成是什么？，box-sizing有什么作用？ 3. 使用CSS实现隐藏元素的方式有几种？

1. 盒模型组成是什么？，box-sizing有什么作用？

盒模型：

margin(外边距) padding(内边距) border(边框) content(内容)

box-sizing:content-box / border-box / inherit有以下三个属性

1：content-box:指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外.（传统盒模型）

2 ：border-box:指定宽度和高度（最小/最大属性）确定元素边框box，对元素指定宽度和高度包括padding和border的指定，内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算（h5盒模型）

3 ：inherit:指定box-sizing属性的值，应该从父元素继承

2.CSS3新特性有哪些，伪类，伪元素，锚伪类分别有哪些？

C3新特性：

CSS实现圆角（border-radius）,阴影（box-shadow）,边框图片border-image
对文字加特效（text-shadow）,强制文本换行（word-wrap）,线性渐变（linear-gradient）
旋转，缩放，定位，倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)
增加了更多的CSS选择器，多背景，rgba();
在CSS3中唯一引入的伪元素是::selection择器匹配元素中被用户选中或处于高亮状态的部分，只可以应用于少数的CSS属性：color, background, cursor,和outline;
媒体查询（@media）,多栏布局（flex）

伪类：用于向某些选择器添加特殊的效果

：hover 将样式添加到鼠标悬浮的元素
：active 将样式添加到被激活的元素
：focus 将样式添加到获得焦点的元素
：link 将样式添加到未被访问过的链接
：visited 将样式添加到被访问过的链接
：first-child 将样式添加到元素的第一个子元素
：lang 定义指定的元素中使用的语言

伪元素：用于将特殊的效果添加到某些选择器，伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

::first-letter 将样式添加到文本的首字母
::first-line 将样式添加到文本的首行
::before 在某元素之前插入某些内容
::after 在某元素之后插入某些内容

新增伪类：

P:first-of-type 选择属于其父元素的首个元素的每个元素
P:last-of-type 选择属于其父元素的最后元素的每个元素
P:only-of-type 选择属于其父元素唯一的元素的每个元素
P:only-child 选择属于其父元素唯一的子元素的每个元素
P:nth-child(n) 选择属于其父元素的第n个子元素的每个元素
P:nth-last-child(n) 选择属于其父元素的倒数第n个子元素的每个元素
P:nth-of-type(n) 选择属于其父元素第n个元素的每个元素
P:nth-last-of-type(n) 选择属于其父元素倒数第n个元素的每个元素
P:last-child 选择属于其父元素最后一个子元素的每个元素
P:empty 选择没有子元素的每个元素(包括文本节点)
P:target 选择当前活动的元素
:not(p) 选择非元素的每个元素
:enabled 控制表单控件的可用状态
:disabled 控制表单控件的禁用状态

3. 使用CSS实现隐藏元素的方式有几种？

Opacity:设置一个元素的透明度 .hide{opacity:0;}
Visibility .hide{visibility:hidden}
Display:确保元素不可见并且连盒模型也不生成 .hide{display:none}
Position .hide{position:absolute; top:-9999px; left:-9999px;}
Clip-path .hide{clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px};

4.如何实现盒子在页面水平和垂直居中？

水平居中设置：

行内元素：设置text-align:center;
定宽块状元素：设置左右margin值为auto;
不定宽块状元素：

- 在元素外加入table标签(完整的，包括table,tbody,tr,td),该元素写在td内，然后设置margin的值为auto;
- 改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。
- 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

垂直居中设置:

父元素高度确定的单行文本，设置height=line-height;
父元素高度确定的多行文本
A:插入table（插入方法和水平居中一样）,然后设置vertical-align:middle;
B:先设置display:table-cell 再设置 vertical-align:middle;

5.详细的描述一下 position , display ？

position：absolute;绝对定位的元素，相对于static定位以外的第一个父元素进行定位
position:fixed;生成绝对定位的元素，相对于浏览器窗口进行定位
position:relative;生成相对定位的元素，相对于其正常位置进行定位
position:static;默认值，没有定位，元素在正常的文档流(忽略top,bottom,left,right或者z-index声明)
position:inherit;规定应该从父元素继承position属性的值

display:none此元素不会被显示
display:block;此元素将显示为块级元素，此元素前后会带有换行符
display:inline;行内元素
display:inline-block;行内块元素

6. 请解释 *{box-sizing:border-box;} 的作用，并说明使用它的好处？

它是CSS3新增的属性：

通常一个块级元素实际所占的宽高度=margin+(border-width)+padding+height/width;如果设置了border-box，实际所占的宽高度=设置的高度/设置的宽度+margin无论如何改动border和padding的值，都不会导致box总尺寸发生变化，也就不会打乱页面整体布局

7. 浮动元素引起的问题和解决办法？

浮动会引起以下问题：

由于浮动元素已脱离文档流，所以父元素无法被撑开，影响与父级元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后，也是由于浮动元素脱离文档流，不占据文档流中的位置
如果该浮动元素不是同级第一个浮动的元素，则他之前的浮动也应该浮动，否则容易影响页面的结构显示

清除浮动的常用方法：

额外标签法，江湖人称“隔墙法”。
使用伪类arter等等，其实是隔墙法的变异操作。
浮动外部元素。
设置高度或者使用overflow:hidden或者auto.

8. Link 和 @import 引入CSS的区别？

适用范围不同：@import可以在网页页面中使用，也可以在css文件中使用，用来将多个CSS文件引入到一个CSS文件中；而link只能将CSS文件引入到网页页面中。
功能范围不同：link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义RSS,定义rel连接属性等，@import就只能加载CSS
加载顺序不同:当一个页面被加载的时候，Link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载，所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），这种是在网速慢的时候才会看得出来
兼容性差别:由于@import是CSS2.1提出的，所以老的浏览器不支持，而@import只有在IE5以上的才能识别，而link标签无此问题
控制样式时差别:使用Link方式可以让用户切换CSS样式

9. 解释一下css3的flexbox，以及适用场景？

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力，flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网络布局是用于较大规模的布局

10.inline和inline-block的区别？

inline：

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化，Inline元素设置width,height属性无效，inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,magin-top,margin-bottom不会产生边距效果。

Inline-block：

简单来说就是将对象改变成Inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

11.DPI是什么？

Dpi:每英寸包含点的数量(dots per inch)，普通屏幕通常包含96dpi,一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi(即2dppx),打印时一般会需要更大的dpi; 1dppx=96dpi

12. Attribute / property 有什么区别了？

Property:它是DOM中的属性，是javascript里边的对象

Attribute:它是HTML标签上的特性，它的值只能够是字符串

13.流式布局如何实现，响应式布局如何实现？

流式布局:

也叫fluid,当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间，场景：主要用于关键词搜索或者热门标签等场景；他主要是按照页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变,使用%百分比定义宽度，高度大都是用px来固定，可以根据可视区域和父元素的实时尺寸来调整，尽可能适应各种分辨率。

响应式布局：

主要是实现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验；首先设置meta标签，通过媒体查询来设置样式Media Queries,然后再设置多种试图宽度。

13.transition和animation的区别，animation的属性有什么，如何实现加速度重力模拟？

juejin.cn/post/684490…

14. 什么是BFC,如何去创建BFC ? 它能解决什么问题？

BFC：简单说，它是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用.

如何创建BFC：当一个HTML元素满足下面条件的任何一点，都可以产生BFC,常见的，float的值不为‘none’，overflow的值不为‘visible’,display的值为‘table-cell’,‘table-caption’,or‘inline-block’中的任何一个，position的值不为‘static’或‘relative’中的任何一个创建一个BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC仍然属于文档中的普通流.

15. CSS中选择器的优先级关系？

！Important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

16.雪碧图（精灵图）？

是把网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量，该图片使用css background和background-position属性渲染，这也就意味着你的标签变得更复杂了，图片是在css中定义，并非在<img>标签中，优点：减少加载网页图片时对服务器的请求次数，可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

17. 什么是SVG,它能做什么？

SVG它是可伸缩矢量图形，用来定义用于网络的基于矢量的图形，图形在放大或者改变尺寸的情况，其图形质量不会有所损失。

18. 媒体查询的原理是什么？

H5的新特性，为了移动端的使用而新增的特性，使用 @media 查询，你可以针对不同的媒体类型定义不同的样式

19. CSS的加载时异步的吗？它表现在什么地方？

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

触发异步样式下载的诀窍是使用一个<link> 元素，并为media 属性设置一个不可用的值 (我用的是 media=”none”, 不过其它的任何值也是可以的)。当一个媒体查询的结果值计算出来是 false 的时候，浏览器仍然会下载样式表，但是不会在渲染页面之前等待样式表的资源可用。

延迟添加link标签到页面，这种方式比较兼容可以使用同样原理，延迟加载JS。

20.请解释一下“::before”和“:after”中的双冒号和单冒号的区别？

如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

css(二)

1. 盒模型组成是什么？，box-sizing有什么作用 ？

2.CSS3新特性有哪些，伪类，伪元素，锚伪类分别有哪些 ？

3. 使用CSS实现隐藏元素的方式有几种 ？

4.如何实现盒子在页面水平和垂直居中 ？