欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试题(CSS篇)

程序员文章站 2022-06-09 18:02:21
...

CSS篇

1、介绍一下标准CSS的盒模型?低版本IE的盒子模型有什么不同的?
IE盒子模型W3C盒子模型
盒模型:内容(content)、填充(padding)、边界(margin)、边框(border
区别:IE 的content部分把borderpadding计算了进去;
在CSS3中引入了box-sizing属性,它可以允许改变默认的CSS盒模型对元素宽高的计算方式,共包括两个选项
content-box:标准盒模型,CSS定义的宽高只包含content的宽高
border-box:IE模型,CSS定义的宽高包括了contentpaddingborder

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,一个满屏 品 字布局 如何设计?
简单的方式:
上面的div100%
下面的两个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;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见