css面试题

css面试题

css垂直居中的方法有哪些?

已知高度的块级子元素,采用绝对定位和负边距
.container {
position: relative;
}
.vertical {
height: 300px; /子元素高度/
position: absolute;
top:50%; /父元素高度50%/
margin-top: -150px; /自身高度一半/
}
CSS3弹性盒模型
.container {
display:flex;
justify-content: center; /子元素水平居中/
align-items: center; /子元素垂直居中/
}
未知高度的块级父子元素居中,模拟表格布局
缺点:IE67不兼容,父级 overflow:hidden 失效
.container {

display: table;
}
.content {
  display: table-cell;
  vertical-align: middle;
}

新增 inline-block 兄弟元素,设置 vertical-align
缺点:需要增加额外标签,IE67不兼容
.container {
height: 100%;/定义父级高度,作为参考/
}
.extra .vertical{
display: inline-block; /行内块显示/
vertical-align: middle; /垂直居中/
}
.extra {
height: 100%; /设置新增元素高度为100%/
}

在CSS样式中常使用 px、em rem在表现上有什么区别?

css面试题

px 相对于显示器屏幕分辨率,无法用浏览器字体放大功能
em 值并不是固定的,会继承父级的字体大小: em = 像素值 / 父级font-size
rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
为了简化font-size的换算,我们在根元素html中加入font-size: 62.5%;
html {font-size: 62.5%; } / 公式16px62.5%=10px */

css3自适应布局单位vw,vh你知道多少?

视口单位(Viewport units)
什么是视口?
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范,视口单位主要包括以下4个:

1.vw:1vw等于视口宽度的1%。
  2.vh:1vh等于视口高度的1%。
  3.vmin:选取vw和vh中最小的那个。
  4.vmax:选取vw和vh中最大的那个。

vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

视口单位(Viewport units)

css有哪些继承属性

文字排版的属性:font
font-size等
line-height color visibility cursor

display: none; 与 visibility: hidden; 的区别

联系:它们都能让元素不可见
区别:
display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility:hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
读屏器不会读取display: none;元素内容;会读取visibility: hidden元素内容

CSS 盒子模型(Box Model)

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
不同部分的说明:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

盒子模型构成:内容(content)、内填充(padding)、 边框(border)、外边距(margin)
IE8及其以下版本浏览器,未声明 DOCTYPE,内容宽高会包含内填充和边框,称为怪异盒模型(IE盒模型)
标准(W3C)盒模型:元素宽度 = width + padding + border + margin
怪异(IE)盒模型:元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性,触发“怪异模式”解析计算宽高

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中

display有哪些值?说明他们的作用

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

position的值relative和absolute定位原点是?

absolute
生成绝对定位的元素,相对于值不为 static的第一个父元素进行定位。
fixed (老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。
relative
生成相对定位的元素,相对于其正常位置进行定位。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right - z-index 声明)。
inherit
规定从父元素继承 position 属性的值

CSS3有哪些新特性?

新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-column layout)
阴影和反射 (ShadowReflect)
文字特效 (text-shadow、)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
增加了旋转,缩放,定位,倾斜,动画,多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

css3中的动画如何实现

一般浏览器支持@keyframes 规则和 animation 属性
当浏览器不支持时,可以加前缀 -webkit-, -ms- 或 -moz-

创建动画:@keyframes规则。
方式一:from{属性:值;} to{属性:值;}

css面试题

方式二:0%{属性:值;} 100%{属性:值;}
0% 是动画的开始,100% 是动画的完成。可以在二者之间加入25%,50%等。

css面试题

将动画绑定到选择器:
在样式中,设置动画属性animation,自定义动画名称和时长。
animation:动画名 时长;
此时就可以完成一个简单的动画了,要进行更多设置还需要其他属性。

css面试题

规定动画开始时的等待时间:
animation-delay:时间;可以为秒、毫秒2s,2ms。
播放次数:
animation-iteration-count:次数;
永久播放的值取infinite。
动画速度曲线:
animation-timing-function:变化类型;
变化类型有:linear 匀速;ease-in 开始慢;ease-out 结束慢;ease 动画有一个缓慢的开始,然后快,结束慢。

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

// 把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

一个满屏 品 字布局 如何设计?

简单的方式:
上面的div宽100%,
下面的两个div分别宽50%,
然后用float或者inline使其不换行即可

经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?

png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性
IE下,even对象有x,y属性,但是没有pageX,pageY属性
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性

li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了

box-sizing 常用的属性有哪些?分别有什么作用?

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值

CSS3新增伪类有哪些?

:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n,从后向前数

请列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在
opacity: 0; CSS3属性,设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外
display: none; 元素会变得不可见,并且不会再占用文档的空间。

相关推荐