黑马程序员技术交流社区

标题: 哈尔滨校区--技术贴--h5常见的问题 [打印本页]

作者: 莫里亚蒂.微 时间: 2016-2-28 22:03
标题: 哈尔滨校区--技术贴--h5常见的问题
overflow 属性规定当内容溢出元素框时发生的事情
HTML、CSS部分
要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等
1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
 （1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
 （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.行内元素有哪些？块级元素有哪些？空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素： <hr> <img> <input> <link> <meta>
 鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> 
3.CSS的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).
margin、padding、width、height可以确定文档布局
CSS还有一个规则：正常流块级元素的margin，width，padding，border之和必须等于包含块的内容区域，所以右边距会被重置为auto。
4.link 和@import 的区别是?
 （1）、link属于XHTML标签，而@import是CSS提供的;
 （2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
 （3）、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
 （4）、link方式的样式的权重高于@import的权重.
5.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
 * 1.id选择器（ # myid）
 2.类选择器（.myclassname）
 3.标签选择器（div, h1, p）
 4.相邻选择器（h1 + p）
 5.子选择器（ul < li）
 6.后代选择器（li a）
 7.通配符选择器（ * ）
 8.属性选择器（a[rel = "external"]）
 9.伪类选择器（a: hover, li: nth - child）
 * 可继承： font-size font-family color, UL LI DL DD DT;
 * 不可继承：border padding margin width height ;
 * 优先级就近原则，样式定义最近者为准;
 * 载入样式以最后载入的定位为准;
优先级为:
 !important > id > class > tag
 important 比内联优先级高
CSS3新增伪类举例：
 p:first-of-type 选择属于其父元素的首个 元素的每个 元素。
 p:last-of-type 选择属于其父元素的最后 元素的每个 元素。
 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
 p:only-child 选择属于其父元素的唯一子元素的每个 元素。
 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
 :enabled、:disabled 控制表单控件的禁用状态。
 :checked，单选框或复选框被选中。
6.如何居中div,如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:0 auto属性
 div{
 width:200px;
 margin:0 auto;
 }
居中一个浮动元素
 确定容器的宽高宽500 高 300 的层
 设置层的外边距
 .div {
 Width:500px ; height:300px;//高度可以不设
 Margin: -150px 0 0 -250px;
 position:relative;相对定位
 background-color:pink;//方便看效果
 left:50%;
 top:50%;
 }
7.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
 * IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
 * png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
 * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
 * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
 渐进识别的方式，从总体中逐渐排除局部。
 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2