还剩11页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
[HTML CSS]
1.Doctype严格模式与混杂模式-如何触发这两种模式，区分它们有何意义？Doctype声明位于文档中的最前面的位置，处于标签之前此标签可告知阅读器文档运用哪种HTML或XHTML规范该标签可声明三种DTD类型，分别表示严格版本、过渡版本以与基于框架的HTML文档当阅读器厂商起先创建与标准兼容的阅读器时，他们希望确保向后兼容性为了实现这一点，他们创建了两种呈现模式标准模式和混杂模式quirks mode在标准模式中，阅读器依据规范呈现页面；在混杂模式o中，页面以一种比较宽松的向后兼容的方式显示混杂模式通常模拟老式阅读器比如Microsoft IE4和Netscape Navigator4的行为以防止老站点无法工作阅读器依据DOCTYPE是否存在以与运用的哪种DTD来选择要运用的呈现方法假如XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现对于HTML
4.01文档，包含严格DTD的DOCTYPE经常导致页面以标准模式呈现包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现
2.行内元素有哪些？块级元素有哪些？CSS的盒模型？行内元素有a bspan Ib emimg inputselect strong块级元素有div ulol lidl dtdd h1h2h3h4…p引起大家正视，给li不同的属性会有不同的说明效果，ff下的说明稍可理解，ie6下的说明会让你摸不着头脑，由于问题的困难性，将另起一文特地探讨该问题在《山使用心得》一文里有相关成果，却没给出问题解决的过程
10.img下的留白解决方案:给img设定display:block
011.失去line-heightdiv style=,,line-height:20px img/文字v/div,很缺憾，在ie6下单行文字line-height效果消逝了…，缘由是vimg/这个inline-block元素和inline元素写在一起了解决方案让img和文字都float起来
12.链接的hover状态a:hover img｛width:300px｝我们想让鼠标hover时，链接里包含的图片宽度变更，惋惜在ie6下无效，ie
7、ff下有效
13.非链接的hover状态div:hove｛r（这样的样式ie6是不认的，在ie
7、ff下才有效果
14.ie下overflow:hidden对其下的确定层position:absolute或者相对层position:relative无效解决方案给overflow:hidden加position:relative或者position:absolute另，ie6支持overflow-x或者overflow-y的特性，ie
7、ff不支持
15.ie6下严峻的bug,float元素如没定义宽度，内部如有div定义了height或zoom:1,这个div就会占满一整行，即使你给了宽度float元素假如作为布局用或困难的容器，都要给个宽度的
16.ie6下的bug,确定定位的div下包含相对定位的div,假如给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层确定层将被撑大解决方案给内层相对层float属性
17.ie6下的bug,vheadv/head内有〈base target=w_blankw/的状况下，position:relative层下的float层内文字无法选中
18.最终来了个ff的缺点width:100%这个东西在ie里用很便利，会向上逐层搜寻width值，忽视浮动层的影响，ff下搜寻至浮动层结束，如此，只能给中间的全部浮动层加width:100%才行，累啊opera这点倒学乖了跟了ieo
8.如何居中一个浮动元素？设置容器的浮动方式为相对定位，然后确定容器的宽高,比如宽500高300的层，然后设置层的外边距div{Width:500px;height:300px;Margin:-150px00-250px;position:relative;left:50%;top:50%;}
9.有没有关注HTML5和CSS3如有请简洁说一些您对它们的了解状况！HTML5标签的变更〈header〉，footer,dialog,aside,figure,section等IE9以上起先支持CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器
10.假如让你来制作一个访问量很高的大型网站，你会如何来管理全部CSS文件、JS与图片？
11.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:O;height:0;}.clearfix:after{clear:both;content:.[display:block;visibility:hidden;height:0;}.clearfix{display:inline-block;}*html.clearfix{height:1%;}.clearfix{display:block;}.clearf ix{*zoom:1;}.clearfix:af ter{cont ent:\20;display:block;height:0;clear:both;}.clearfix:after{content:.;display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/*Hides from lE-mac\*/*html.clearfix{height:l%;}.clearfix{display:block;}/*End hidefromlE-mac*/这个clearfix的CSS运用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容在这里添加了一个句号7,并且把它的display设置成block;高度设为；clear设为both;visibility设为隐藏这样就达到了撑开容器的目的要让IE也完备显示，则必需在clearfix这个CSS定义的后面加上一些特地为IE设定的HACK盒模型margin border padding width
3.CSS引入的方式有哪些？link和@import的区分是？
1.运用LINK标签将样式规则写在.CSS的样式文件中，再以vlink标签引入link rel=stylesheet type=text/css href=example.css
2.运用@import引入跟link方法很像，但必需放在STYLE...v/STYLE中STYLE TYPE=text/css!-©import urlcss/example.css;/STYLE
3.运用STYLE标签将样式规则写在v STYLE〉.../STYLE〉标签之中STYLE TYPE=text/css!-body{color:#666;background:#fOfOfO;font-size:12px;}td,p{color:#cOO;font-size:12px;}—/STYLE
4.运用STYLE属性将STYLE属性干脆加在个别的元件标签里，〈元件（标签）STYLE-性质（属性）1设定值1；性质（属性）2:设定值2;…}
5.运用vspanv/span标记弓|入样式span style=font:12px/20px#000000;cnwebshow/span两者区分加载依次的差别当一个页面被加载的时候，link弓|用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如main.css@import“sub Less”;@import sub
2.css”;这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，阅读量大的网站还是谨慎运用
4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？•通配选择符*{sRules}•类型选择符E{sRules}td{font-size:14px;width:120px;}•属性选择符E[attr]{sRules}E[attr=value]{sRules}E[attr~=value]{sRules}E[attr|=value]{sRules}h[title]{color:blue;}/*全部具有title属性的h对象*/span[class=demo]{color:red;}div[speed=fast][dorun=no]{color:red;}a[rel-=copyright]{color:black;}•包含选择符El E2{sRules}table td{font-size:14px;}•子对象选择符ElE2{sRules}div ulli p{font-size:14px;}•ID选择符#ID{sRules}•类选择符E.className{sRules}•选择符分组El,E2,E3{sRules}•伪类与伪对象选择符E:Pseudo-Classes{sRules}Pseudo-Classes[:link:hover:active:visited:focus:first-child:first deft:right:lang]E:Pseudo-Elements{sRules}Pseudo-Elements[:first-letter:first-line:before:aft er]可以继承的有font-size font-family color不行继承的一般有borderpaddingmargin background-colorwidth height等关于CSS specificityCSS的specificity特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定与计算方式，specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不行超越在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级选择符Specificity值列表规则
1.行内样式优先级Specificity值为1,0,0,0,高于外部定义如〈div style=color:redn sjweb/div外部定义指经由link或〈style,标签定义的规则；
2.!important声明的Specificity值最高；
3.Specificity值一样的状况下，按CSS代码中出现的依次确定，后者CSS样式居上；
4.由接着而得到的样式没有specificity的计算，它低于一切其他规则（比如全局选择符*定义的规则）算法当遇到多个选择符同时出现时候按选择符得到的Specificity值逐位相加，{数位之间没有进制比如说0,0,0,5+,0,0,5=0,,0,1而不是0,0,1,0}就得到最终计算得的specificity,然后在比较取舍时依据从左到右的依次逐位比较实例分析
1.div{font-size:12px;}分析2个元素{div},Specificity值为0,0,0,
13.body divp{color:green;}分析4个元素{body divp},Specificity值为0,0,0,
35.div.sjweb{font-size:12px;}分析:1个元素{div},Specificity值为0,0,0,11个类选择符{.sjweb},Specificity值为0,0,1,0最终Specificity值为0,0,1,
16.Div#sjweb{font-size:12px;}分析1个元素{div},Specificity值为0,0,0,11个类选择符{.sjweb},Specificity值为0,1,0,0最终:Specificity值为0,1,0,
17.htmlbody div[id=totals,,]ul lip{color:red;}分析值为8个元素{html bodydiv ullip}Specificity0,0,0,61个属性选择符{[id=totals]}Specificity值为,0,1,0值为2个其他选择符{}Specificity,0,0,0最终:Specificity值为0,0,1,6!important的优先级最高运用!important可以变更优先级别为最高，其次是style对象，然后是id classtag,另外在同级样式依据申明的依次后出现的样式具有高优先级
5.前端页面由哪三层构成，分别是什么？作用是什么？网页分成三个层次，即结构层、表示层、行为层网页的结构层structural layer由HTML或XHTML之类的标记语言负责创建标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息例如，P标签表达了这样一种语义“这是一个文本段J网页的表示层presentation layer由CSS负责创建CSS对“如何显示有关内容”的问题做出了回答网页的行为层behavior layer负责回答“内容应当如何对事务做出反应”这一问题这是Javascript语言和DOM主宰的领域
6.css的基本语句构成是？选择器{属性1值1；属性2:值2;……}
7.你做的页面在哪些流览器测试过？这些阅读器的内核分别是什么？经常遇到的阅读器的兼容性有哪些？怎么会出现？解决方法是什么？IE内核阅读器360,傲游，搜狗，世界之窗，腾讯TT非IE内核阅读器firefox operasafari chrome
1.就是ie6双倍边距的问题，在运用了float的状况下，不管是向左还是向右都会出现双倍，最简洁的解决方法就是用display:inline;加到CSS里面去
2.文字本身的大小不兼容同样是font-size:14Px的宋体文字，在不同阅读器下占的空间是不一样的，ie下实际占高16px,下留白3px,ff下实际占高17px,上留白lpx,下留白3px,opera下就更不一样了解决方案给文字设定line-height确保全部文字都有默认的line-height值这点很重耍，在高度上我们不能容忍lpx的差异
3.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效所以不要轻易给容器定义heighto
4.还探讨内容撑破容器问题，横向上的假如float容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行故，内容可能撑破的浮动容器须要定义Width O
5.浮动的清除，ff下不清除浮动是不行的
6.mirrormargin bug,当外层元素内有float元素时，外层元素如定义margin-top:14px,将自动生成margin-bottom:14pxpadding也会出现类似问题，都是ie6下的特产，该类bug出现的状况较为困难，远不只这一种出现条件，还没系统整理解决方案外层元素设定border或设定floato
7.吞吃现象，限于篇幅，我就不绽开了还是ie6,上下两个div,上面的div设置背景，却发觉下面没有设置背景的div也有了背景，这就是吞吃现象对应上面的背景吞吃现象，还有滚动下边框缺失的现象解决方案运用zoom:1这个zoom好象是特地为解决ie6bug而生的
8.注释也能产生bug〜〜〜“多出来的一只猪这是前人总结这个bug运用的文案，ie6的这个bug下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变解决方案用UE]picRotate start![endif]-”方法写注释
9.li/里加float div/,这是一个典型的，麻烦的兼容问题，希望。
个人认证
优秀文档
获得点赞 0
