A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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)知名的空元素: <br> <hr> <img> <input> <link> <meta>
     鲜为人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
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> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :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已经独立识别。
     

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马