css出现的问题以及解决,前端面试总结：CSS常见问题

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

1.盒子模型有两种，IE盒子模型、W3C盒子模型；

2.盒子模型：内容(content)，内边距(padding)，边框(border)，外边距(margin)

3.区别：IE的content部分把border和padding计算进去了

2.CSS选择器有哪些？哪些属性可以继承？

1.id选择器(#id);

2.类选择器(.class);

3.标签选择器(div);

4.相邻选择器(h1+p)；

5.子选择器(ul>li)；

6.后代选择器(li a)；

7.通配符(*)；

8.属性选择器(a[rel = 'xyz'];

9.伪类选择器(a:hover,li:nth-child);

可继承样式：font-size font-family color ul li dl dd dt;

不可继承样式：border padding margin width height；

3.CSS优先级算法如何计算？

优先级就近原则，同权重样式定义最近者为准

载入样式以最后载入的定位为准

优先级：

!important > id > class > tag > *(通配符)

4.display有哪些值？说明他们的作用

1.block:设定元素变为块级元素，占据一整行，可设置宽高；

2.inline-block：设定元素为行内块元素，可设置宽高，一行能显示多个；

3.inline：行内元素，不可设置宽高，一行可显示多个；

4.none：设置元素不可见；

5.flex：开启弹性布局；

6.table：作为块级表格显示；

7.list-item：像块级元素一样显示，并添加样式列表标记；

8.inherit：继承父元素的display属性；

5.position的值relative和absolute定位原点是？

relative：相对定位，相对于正常位置进行定位

absolute：绝对定位，相对于父元素中最近一个position不为 static(静态，无定位)定位；

fixed：相对于浏览器窗口定位；

static：默认，无定位；

inherit：继承父元素的定位；

6.CSS3有哪些新特性？

1.圆角 --》border-radius

2.阴影和反射 --》shadow、reflect

3.文字特效 --》text-shadow

4.文字渲染 --》text-decoration

5.线性渐变 --》gradient

6.旋转 --》transform

缩放、定位、倾斜、动画、多背景

transform：scale(1.1,1.2)；

transform：translate(x，y)；

transform：skew(9deg，0deg)

7.用纯CSS创建一个三角形

原理是将上、左、右的颜色设为透明transparent

#demo{

width:0;

height:0;

border-width:20px;

border-style:solid;

border-color:transparent transparent red transparent;

}

8.常见的浏览器兼容性问题及其解决方法，常用的hack方法。

1.png24位图片在IE6浏览器上出现背景，解决方法：将图片做成png8；

2.浏览器默认的样式不同。解决方法：设置初始样式清除。或者使用normalize.css进行样式统一。

3.IE6出现双倍外边距的问题，在IE6里，块元素设置浮动后，再设置margin会出现双外边距的问题；解决方法：使用css-hack，在原本的margin：10px；后面加一个 _margin：10px；

4.Chrome中文界面下回默认将小于12px的文本强制按照12px显示，解决方法：加入CSS属性 -webkit-text-size-adjust:none;

注意点.超链接访问过后hover样式不生效，解决方法：按照L-V-H-A顺序书写a:link -->a:visited -->a:hover -->a:active

9.li标签之间的空白间隙原因及其解决方法

行的排列会受到中间空白(回车/空格)的影响，因为空格也是一种字符，也会被应用样式，会占空间

解决方法：把字符大小设为0；

问题扩展：

在块级元素中包含img标签，会出现空隙的问题；

因为图片文字等inline元素默认的和父元素对其的方式是 baseline，而baseline与父级的底部有间隙。(w3c中img标签默认是一个inline标签)

解决方法：将对齐方式设为除了baseline以外的任何一种:

vertical-align:top/bottom/text-top/text-bottom

其实这个空隙是ie针对盒子模型设定的inline-height，和font-size；

所以也可以给img设置display:block;font-size:0;但是对于结构来说，有点本末倒置的意味。

10.在CSS中，visibility有个collapse属性，是干嘛的？

collapse是崩塌，失效的意思。

对于普通的元素visibility:collapse和display:none 表现相同，使元素隐藏并且不占据空间。

但是对于table来说，table会被隐藏，但是依然占据空间(ie不支持)

11.为什么要清除浮动？清除浮动的方式？

清除浮动是为了清除使用浮动的元素造成的影响；浮动的元素，高度会塌陷，对布局不利。

解决方法：

1.给父级div设置高度height

2.使父级div也一起浮动

3.给父级元素设置 overf:hidden;

4.使用clearfix类名

.clearfix:before,.clearfix:after{

content:"";

display:block;

height:0;

line-height:0;

visibility:hidden;

clear:both

}

.clearfix{

*zoom:1;

}

12.元素竖向的百分比设定是相对于容器的高度吗?

对于height属性来说，设置百分比就是设置相对于容器的百分比

对于margin、padding来说，设置竖向百分比却是以容器的宽度来计算

13.什么是响应式设计？响应式设计的基本原理是什么？

响应式设计(Responsive Web design)：集中创建页面的图片排版大小，可以智能的根据用户使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行对应的布局。

基本原理：使用@media媒体查询，然后使用不同的CSS规则来实现屏幕的最佳布局。

14.position:fixed;在手机端下无效怎么处理？

fixed的元素是相对于整个页面固定位置的，你在屏幕上滑动是在滑动整个viewport。

原来的网页还在，fixed也没有变过位置，所以说并不是手机端不支持fixed，只是fixed元素不是相对于手机屏幕固定的

我们可以设置

15.怎么实现div的居中？

1.水平居中

1.给div设置宽度，并使用margin：0 auto;

div{

width:100px;

height:100px;

margin:0 auto;

background:hotpink;

}

2.使用绝对定位

div{

position:absolute；

width:100px;

height:100px;

left:50%;

margin-left:-50px;

background-color:skyblue;

}

2.水平垂直居中

1.使用绝对定位

div{

position:absolute；

width:100px;

height:100px;

left:50%;

top:50%;

margin-left:-50px;

margin-top:-50px;

background-color:skyblue;

}

2.使用transform属性

div{

position:absolute；

width:100px;

height:100px;

left:50%;

top:50%;

transform:translate(-50%,-50%)

background-color:skyblue;

}

3.使用弹性布局

.container{

display:flex;

align-items:center;

justify-content:center;

}

.container div{

width:100px;

height:100px;

background-color:hotpink;

}