CSS3面试题
1.隐藏网页中的元素有几种方式?这些方法有什么区别?
答案:三种方法.
display:none;脱离文档流,不占页面空间,会改变页面布局。
visivility:hidden;不会脱离文档流,不会改变页面布局,仍占页面空间。
opacity:0;该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定
一些事件,如click事件,那么点击该区域,也能触发点击事件.
2.如何解决子元素的上外边距溢出?
答案:在父元素的第一个子元素位置处添加一个空的table标记.
3.常用来设置透明度的方式有几种?他们之间有何区别?
答案:opacity和rgba
opacity能设置与元素相关各种颜色的透明度
rgba()只能设置当前某一种颜色的透明度.
4.浮动会对父元素的高度带来什么影响?如何解决这个问题?
答案:子元素一旦浮动,父元素的高度为0,在父元素最后一个子元素位置处
添加一个空的块级元素,并设置其clear属性为both.
.clear:after{
display:block;
content:"",
clear:both;
}
5.哪些元素默认有外边距?
答案:body,p,h1-h6,ul,ol,dl,pre
6.网页中如何定义锚点?如何连接到锚点位置?
答案:a标记用name定义锚点,其他标记用id属性定义锚点.
连接到锚点的位置:href="#锚点名称";
7.框模型默认的计算方式是什么?要改变默认的计算方式用哪个属性及值?
实际占地宽度=左右外边距+左右边框+左右内边距+width
实际占地高度=上下外边距+上下边框+上下内边距+height
改变计算方式: box-sizing:border-box
8.实现时针转动效果需要用到CSS中哪些关键技术?
答案:旋转,动画,,绝对定位
9.设置行内元素居中对齐用什么属性?
答案:text-aligin:center
10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性?
答案:name和value属性
11.transition和animation的区别?
答案:Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要
区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下也会随着
时间改变属性值,并且transition为2帧.从from.... to ,而animation可以以帧一帧的,也可以理解为一个
animation是由多个transition组成.
12.如何实现水平垂直居中?
答案:
1.定位+外边距
盒子宽高已知,position:absolute;left:50%;top:50%;
margin-left:-自身一半宽度;margin-top:-自身一半高度;
2.定位+transform 盒子宽高已知,
#container{
position:relative;
border:1px solid red;
width:800px;
height:600px;
}
#content{
width:100px;
height:100px;
background:blue;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3.flex布局
父级:
display:flex;
align-items:center;/*垂直居中*/
justify-content:center;/*水平居中*/
居中布局
-水平居中
行内元素:text-aligin:center;
块级元素:margin:0 auto;
绝对定位已知宽度: position:absolute;margin-left:-(宽度的一半);left:50%;
绝对定位+transform: postion:absolute;left:50%;transform:translateX(-50%);
弹性布局水平居中: display:flex;justify-content:cneter;
-垂直居中
line-height:height;高度设置和盒子一样高
绝对定位和transform: position:absolute;top:50%;transform:translateY(-50%);
弹性布局垂直居中: display:flex;aligin-items:center;
绝对定位已知高度:position:absolute;margin-top:-(高度的一半);top:50%;
-水平垂直居中
1.已知宽高100px
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
2.弹性布局
display:flex;
justify-content:center;
aligin-items:center;
3.css3的transform属性
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
4.margin:auto;
postion:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
13.盒子模型你是怎么理解的?
答案:元素框处理元素内容,内边距外边距以及边框计算方式.
盒子模型有两种,W3C和IE盒子模型
(1)w3c的盒模型: width=content内容区域宽;不包括margin,padding,border
(2)IE盒模型: width=content 内容宽度 + padding 宽度 + border 宽度
(3)box-sizing border-box在已设定的宽度和高度之内去设定padding和border
content-box在已设定的高度和宽度之外设置padding和border
14.src和href的区别?
答案:
(1) href:href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档
之间的连接。并行下载该文档,不会停止对当前文档的处理.
(2)src:src是source的缩写,src指向的内容会嵌入到文档当前标签所在位置.
如img、script、ifram当浏览器解析到该元素时,会暂停浏览器的渲染,直到
该资源加载完毕.
15.说出link和import的区别?
(1)使用方法不同:
link一般在html头部定义,作为html标签,链接资源,主要用于链接外部的样式表.
import 一般定义在css内部,并且一定要在其他所有规则之前,也就是一般写在文件头部,
并且专门拿来链css的。
(2)加载顺序差别
import 比link延迟一些,它会等到页面下载完成后才加载,因而可能会产生闪烁.
16.改变页面元素位置的定位方式及他们的区别?
答案:relative相对定位相对于自身原来位置进行偏移,
仍处于标准文档流中;
absolute绝对定位 相对于最近的已定位的祖先元素,有已定位(指position不是static的元素)
祖先元素,以最近的祖先元素为参考标准。如果无已定位祖先元素,以body元素为偏移参照,完全
脱离文档流;
fixed固定定位的元素会相对于视窗来定位,者意味着即便页面滚动,它还是会停留在固定的位置。
固定定位也会脱离文档流。
17.display有哪些值,说明他们的作用?
答案:display的取值可以是none/inline/block/inline-block/table
none:元素隐藏不可见,并且元素也不占页面空间.
inline:元素将呈现行内元素的特点,多个元素在一行中显示,不允许修改尺寸,也不能设置垂直外边距。
block:元素将呈现块级元素的特点,每个元素独占一行,允许修改尺寸。
inline-block:元素将呈现行内块元素的特点,多个元素在一行中显示,但是可以修改尺寸。
table:元素将显示表格的特点,由内容决定表格的显示方式。元素独占一行，允许修改尺寸。
18.有两个div,外框和内宽高度宽度都不定,内宽垂直水平居中,利用css如何实现?
答案:
.content{
display:flex;
justify-content:center;
aligin-items:center;
}
19.说说em和rem的区别?
答案:rem是基于html元素的字体大小来决定,而em则根据使用他的元素的字体大小决定(
很多人错误以为是根据父类元素,实际上时元素继承了父类属性才会产生的错觉)
20.浏览器的内核分别是什么?
答案：IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、
Opera 内核原为 Presto，现为 Blink
21.为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,
如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,
初始化会对SEO有一定影响,但力求影响最小的情况下初始化。最简单的
初始方法就是:*{padding:0;margin:0;}(不建议)淘宝的样式初始化:
body,h1,h2,h3,h4,h5,h6,hr,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,
input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,/5b8b/4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ul ol {list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline}
img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
22.CSS哪些属性可以继承?优先级算法如何计算?CSS3新增伪类有哪些?
答案:可继承的样式:font-szie,font-family,color,background等
不可继承的样式:border,padding,margin,width,height;
优先级就近原则,同权重情况下以最近者为准;
优先级为:!important>id>class>tag important比内联优先级高
CSS3新增伪类:
:first-child 选择属于其父元素的首个元素.
:last-child 选择其父元素的最后一个元素.
:only-child 选择属于其父元素唯一的元素.
:nth-child(n) 选择属于其父元素的任意一个子元素.
:empty 选择没有子元素的元素.
:not(selector) 将满足指定选择器的元素给排除在外.
23.描述css rest的作用。
答案:reset重置浏览器为元素设置的默认样式,浏览器的种类不同,样式可能不同,
重置是为了让他们统一样式.
24.清除浮动带来影响的几种方式,各自的优缺点.
答案:
1.直接设置父元素高度,但不是每次都知道父元素的高度.
2.设置父元素也浮动,但不是任何时候父元素都需要浮动,
而且浮动会影响后续元素.
3.为父元素设置overflow属性,但如果有内容需要溢出显示的话,也会
一同被隐藏.
4.在父元素中,追加空子元素,并设置其clear:both,但页面中会多出一个空元素.
5.用内容生成的方式 :after{content:"",display:block;clear:both;}
25.px和em的区别
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易
em的值不是固定的,并且em会继承父级元素的字体大小.
浏览器默认字体高都是16px.所以未经调整的浏览器都符合:1em=16px
那么12px=0.75em,10px=0.625em
