招聘面试时将会被问到的1些CSS难题

日期:2021-03-21 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

仅以此篇缅怀那些笔试100次,问100次的CSS难题。

问:

  CSS挑选符有哪些?哪些特性能够承继?优先选择级?内联和important哪一个优先选择级高?

挑选符

1 通配挑选符(*) 表明网页页面内全部元素的款式 *{font-size:12px;margin:0;padding:0;} 2 种类挑选符(body、div、p、span等) 网页页面中已有的标识种类做为名字的挑选符 div{width:10px;height:10px;} 3 群组挑选符(,) 对1组目标另外开展同样的款式分派 a:link,a:visited{color:#fff;} 4 层级挑选符(空格) 包括挑选符对某目标中的子目标开展款式分派 #header top{width:100px;} 5 id挑选符(#) id挑选符具备唯1性,在网页页面中不可以反复应用 #header{width:300px;} 6 class挑选符(.) 能够在网页页面中反复应用 .title{width:300px;} 7 IEhack挑选符(_、*、\0、\9\0;) 适配不一样的访问器 .title{_width:50px;*height:30px;}

 

 

 

 

可承继的特性


拷贝编码
编码以下:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

优先选择级的4大标准

标准1:承继没特定的牛B

demo1:


拷贝编码
编码以下:

<style type="text/css">
*{font-size:20px}
.class3{ font-size: 12px; }
</style> </p> <p><span class="class3">我是多大字号?</span> <!-- 运作結果:.class3{ font-size: 12px; }-->

demo2:


拷贝编码
编码以下:

<style type="text/css">
#id1 #id2{font-size:20px}
.class3{font-size:12px}
</style> </p> <p><div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div> <!--运作結果:.class3{ font-size: 12px; }-->

标准2:#ID > .class > 标识

demo1:


拷贝编码
编码以下:

<style type="text/css">
#id3 { font-size: 25px; }
.class3{ font-size: 18px; }
span{font-size:12px}
</style> </p> <p><span id="id3" class="class3">我是多大字号?</span> <!--运作結果:#id3 { font-size: 25px; }-->

标准3:越实际越牛B

demo1:


拷贝编码
编码以下:

<style type="text/css">
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
.class3 { font-size: 12px; }
</style> </p> <p><div class="class1">
<p class="class2"> <span class="class3">我是多大字号?</span> </p>
</div> <!--运作結果:.class1 .class2 .class3{font-size: 25px;}-->

标准4:标识#ID > 标识.class

demo1:


拷贝编码
编码以下:

<style type="text/css">
span#id3{font-size:18px}
#id3{font-size:12px}
span.class3{font-size:18px}
.class3{font-size:12px}
</style></p> <p><span id="id3">我是多大字号?</span>
<span class="class3">我是多大字号?</span> <!--运作結果:span#id3{font-size:18px} | span.class3{font-size:18px}-->

最终:当标准以前矛盾的情况下,标准1 > 标准2 > 标准3 > 标准4

 

!important

IE6究竟认不了解!important???

  答:了解,可是有1个小bug。

比如:


拷贝编码
编码以下:

<style>
#ida {size:18px}
.classb { font-size: 12px; }
</style></p> <p><div id=“ida” class=“classb”>!important检测:18px</div>

添加!important


拷贝编码
编码以下:

<style>
#ida{font-size:18px}
.classb{ font-size: 12px !important; }
</style></p> <p><div id=“ida” class=“classb”>!important检测:12px</div>

IE6 BUG:


拷贝编码
编码以下:

<style>
.classb{ font-size: 18px !important; font-size: 12px }
</style></p> <p><div class=“classA”>!important检测:12px</div>

缘故和方法:

  这里在ie6下是12像素的字,而别的访问器下是18px的字。

  可是当大家把款式改1下,!important放在后边,即.classb{ font-size: 12px;font-size: 18px !important; },那末ie6下和别的访问器1样也是18px的字。