前端面试题11-20

CSS类的题目

11、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

CSS盒子模型:   外边距(margin)  内边距(padding)  边框(border)  内容区(content)

CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样

标准的CSS的盒子模型的宽高 = 内容区的宽高 (W3c盒子模型)

低版本IE的盒子模型的宽高  =  内容区+内边距+边框 

最新的盒子模型：box-sizing: border-box;

 

12、CSS选择符有哪些？哪些属性可以继承？

    id选择器（ # myid）;

    类class选择器（.myclassname）;

    标签选择器（div, h1, p）;

    相邻选择器（h1 + p）;

    子选择器（ul > li）;

    后代选择器（li a）;

    通配符选择器（ * ）;

    属性选择器（a[rel = "external"]）；

    伪类选择器（a:hover, li:nth-child）；

    可继承的样式： font-size font-family color, ul li dl dd dt；

    不可继承的样式：border padding margin width height 。

13、CSS优先级算法如何计算？

 优先级就近原则，同权重情况下样式定义最近者为准;
 载入样式以最后载入的定位为准;

  优先级为:
  同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
  !important >  id > class > tag
  important 比 内联优先级高

14、CSS3新增伪类有那些？

css3新增了许多伪类，但是IE8以及更低版本的IE浏览器不支持css3伪类，所以在使用时要是涉及到布局等意象全局的样式，应该多考虑一下。

elem:nth-child(n)     这个伪类选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数（如4n-1）。需要注意的是，n是从1开始计算，而不是0。

elem:nth-last-child    和nth-child伪类一样的思路，只是技术方式改为倒数计算，所以，我们可以选择后n个元素

:last-child    不言而喻，选中最后一个子元素。

elem:only-child    要是elem是父元素下唯一的子元素，则选中之。

elem:nth-of-type(n)    选择父元素下第n个elem元素，n接受的格式和nth-child一样。甚至在绝大多数情况下，nth-of-type的效果甚至和nth-child没有区别，那这两个伪类到底是什么区别呢。

注意： elem:nth-of-type(n)是“选择父元素下第n个elem元素”。

            而elem:nth-child(n)是“这个伪类选中父元素下的第n个子元素，并且这个子元素的标签名为elem”。

elem:first-of-type和elem:last-of-type    不言而喻，选中父元素下第1个/最后一个elem元素。

elem:only-of-type     如果父元素下的子元素只有一个elem元素，选中该元素。elem:only-of-type和elem:only-child不同的是，后者父元素下只能有一个子元素；而前者这不一定，只要父元素下只有一个elem标签就行。

elem:empty   选中不包含子元素和内容的elem标签。

 

 :after          在元素之前添加内容，也可以用来做清除浮动。

 :before        在元素之后添加内容。

 :enabled        选择可用的表单元素。

 :disabled       控制表单控件的禁用状态。

 :checked        单选框或复选框被选中。

15、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

（一）元素水平居中的方式

1）行级元素水平居中对齐（父元素设置 text-align:center）

2)   块级元素水平居中对齐（margin: 0 auto）

3）浮动元素水平居中

• 宽度不固定的浮动元素
• 宽度固定的浮动元素

4）让绝对定位的元素水平居中对齐

（二）元素垂直居中对齐

1）对行级元素垂直居中（heiht与line-height的值一样）

2）对块级元素垂直居中对齐

• 父元素高度固定的情况
• 父元素高度不固定的情况

原文链接：https://blog.csdn.net/lxcao/article/details/52670724?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

总结：

(1)、非浮动元素居中：可以设置 margin:0 auto 令其居中, 定位 ,父级元素text-align:center等等
(2)、浮动元素居中:
方法一:设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。
方法二:父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。
方法三:position定位等等。

16、display有哪些值？说明他们的作用。

block：转换成块状元素

inline：装换成行内元素

none：设置元素不可见

inline-block：像行内元素那样显示，但是其内容像块类型元素一样显示

list-item：像块类型元素一样显示，并添加样式列表标记

table：此元素会作为块级表格来显示

inherit：规定应该从父元素继承display属性的值

17、position的值relative和absolute定位原点是？

absolute  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素 （浏览器窗口）定位。

fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative 生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。

static 默认值。没有定位，元 素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）

18、CSS3有哪些新特性？

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。 
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. @Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

3. 圆角

border-radius: 15px;

4. 多列布局 （multi-column layout）

5.阴影（Shadow）

text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5)

6.CSS3 的渐变效果

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E))

7.css弹性盒子模型

8. CSS3制作特效

1) Transition 对象变换时的过渡效果

•  transition-property 对象参与过渡的属性
•  transition-duration 过渡的持续时间
•  transition-timing-function 过渡的类型
•  transition-delay 延迟过渡的时间

缩写方式：　　

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

19、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？

1. 什么是flex
flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。
2.基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。
3.容器属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，项目都排在一条线（又称”轴线”）上。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
4.项目属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

参考网址：https://www.jianshu.com/p/4e23aee6da99

20、用纯CSS创建一个三角形的原理是什么？

• 采用的是均分原理,把矩形分为4等份,这4等份其实都是边框

   

  

   

• 实现方式,
  核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;

  

   

• 使用场景
  使用场景一般都是做一些小图标,比如之前做的京东二维码
  上面这种做法就是用两个大小一样的三角形重叠在一起,下面的三角形背景色为绿色,
  上面的三角形为白色,用z-index改变层级;