• HTML&CSS


    1.Web标准

    WEB标准是一系列标准的集合。网页主要由三部分组成:结构、表现和行为。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript、JavaScript等。

    2.浏览器内核差异

    1)Tridend内核,它是IE的核心引擎,从IE诞生到现在一直使用的就是Tridend内核,国内的80%以上的浏览器用的都是它,只是在IE上面再次做了包装和本地化而已,如果搜搜、搜狗、360、遨游、世界之窗;其中搜狗浏览器可以使用双引擎,该引擎只在windows平台下使用。

    2)Gecko内核,这个是火狐firefox御用内核,新版的火狐对其进行了内核升级,据说可以将速度提升2-5倍。

    3)Webkit内核,大家知道有苹果的和google的浏览器使用的是该内核,它的优点是快速解析javascript,也是这些浏览器打广告时经常用到的口号,国产的双引擎浏览器搜狗高速浏览器就是采用了该内核。

    3.兼容性

    浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。

    4.Hack

    CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果.

    CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用Hack

    5.CSS基本功:

    布局:

    DIV+CSS布局中主要CSS属性:

    1)Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。

    2)Margin属性用于设置两个元素之间的距离。

    3)Padding属性用于设置一个元素的边框与其内容的距离。

    4)Clear: 使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。

    盒子模型:
    (1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
    (2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

    选择器优先级及使用:

    通常我们可以将CSS的优先级由高到低分为六组:

    (1)无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被人淡忘。

    (2)第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。

    (3)第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。

    (4)第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}

    (5)第五级由一个或多个 类型选择器定义。如 div{margin:6px;}  覆盖  *{margin:10px;} 。

    最低一级的选择器是为一个通配选择器,用*{margin:10px;}这样的类型来定义。

    另外,可以用一句极为简单的话来描述CSS优先级问题:当一个CSS选择器拥有更多的高级别属性时,它的优先级就会比较高。如 #i100 *.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{} ,这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个,当然前者优先级会比较高。

    HTML5:

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.

    CSS3:

    CSS即层叠样式表。 在网页制作时采用层叠样式表技术,可以有

    效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

     

    移动端适应 :

    (1)响应式布局

    相应式布局的核心内容其实就是使用CSS3引入的Media Query模块。它的意思就是,自

    动探测屏幕宽度,然后加载相应的CSS文件。以上所述就是响应式布局,主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适应的制作。这种方法比较布局灵活,一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是,设计成本和制作成本都较高,需要做不同的设计模版和页面模版,花费的时间较长。

     

    (2)高宽最大化

    所谓的高宽最大化是我自定义的名称,其意思是说,只设计一个模版,这个模版无论是从宽度上还是高度上,都做成最大比例的设计图。但大体上可以分为。2:3、3:4、3:5这三种比值。所以,为了兼容所有的浏览器,在设计图的时候要采用比值最小的为基本蓝图。即3:5的比例,也就是说以高度最高的为基本蓝图。

  • 相关阅读:
    Minimum Inversion Number(归并排序)
    Ultra-QuickSort(归并排序)
    求逆序数(归并排序)
    Hat's Fibonacci(大数,好)
    Baskets of Gold Coins
    Permutation Recovery(模拟)
    反恐训练营(LCS)
    I Hate It(线段树)
    敌兵布阵
    Django报错:提交表单报错---RuntimeError: You called this URL via POST, but the URL doesn’t end in a slash and you have APPEND_SLASH set.
  • 原文地址:https://www.cnblogs.com/xiaohuihui123/p/4728635.html
Copyright © 2020-2023  润新知