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改变层级;

前端面试题11-20相关推荐

web前端面试题：20道做完信心嫉妒膨胀的测试题
经常有前端的同学说去面试的时候被企业的面试题搞得很心伤,感觉自己什么都不会了!今天小千就带给大家20道能让你疯狂增加信心的面试题,废话不多说赶紧来做题吧~ 1.Vue框架的作者是谁? A.秦始皇 B. ...
20道vue前端面试题总结
vue前端面试题双向绑定是什么意思? 说一下v-model的原理 MVC与MVVM的区别 methods方法与computed计算属性区别再说一下Computed和Watch vue的生命周期有哪 ...
下面有关html5标签说法错误的有,前端面试题（2016含答案）
标签定义命令按钮,比如单选按钮.复选框或按钮 8) 下述有关css属性position的属性值的描述,说法错误的是? a. b. c. d. static:没有定位,元素出现在正常的流中 fixed: ...
Web前端面试题集锦
Web前端面试题集锦前端开发面试知识点大纲: 注意转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
promise的状态以及api介绍_2019年，盘点一些我出过的前端面试题以及对求职者的建议
笔者虽然曾经也面试过很多求职者,但是对于前端的笔试和面试,我觉得并不能体现一个人的真实能力,所以建议大家多修炼前端真正的技术.对于前端面试题,之前也承诺过读者要出一篇,笔者大致总结一下曾经面试的题目. ...
前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解
1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...
【前端】前端面试题整理
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离关于浏览器内核(渲染引擎) 浏览 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
前端面试题汇总（JS 基础篇）
前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...
菜鸡前端面试题整理日记
一直以来都有写点什么东西的想法,但又整天犹犹豫豫的,一会觉得准备不够充分,写的内容没什么质量,一会又觉得没什么内容可写的,以至于一拖再拖.万事开头难,难着难着就没有下面了,以此先开个头,记录自己的成长 ...

前端面试题11-20

CSS类的题目

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

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

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

14、CSS3新增伪类有那些？

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

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

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

18、CSS3有哪些新特性？

前端面试题11-20相关推荐

最新文章

热门文章