前端面试题(CSS篇)
CSS篇
1、介绍一下标准CSS的盒模型?低版本IE的盒子模型有什么不同的?
IE盒子模型、W3C盒子模型
盒模型:内容(content
)、填充(padding
)、边界(margin
)、边框(border
)
区别:IE 的content
部分把border
和padding
计算了进去;
在CSS3中引入了box-sizing
属性,它可以允许改变默认的CSS盒模型对元素宽高的计算方式,共包括两个选项content-box
:标准盒模型,CSS定义的宽高只包含content
的宽高border-box
:IE模型,CSS定义的宽高包括了content
,padding
和border
2、CSS选择符有哪些?哪些属性可以继承?
id选择器(#myid
)
类选择器(.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;
4、CSS3新增伪类有哪些?p:first-of-type
选择属于其父元素的首个<p>
元素的每个<p>
元素p:last-of-type
选择属于其父元素的最后<p>
元素的每个<p>
元素p:only-of-type
选择属于其父元素的唯一子元素的每个<p>
元素p:only-child
选择属于其父元素的唯一子元素的每个<p>
元素p:nth-child(2)
选择属于其父元素的第二个子元素的每个<p>
元素:after
在元素之前添加内容,也可以用来做清除浮动:before
在元素之后添加内容:disabled
控制表单控件的禁用状态:checked
单选框或复选框被选中
5、如何居中div
- 负margin方法
CSS代码
.container {
width: 500px;
height: 400px;
border: 2px solid #cfc;
position: relative;
}
.inner {
width:480px;
height: 380px;
background-color: limegreen;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
}
HTML代码
<div class="container"><div class="inner"></div></div>
这里,我们首先用top:50%
和left:50%
让inner
的坐标原点(左上角)移动到container
的中心,然后再利用负margin
让它往左偏移自身宽的一半,再往上偏移自身高的一半,这样inner
的中心点就跟container
的中心点对齐了。
- table-cell方法
CSS代码:
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
HTML代码:
<div><img src="mm.jpg"></div>
通过将盒子转换为table
元素,table
元素本身是可以通过属性来控制位置,div
上面的vertical-align: middle
是控制垂直方向上的居中的,而text-align: center
是控制水平方向的
- 弹性盒子法
CSS代码:
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}
HTML代码:
<div class="container">
<div class="inner">
我在容器中水平垂直居中
</div>
</div>
align-items
控制垂直方向的居中,justify-content
控制水平方向的居中。这是CSS3
的新方法
- 位移方法
位移方法和margin
定位方法一样,只不过吧margin
改成了位移不需要计算一半是多少,直接transform:translate(-50%,--50%)
6、display有哪些值?说明他们的作用block
象块类型元素一样显示。none
缺省值。象行内元素类型一样显示。inline-block
象行内元素一样显示,但其内容象块类型元素一样显示。list-item
象块类型元素一样显示,并添加样式列表标记。table
此元素会作为块级表格来显示inherit
规定应该从父元素继承 display 属性的值
7,position的值relative和absolute定位原点是?absolute
生成绝对定位的元素,相对于值不为 static
的第一个父元素进行定位。fixed
(老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。relative
生成相对定位的元素,相对于其正常位置进行定位。static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index
声明)。inherit
规定从父元素继承 position
属性的值。
8,CSS3有哪些新特性?
新增各种CSS选择器 (: not(.input
):所有 class
不是“input
”的节点)
圆角 (border-radius:8px
)
多列布局 (multi-column layout
)
阴影和反射 (Shadow\Reflect
)
文字特效 (text-shadow
)
文字渲染 (Text-decoration
)
线性渐变 (gradient
)
旋转 (transform
)
增加了旋转,缩放,定位,倾斜,动画,多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
9,用纯CSS创建一个三角形的原理是什么?
把上、左、右三条边隐藏掉(颜色设为 transparent
)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
10,一个满屏 品 字布局 如何设计?
简单的方式:
上面的div
宽100%
,
下面的两个div
分别宽50%
,
然后用float
或者inline
使其不换行即可
11,li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
16,请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow
。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1
用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0
,否则该元素会比实际高出若干像素;
17、CSS优化、提高性能的方法有哪些?
将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter
18、png、jpg、gif 这些图片格式解释一下,分别什么时候用?
GIF: 8位像素,256色,无损压缩 ,支持简单动画,支持boolean透明,适合简单动画
JPEG:颜色限于256 ,有损压缩,可控制压缩质量,不支持透明 适合照片
PNG:有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画、适合图标、背景、按钮
19、display: none;与visibility: hidden;的区别display:none;
会让元素完全从渲染树中消失,渲染的时候不占据任何空间visibility: hidden;
不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
上一篇: Python中的魔法方法深入理解