• 《css网站布局实录》(李超)——读书札记


    1.web表现层技术

    2.HTML链接设计思想

    3.对信息进行合理的分析、分类与处理来创造商业价值。

    4.头部描述浏览器所需信息,主体包含所需要展现的具体内容。

    5.HTML(XHTML)XML

    6.良好的css代码设计可以使代码之间产生继承及重载关系,能够达到最大限度地代码重用,从而降低代码量及维护成本。

    7.由于不同品牌浏览器及不同版本之间的渲染方式不同,各自解析css也存在一些差异。

    8.css hack可以简单地翻译为css黑客程序,它是一个被设计者们习惯使用的名称。它表现一种类似于欺骗浏览器的编码手段,由于存在浏览器兼容性问题,A浏览器不支持某些标签而B浏览器支持,因此使用这种欺骗方法,可以编写一段样式只被B浏览器解析,而A浏览器则会忽略,反之亦然。

    9.随着硬件水平提高,未来的界面设计必将丰富多彩。

    10.选择符优先权:id>class

    11.两行相同类型的css,一般执行后者,如

    div{background:#666;
          background:#fff;}

    12.div的最终目的是合理的标识出我们的内容区域。

    13.在适当情况下应该尽可能减少嵌套的使用,以保证浏览器不用过分的消耗资源来对嵌套关系进行解析,简单的嵌套结构更有利于我们对版式的理解与控制。

    14.选择符合需求的其他XHTML标签,合理的替代div。

    第三章 css网页布局与定位

    1.浮动是一种非常有用的布局方式,它能够改变页面中对象的前后流动顺序。这样做的好处是,使得内容的排版变得简单,具有良好的伸缩性。

    2.左栏固定(设置宽度)右栏自适应(不设置宽度)。

    3.绝对定位:它将从本质上与其他对象分离出来,它的定位模式不会影响其他对象,也不会被其他对象的浮动定位所影响。从某种意义上来讲,使用绝对定位之后,对象就像一个图层一样漂浮在网页之上。

    3.三列浮动中间列宽度自适应:

    #left{width:100px;height:300px;
    position:absolute;
    top:0px;left:0px;}
    #right{width:100px;height:300px;
    position:absolute;
    top:0px;right:0px;}
    #center{height:300px;
    margin-left:104px;
    margin-right:104px;}//margin-left和margin-right用于让出两侧列的宽度

    4.使用浮动对齐排列的核心技术在于对于宽度的合理控制。

    5.上下margin叠加(空白边叠加规则):当两个对象为上下关系时,而且都具备margin属性时,此时以较大的边距为主。注意:一旦把某个元素设定了float属性,那么它们将不再进行空白边叠加。

    6.IE6左右边距加倍问题:当我们的盒对象为浮动时,在IE6之中,盒对象的左右margin会加倍。这是IE6的CSS解析问题,我们可以通过设置对象的display:inline;来解决。

    7.css网页布局只能以两种方式存在:一种是浮动式布局,另一种则是定位布局。这两种定位方式的核心都为脱离于文档流的控制。

    8.文档流:对于一个XHTML网页,body元素下的任意元素,根据其前后顺序,组成一个个上下关系,这便是文档流。浏览器根据这些元素的顺序去显示它们在网页之中的位置。文档流是浏览器的默认显示规则。

    9.浮动的清理:

    10.当网站有较强的对分辨率及内容大小的适应能力的时候,就需要采用浮动定位。

    11.一些看似固定布局的网站,如果需要采用margin来控制对象占位,由于空白边距叠加规则,需要使用浮动来定位。

    补:float更适合对象的布局模式,而不是信息的组织(信息的组织可用display:inline)。

    12.相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与原始位置相对,并不破坏其原始位置的信息。

    13.b嵌套c,b相对定位,c绝对定位或相对定位时:c的相对定位是相对与b而言,并且在b元素之中仍然保留着c的占位信息。

    14.不占位的相对定位:父级相对定位,宽高明确,不设top和left,子级绝对定位,如:

    <div id="divGroup">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    </div>
    #divGroup{
    margin:50px 0 0 50px;
    position:relative;
    border:1px solid #000;
    width:400px;
    height:200px;
    }
    #a,#b,#c{
    border:1px solid #000;
    width:100px;
    height:100px;
    margin:2px 2px 2px 0;
    float:left;
    }
    #b{
    position:absolute;
    left:10px;
    top:30px;
    }

    15.绝对定位用于网页位置固定,而且不希望采用margin,padding,border等属性控制。

    (1)不规则网页设计

    由于设计需要,有些网页设计不会走分栏或块状布局的路线,而是随机地布置位置。在这种情况下,它们往往采用绝对定位或相对定位的各种组合方式来进行布局。

    (2)在画面上的设计

    如果需要一个元素覆盖在整个画面之上,但不希望破坏原有的结构,这时可以采用绝对定位或相对定位,使得某个或者某些对象覆盖在画面之上。

    (3)交互式设计

    下拉菜单是一种交互式设计,由于其菜单子项只有在鼠标移上时才出现,因此是一种需要覆盖在画面上方的设计。

    当子菜单需要根据父级的鼠标位置而发生改变,所以需要根据父级的鼠标位置行进定位。

    (以上两种情况的原则就是当子菜单出现时,不破坏其他元素的布局结构,所以需要它们浮于画面之上,这时便可以采用绝对或者相对定位)

    第4章 CSS网站元素设计

    1.div应当重点放在大面积块状区域,对于简单的只有文字的导航来说,ul更为轻巧灵活。

    2.当文字缩进text-indent为负值时,有必要将放文字的容器的内边距设置大于等于缩进的绝对值,以免文字显示在区域外。

  • 相关阅读:
    LeetCode——二叉搜索树中的中序后继 II
    一加 2020.10.13 笔试
    携程 2020.10.13 笔试
    中科曙光 2020.10.12 面试
    58 2020.10.11 笔试
    华为 2020.10.11 面试
    LeetCode——二叉搜索树中的顺序后继
    健网未来 2020.10.10 面试
    波特率
    PGA基础知识极简教程(4)从FIFO设计讲起之异步FIFO篇
  • 原文地址:https://www.cnblogs.com/quan-quanquan/p/5484518.html
Copyright © 2020-2023  润新知