前端开发CSS常见问题

阿里巴巴前端开发大神有哪些
web前端开发有哪些语言
前端开发能在哪些地方就业

1、css选择器有哪些?
1)通用选择器:选择所有元素,不参与计算优先级,兼容性:IE6+
2)#X id选择器:选择id值为X的元素,兼容性:IE6+
3).X 类选择器:选择class包含X的元素,兼容性:IE6+
4)X Y 后代选择器:选择满足X选择器的后代节点中满足Y选择器的元素,兼容性:IE6+
5)X 元素选择器:选择所有标签为X的元素,兼容性:IE6+
6):link,:visited,:focus,:hover,:active链接状态:选择特定状态的链接元素,顺序LoVe HAte,兼容性:IE4+
7)X + Y 直接兄弟选择器:在X之后第一个兄弟节点中选择满足Y选择器的元素,兼容性:IE7+
8)X > Y 子选择器:选择X的子元素中满足Y选择器的元素,兼容性:IE7+
9)X ~ Y 兄弟:选择X之后所有兄弟节点中满足Y选择器的元素,兼容性:IE7+
10)[attr]:选择所有设置了attr属性的元素,兼容性:IE7+
11)[attr=value]:选择属性值刚好为value的元素
12)[attr~=value]:选择属性值为空白符分隔,其中一个的值刚好是value的元素
13)[attr|=value]:选择属性值刚好为value或者value开头的元素
14)[attr^=value]:选择属性值以value开头的元素
15)[attr$=value]:选择属性值以value结尾的元素
16)[attr
=value]:选择属性值中包含value的元素
17)[:checked]:选择单选框,复选框,下拉框中选中状态下的元素,兼容性:IE9+
18)X:after,X::after:after伪元素,选择元素虚拟子元素(元素的最后一个子元素),CSS3中,::表示伪元素。兼容性::after为IE8+,::after为IE9+
19):hover:鼠标移入状态的元素,兼容性a标签:IE4+,所有元素IE7+
20):not(selector):选择不符合selector的元素。不参与计算优先级,兼容性:IE9+
21)::first-letter:伪元素,选择块元素第一行的第一个字母,兼容性:IE5.5+
22)::first-line:伪元素,选择块元素的第一行,兼容性:IE5.5+
23):nth-child(an + b):伪类,选择前面an+b-1个兄弟节点的元素,其中n>=0,兼容性:IE9+
24):nth-last-child(an + b):伪类,选择后面有an+b-1个兄弟节点的元素,其中n>=0,兼容性:IE9+
25)X:nth-of-type(an + b):伪类,X为选择器,解析得到元素标签,选择前面有an+b-1个相同标签兄弟节点的元素。兼容性:IE9+
26)X:nth-last-of-type(an + b):伪类,X为选择器,解析得到元素标签,选择后面有an+b-1个相同标签兄弟节点的元素。兼容性:IE9+
27)X:first-child:伪类,选择满足X选择器的元素,且这个元素是其父节点的第一个子元素。兼容性:IE7+
28)X:last-child:伪类,选择满足X选择器的元素,且这个元素是其父节点的最后一个子元素。兼容性:IE9+
29)X:only-child:伪类,选择满足X选择器的元素,且这个元素是其父元素的唯一子元素。兼容性:IE9+
30)X:only-of-type:伪类,选择X选择器的元素,解析得到元素标签,如果该元素没有相同类型的兄弟节点时选中它。兼容性:IE9+
31)X:first-of-type:伪类,选择X选择的元素,解析得到元素标签,如果该元素是此类型元素的第一个兄弟,选中它。兼容性:IE9+

2、css sprite是什么,有什么优缺点?
概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点:
1)减少http请求数,极大地提高页面加载速度
2)增加图片信息重复度,提高压缩比,减少图片大小
3)更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现
缺点:
1)图片合并麻烦
2)维护麻烦,修改一个图片可能需要重新布局整个图片,样式

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

4、css hack原理及常用hack
原理:利用不同浏览器对css的支持和解析结果不一样,编写针对特定浏览器的样式。
常见的hack有:1)属性hack 2)选择器hack 3)IE条件注释
1)IE条件注释:适用于[IE5,IE9],常见格式如下:
[code]<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>[/code]
2)选择器hack:不同浏览器对选择器的支持不一样
[code]/ IE6 and below /

  • html #uno { color: red }

/ IE7 /
*:first-child+html #dos { color: red }

/ IE7, FF, Saf, Opera /
html>body #tres { color: red }

/ IE8, FF, Saf, Opera (Everything but IE 6,7) /
html>/**/body #cuatro { color: red }

/ Opera 9.27 and below, safari 2 /
html:first-child #cinco { color: red }

/ Safari 2-3 /
html[xmlns*=””] body:last-child #seis { color: red }

/ safari 3+, chrome 1+, opera9+, ff 3.5+ /
body:nth-of-type(1) #siete { color: red }

/ safari 3+, chrome 1+, opera9+, ff 3.5+ /
body:first-of-type #ocho { color: red }

/ saf3+, chrome1+ /
@media screen and (-webkit-min-device-pixel-ratio:0) {

diez { color: red }

}

/ iPhone / mobile webkit /
@media screen and (max-device-width: 480px) {

veintiseis { color: red }

}

/ Safari 2 – 3.1 /
html[xmlns*=””]:root #trece { color: red }

/ Safari 2 – 3.1, Opera 9.25 /
|html[xmlns=””] #catorce { color: red }

/ Everything but IE6-8 /
:root *> #quince { color: red }

/ IE7 /
*+html #dieciocho { color: red }

/ Firefox only. 1+ /

veinticuatro, x:-moz-any-link { color: red }

/ Firefox 3.0+ /

veinticinco, x:-moz-any-link, x:default { color: red }[/code]

3)属性hack:不同浏览器解析bug或方法
[code]/* IE6 */

once { _color: blue }

/ IE6, IE7 /

doce { color: blue; / or #color: blue */ }

/ Everything but IE6 /

diecisiete { color/**/: blue }

/ IE6, IE7, IE8 /

diecinueve { color: blue\9; }

/ IE7, IE8 /

veinte { color/*/: blue\9; }

/ IE6, IE7 — acts as an !important /

veintesiete { color: blue !ie; } / string after ! can be anything /[/code]

5、specified value,computed value,used value计算方法
1)specified value计算方法如下:
i.如果样式表设置了一个值,使用这个值
ii.如果没有设置值,这个属性是继承属性,从父元素继承
iii.如果没设置,并且不是继承属性,使用css规范指定的初始值
2)computed value
以specified value根据规范定义的行为进行计算,通常将相对值计算为绝对值,例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性,如width,margin,百分数就直接作为computed value。line-height的无单位值也直接作为computed value。这些值将在计算used value时得到绝对值。computed value的主要作用是用于继承
3)used value
属性计算后的最终值,对于大多数属性可以通过window.getComputedStyle获得,尺寸单位为像素。以下属性依赖于布局:
background-position
bottom,left,right,top
height,width
margin-bottom,margin-left,margin-right,margin-top
min-height,min-width
padding-bottom,padding-left,padding-right,padding-top
text-indent

6、link与@import的区别
1)link是html方式,@import是css方式
2)link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC
3)link可以通过rel=”alternate stylesheet”指定候选样式
4)浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式
5)@import必须在样式规则之前,可以在css文件中引用其他文件
6)总体来说:link优于@import

7、display:block;和display:inline;的区别
block元素特点:
1)处于常规流中时,如果width没有设置,会自动填充满父容器
2)可以应用margin/padding
3)在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4)处于常规流中时,布局在前后元素位置之间(独占一个水平空间)
5)[color=Red]忽略vertical-align[/color]
inline元素特点:
1)水平方向上根据direction依次布局
2)不会在元素前后进行换行
3)受white-space控制
4)[color=Red]margin/padding在竖直方向上无效,水平方向上有效[/color]
5)width/height属性对非替换行内元素无效,宽度由元素内容决定
6)非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height,margin,padding,border决定
7)[color=Red]浮动或绝对定位时会转换为block[/color]
8)vertical-align属性生效

8、png,gif,jpg的区别及如何选择?
gif:
1)8位像素,256色
2)无损压缩
3)支持简单动画
4)支持boolean透明
5)适合简单动画
jpeg:
1)颜色限于256
2)有损压缩
3)可控制压缩质量
4)不支持透明
5)适合照片
png:
1)有png8和true color png
2)png8类似gif颜色上限为256,文件小,支持alpha透明度,无动画
3)适合图标,背景,按钮

9、css有哪些继承属性?
关于文字排版的属性如:
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor

10、IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决?
1)IE6不支持min-height,解决方法使用css hack
[code].target {
min-height: 100px;
height: auto !important;
height: 100px; // IE6下内容高度超过会自动扩展高度
}[/code]
2)ol内li的序号全为1,不递增。解决方法:为li设置样式display:list-item;
3)未定位父元素overflow:auto;,包含position:relative;子元素,子元素高于父元素时会溢出。解决方法:
1)子元素去掉position:relative;
2)不能为子元素去掉定位时,父元素position:relative;
4)IE6只支持a标签的:hover伪类,解决方法:使用js为元素监听mouseenter,mouseleave事件,添加类实现效果。
5)IE5-8不支持opacity,解决方法:
[code].opacity {
opacity: 0.4
filter: alpha(opacity=60); / for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8/
}[/code]
6)IE6在设置height小于font-size时高度值为font-size,解决办法:font-size:0;
7)IE6不支持png透明背景,解决方法:IE6下使用gif图片
8)IE6-7不支持display:inline-block;,解决方法:[color=Red]设置inline并触发hasLayout[/color]
[code]display: inline-block;
display: inline;
zoom: 1;[/code]
9)IE6下[color=Red]浮动元素在浮动方向上[/color]与父元素边界接触,元素的外边距会加倍。解决方法:
a.使用padding控制间距
b.浮动元素display:inline;这样解决问题且无任何副作用:css标准规定浮动元素display:inline;会自动调整为block
10)通过为块级元素设置宽度和左右margin为auto时,IE6不能实现水平居中,解决方法:
[color=Red]为父元素设置text-align:center;[/color]

11、容器包含若干浮动元素时如何清理(包含)浮动
1)容器元素闭合标签前添加额外元素并设置clear:both;
2)父元素触发块级格式化上下文
3)设置容器元素伪元素进行清理
[code]/**

  • 在标准浏览器下使用
  • 1 content内容为空格用于修复opera下文档中出现
  • contenteditable属性时在清理浮动元素上下的空白
  • 2 使用display使用table而不是block:可以防止容器和
  • 子元素top-margin折叠,这样能使清理效果与BFC,IE6/7
  • zoom: 1;一致
    **/

.clearfix:before,
.clearfix:after {
content: ” “; / 1 /
display: table; / 2 /
}

.clearfix:after {
clear: both;
}

/**

  • IE 6/7下使用
  • 通过触发hasLayout实现包含浮动
    */
    .clearfix {
    zoom: 1;
    }[/code]

12、[color=Red]什么是FOUC?如何避免?[/color]
Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再重新显示文档,造成页面闪烁。解决方法:把样式表放到文档的head。

13、如何创建块级格式化上下文(block formatting context),BFC有什么用?
创建规则:
1)根元素
2)浮动元素(float不是none)
3)绝对定位元素(position取值为absolute或fixed)
4)display取值为inline-block,table-cell,table-caption,flex,inline-flex之一的元素
5)overflow不是visible的元素
作用:
1)可以包含浮动元素
2)不被浮动元素覆盖
3)阻止父子元素的margin折叠

14、[color=Red]外边距折叠[/color](collapsing margins)
毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。规则如下:
1)两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
2)浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
3)创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠
4)元素自身的margin-bottom和margin-top相邻时也会折叠

15、[color=Red]如何水平居中一个元素[/color]
1)如果需要居中的元素为常规流中的inline元素,为父元素设置text-align:center;即可实现
2)如果需要居中的元素为常规流中的block元素
i.为元素设置宽度
ii.设置左右margin为auto
iii.IE6下需在父元素上设置text-align:center;再给子元素恢复需要的值
3)如果需要居中的元素为浮动元素
i.为元素设置宽度
ii.position:relative;
iii.浮动方向偏移量(left或者right)设置为50%
iv.浮动方向上的margin设置为元素宽度一半乘以-1
4)如果需要居中的元素为绝对定位元素:
i.为元素设置宽度
ii.偏移量设置为50%
iii.偏移方向外边距设置为元素宽度一半乘以-1
5)如果需要居中的元素为绝对定位元素:
i.为元素设置宽度
ii.设置左右偏移量都为0
iii.设置左右外边距都为auto

16、如何垂直居中一个元素
需要居中元素为单行文本,为包含文本的元素设置大于font-size的line-height;

现在做前端开发用哪些问题
前端开发有哪些特点
前端开发在公司做哪些工作内容
» 本文来自:前端开发者 » 《前端开发CSS常见问题》
» 本文链接地址:https://www.rokub.com/6494.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!