CSS面试题（参照 ）

2. CSS选中符是什么？那些属于可以继承？

• id选中器(#myid)
• 类选中器(.myclassName)
• 标签选中器(p,h1,p)
• 子代选中器(ul>li)
• 后代选中器(li a)
• 通配符选中器(*)
• 属性选中器(a[rel="external"])
• 伪类选中器(a:hover,li:nth-child)

可继承的样式： font-size font-family color
不成继承的样式： border padding margin height width

3. css优先级怎样运算?

• 优先级就近原则，同权重状况下样式定义比来这位准
• 载入样式以最后载入的定位为准

优先级为：

• 同权重： 内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)
• !important >id >class >tag
• !important 比内联优先级高

4. display是什么值？说明他们的作用

• block 块类型。默许宽度为父元素宽度，可设定宽高，换行显示
• none 元素不显示，并从文档流中移除
• inline 行内元素，默许宽度为内容宽度，不成设定宽高，同业显示
• inline-block 默许宽度为内容宽度，可以设定宽高，同业显示
• list-item 像块类型元素一样，可以设定宽高，同业显示
• table 此元素会作为会计表格来显示
• inherit 规定应当从父元素继承display属性的值

5. position的值releave和absolute定位远点是？

• absolute 生成绝对定位元素，相对与值部位static的第一个父元素停止定位
• fixed 生成绝对的元素，相关于阅读器窗口停止定位
• relative 生成相对定位的元素，相关于其正常位置停止定位
• static 默许值。没有定位，元素显现在正常显现的流中
• inherit 规定从父元素继承position属性的值

6. css是什么特性?

• 过渡

  transition-property:width
  transition-duration:1s
  transition-timing-function:linear
  transition-delay:2s

• 动画

animation:动画名称，一个周期花费时间,云顶曲线(默许ease),动画延迟(默许0),动画播放次数(默许1),可否反向播放动画(默许normal),可否暂停动画(默许running)

• 外形转换

transform: 使用于2D或3D转换的元素
transform-origin: 装换元素的位置(环绕哪个点停止装换).默许(x,y,z);

• 选中器

• 暗影

box-shadow: 水平暗影的位置 垂直暗影的位置 含糊间隔 暗影的大小 暗影的色彩 暗影开端的标的目的(默许是从里向外，设定inset就是从外往里)

• 边框图片

border-image: 设定图片途径 设定边框背景图的分割方式 设定或检索对象的边框厚度 设定或检索对象的边框背景图向外扩展 设定边框图片的平铺方式

• 边框圆角

  border-radius: n1 n2 n3 n4;
/* n1-n4 四个值得次序是左上角，右上角，右下角，左下角 */

• 反射(倒影)

box-reflect: 标的目的[above-上|below-下|right-右|left-左],偏移量,遮罩图片

• 文字

• 换行 word-break:normal(默许使用阅读器默许的换行规则)|break-all(同意在单词内换行)|keep-all(只能在半角空格或连字符处换行)
• 超出省略号

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

• 多行省略号

overflow:hiden;
text-overflow:ellipsis;用省略号"..."潜藏超出范畴的文本
display:-webkit-box;  //将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数
-webkit-box-orient:vertical;设定弹性盒对象的子元素的摆列方式

• 文字暗影

text-shadow: 水平暗影 垂直暗影 含糊暗影 暗影色彩

• 色彩

rgba(rgb色彩值，a为透亮度)

• 渐变

线性渐变和径向渐变

• filter(滤镜)

filter: 滤镜结果(透亮度)

• 弹性规划

弹性规划就是flex规划

-栅格规划

栅格化规划。就是grid

• 盒模型

• border-box 边框和内边距包括在元素的宽高之内
• content-box 边框和内边距不包括在元素的宽高之内

7. 请说明一下css3的flex(弹性盒规划模型)乃至使用处景

一个用于页面规划的全新css3功效，flexbox可以把列表放在统一个标的目的(从上到下摆列，从左到右)，并且列表能延长到占用可用的空间，较为复杂的规划还可以嵌套一个伸缩容器(flex container)来实现。采纳flex规划的元素，成为flex容器。常规规划是基于块和内联流标的目的，而flex规划是基于flex规划flex-flow流可以很利便的用来做居中，能对不一样屏幕大小自顺应，在规划上有了比之前愈加灵敏的空间

8. 经常碰到的阅读器的兼容性问题是什么，缘由，解决办法是啥

• png24位的图片在Ie6阅读器上显现背景。解决方案是做成png8
• 阅读器默许的margin和padding不一样。解决方案是假一个全局的*{margin:0;padding:0}来统一
• IE6双边距bug；矿属性变迁float后，又有横向的margin状况下，在Ie6显示margin比设定的大。解决方案是在float的标签操纵中参加display:inline；将其妆花为行内渐进识别的方式，从总体中逐渐排除部分。
• 设定较小高度标签(一样小于10px)，在IE6，IE7中高度超出本人设定高度。解决办法:给超出高度的标签设定overflow:hidden;或者设定行高line-hieght小于你设定的高度
• chrome中文界面默许或将小于12px的文本强迫依照12px的文本强迫依照12px显示，可通过参加css属性 -webkit-text-size-adjust:none 解决

移动端

• 1px边框问题。解决方案采纳微元素模拟的方式

 .scale{
  position: relative;
  border:none;
 }
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

• 点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处置点透问题
• 安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normal
• ios的body位置overflow：hidden后依然可以滚动。解决方案：一样在所有元素最外层再包一大盒子.wrapper

 .wrapper{
   position:relative;
   overflow:hidden;
 }

• ios滚动卡顿。解决方案：在滚动的容器上加上webkit-over-flow-scrolling:touch;

9. 请说明一下为什么需要清浮动？清浮动的方式

清浮动是为了清除使用浮动元素发生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的规划不克不及正常显示

• 父级p定义height
• 在浮动元素后面增加class为clear的空p元素，给这个p设定样式.clear{clear:both}
• 给父容器增加overflow:hidden或者auto样式
• 给父容器增加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动

.clearfix{
    zoom:1;
}
.clear:after{
    content:'.';
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
}

10. margin和padding离别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是用来规划分开元素，使元素与元素互不相关；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距

11.什么是伪类，什么是伪元素，他们的不同？

• 伪类的受体是文档树中已有的元素，而伪元素则创立了一个DOM外的元素
• 伪类用于增加元素的非凡结果，而伪元素则是增加元素的内容
• 伪类使用的一个冒号，为元素使用两个冒号
• 伪类更常用一些简便的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等

12. 什么是外边距合并

外边距合并指的是，当两个垂直外边距相遇时，他们将构成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者

13. 实现水平垂直居中

示例：

<p class="md-warp">
    <span class="md-main"></span>
</p>
.md-warp{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 1px solid #000;
}
.md-main{
    display: block;
    width: 100px;
    height: 100px;
    background: #f00;
}

水平居中

• margin法
  需要知足三个前提

• 元素定宽
• 元素为块级元素或行内元素设定display:block
• 元素的margin:left或者margin-right都必需设定auto
  三个前提缺一不成

.md-main{
    margin: 0 auto
}

• 定位法

• 元素定宽
• 元素绝对定位，并设定left:50%;
  +元素负做边距margin-left为宽度的一半

.md-wrap{
    position:relative;
}
.md-main{
    position:absolute;
    left:50%;
    margin-left:-50px
}

有些时候元素宽度不是牢固的，仍然可以使用定位法实现水平居中用到css3中的transform属性中的translate

.md-warp{
    position: relative;
}
// 留意此时md-main不设定width为100px
.md-main{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

• 文字水平居中

直接使用text-align:center即可

垂直居中

• 定位法

和水平居中相似，只是把left:50%换成top:50%,副边距和transform属性停止对应更换即可

长处：能在各个阅读器下工作，构造简便明了，不需要增添额外的标签

 .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    /* 中心 */
    top: 50%;
    margin-top: -50px;
}

不肯定高度的时候

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    // 留意此时md-main不设定height为100px
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

• 单行文本垂直居中

需要知足两个前提：

• 元素内容是单行，并且其高度是牢固不变的
• 将其line-height设定成height的值一样

p{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
span{
    line-height: 300px;
}

视窗单位的解决方法

让元素在视窗中居中，使用vh实现

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

Flexbox的解决方案

完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设定display:flex和在水平存执居中的元素设定margin:auto

.md-wrap{
    display:flex
}
.md-main{
    display:auto
}

Flexbox的实现文本的水平垂直居中一样很简便

 .md-warp{
    display:flex;
}
.md-main{
    display: flex;
  align-items: center;
  justify-content: center;
    margin: auto;
}

绝对垂直居中

.md-wrap{
    position: relative;
}
.md-main{
    position:absolute;
    top:0'
    right:0
    bottom:0;
    left:0;
    margin:auto;
}

最好不要使用绝对定位，由于他对团体的规划影响相当的大

相关教程引荐：CSS视频教程

以上就是CSS面试题（参照 ）的具体内容，更多请关注百分百源码网其它相关文章！