zoukankan      html  css  js  c++  java
  • 《精通CSS网页布局》读书报告 ----2016-12-5补充

     第一章:CSS布局基础

     

    1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5)

    2. html标签的语义性,要好好的看看哦!

    3.DTD:文档类型定义。

    4.内联——》内部——》外部

    5.导入css样式表: <link href="" rel="stylesheet">         

              <style> @import url("001.css")  </style>

    6.css用相对单位哦: px(相对于屏幕分辨率)

                 em

              rem

              百分比

    7.选择符:标签、id、类、子选择符(>)、相邻选择符(+)、属性选择符(需要深入的用一下)

        选择符分组、通配选择符、包含选择符

    8.div#box: 这样做的目的,提高选择器的优先级!

    9.伪类、伪元素

      a:link{} a:visited{}  a:hover{}    a:active        其他的元素也是可以的哦!

     

    第二章  Dreamweaver 实现CSS布局

    1.CSS的设备类型:媒体查询:查询设备类型(screen、print、handheld)

                                               查询设备的分辨率

     

    第三章  听话的文字和版式

    1. reset.css

    2.样式过滤技术(hack)来兼容不同的浏览器。  

    3.px:相对于屏幕分辨率,分辨率越大,相同设置的字体就越小!

       %、em:根据父元素来决定自己的大小。 一路向上找设置了font-size的父元素,如果没有,则参考浏览器默认的字体大小。

    4.布局居中

      a:text-align:center(IE)   这是控制文本居中的属性哦!

      b::margin-left:auto;margin-right:auto;  (W3C)

       布局定位(左、右):浮动布局(float),定位布局(position:absolute)

    5.vertical-align:限表格单元格、图像。     display:table-cell(让元素支持vertical-align属性)

    6.单行文本居中对齐:height = line-height

    7.绝对定位的参照物:position属性(absolute、relative、fixed)     body元素的左上角?

    8.定义行高:用相对单位哦,可以根据字体的大小进行自动调整。   1.6em ~ 1.8em 比较合理哦! 

       行高-字体大小/2 = 行间距, 上下行间距会重叠的哦 !

    9.背景色:background          前景色:字体颜色 color

     

    第四章  图像

    重点.好好的研究下image的解析规则哦!   background-image    <img>标签

    1.background属性装饰之用,不具备传递信息之用,而img标签传递信息之用。

       html的语义,任何一个标签都表示一个意思。

    2.路径:物理路径(本机路径)、网络路径

                绝对路径和相对路径。

       样式表路径:相对于自身的位置来确定的, js文件:根据它被引用的页面文件的位置确定url的相对位置。   图像文件应该也是得哦!

    3.块元素才能显示背景图像哦 !

    4.滤镜、阴影

    5.布局用margin取负哦!  不错的选择!

    6.伪列布局:使用背景图像哦! 

     

    第五章 超链接和导航菜单  

    1.伪类:元素的某一种状态下。  是一种选择器哦!

    2. :link :visited  :hover  :active  :focus  :first-child

    3. 为超链接设置background-image,有点过时了哦,现在那么多矢量图标库! 

    4.text-indent:隐藏文本哦!

    5.list-style-img、list-style-position:inside

    6.浮动布局溢出:子元素浮动,父元素正常流动显示。跑出父元素的怀抱。

        float与min-height一起用,防止自动缩放过头。

    7.滑动门菜单导航哦!  两张banner。  

     

    第六章  表格和表单

    1.搜索引擎:语义化,给搜索引擎读的哦!

    2.table tr td caption th     行分组:thead tbody tfoot     列分组:colgroup  col

    3.border-collapse:合并边框

    4.fieldset legend  label    

    5.表单:传递数据哦!    

     

        

    第七章 浮动的网页布局

    1.clear:both, 强迫父元素自动撑开,适应子元素高度。 

    2.盒模型:拥有margin、padding、border、height、width

        所有元素都具备盒模型, 但不一定完整哦!  

        块级元素和浮动元素拥有完整的盒模型结构。 但流动的行内元素就没有高、宽、部分边距属性哦。

    3.行内元素:margin上下无效

    4.一旦元素浮动,就拥有完整的盒模型结构哦!

    5.margin会重叠哦! 

    6.块状元素: 如div

      a:独占一行

      b:完整的盒模型结构

       行内元素: 如span

      a:根据内容宽度显示

      b:不具备完整的盒模型结构

       通过display可以改变元素的显示状态哦:block  inline。

        none:隐藏元素显示

        inline-block:行内块

        list-item:列表

       

    第八章:精确的网页布布局(懂得规则)

    一前言:

      a:做定位元素需是块级元素哦!  

      b:  做定位一定要找对参照物哦!  这一点太重要了哦 ! 

      c:定位遵循规则,外部相对定位,内部绝对定位哦! 

     

    二:四种定位

    1:static 静态定位

      浏览器解析规则:从上到下。 所以元素在网页中的位置决定了它们被解析和现实的顺序。

          所有元素默认是静态定位。

          在正常文档流中哦。

    2:absolute 绝对定位 

      脱离文档流,不会影响之前的元素哦!   注意绝对定位元素的相对特性哦,虽然在文档流中的位置已经不存在了,大小不会影响到包含元素哦。

          绝对定位的相对特性:就是定位会受到参照物的影响(如果top、right、bottom、left定位属性中有未定义的)

          参照物:position属性为relative和absolute的父级元素哦!     一路向上,最终以html作为参照物。

          定位属性:left、right、top、bottom、z-index   clip、visibility

          坐标系:  顶外      包含元素的顶内(top)     定位收到border-width的影响哦!

     

    3: relative 相对定位

           是static定位和absolute的折中方案, 既不脱离文档流,又可以通过坐标值进行定位偏移。

       参照物:永远是其自身,文档流中的原始位置, 所以原始位置被改变,则相对定位的元素的位置也会改变哦!  

                                                    相对定位的元素与未定位之前的元素互相关联,改一个另一个也会跟变哦。

                    a:改变父元素的margin、paddding等。

                    b:改变自身的高度等属性。

           没有脱离文档流,自然就会影响原来的关联元素哦。  因为原始的位置依然保留!

           相对定位的覆盖:后面的会覆盖前面的哦!   这个很好理解吧! 先来先定位,后来后定位。

           坐标系:顶外      顶外(top)        同样定位受到border-width的影响哦!

    4: fixed 固定定位

          参照物:浏览器窗口为参照物。

          脱离文档流。(fixed、absolute)

     

    三:层叠

      1.默认情况下,相对定位、绝对定位、固定定位元素的z-index值要比static的z-index的值要高。

     

     

    第九章 兼容性网页布局

    1.兼容性,给兼容性不好的浏览器打补丁。

    2.IE条件语句      过滤器:html>/**/body #box{}  

       z-index:取负。。。

    3.渲染引擎

     

     

    第十章 网页结构化布局与实施

    1.构图-》绘图—》切图 

    2.SEO:search engine optimization   

       搜索引擎的蜘蛛按照页面代码从上到下搜索。

    3.响应式

     

     

    第十一章 CSS框架设计及其案例解析

    1. 框架:降低开发难度,加快开发进度!    兼容性、配套技术解决方案。

    2. 框架和库有何区别呢? 

     

     

     

     

     

     

    重点突破研究:(实践是检验真理的唯一标准哦)

      1.块级元素和行内元素的区别?    

      2.因为百分比是相对单位,是参照父元素的值决定的。   相对定位找参照物的高度和宽度,绝对定位也是如此哦!

      3.绝对定位以html为参照物和固定定位的参照物是不是一样的啊?      试一下就知道了!

          4.元素被声明为absolute定位后,元素以inline-block的方式显示哦!      更严谨一点将是依旧是display:block,依旧会换行,但宽度不再是一整行了哦!

          5.css中的值的取值问题哦!    负值?  

      6.CSS引擎, 排版引擎和渲染引擎。  

          7.Web标准的研究! 

      8.块级元素使用position:absolute, 会让块级元素自动包裹子元素哦,  使用float也有此效果哦!

          9.float与元素的显示问题:display?     float改变display?     

         10.opacity还可以改变背景图像的透明度哦!

         11.行内元素?  块级元素?    是什么? 都有哪些呢? 

         12.

        

     

     

     

     

     

          

     

  • 相关阅读:
    XML之四种解析dom,sax,jdom,dom4j原理及性能比较
    uni-app 下小程序bindgetuserinfo不回调原因
    微信小程序 -- 真机不打开调试无法正常使用小程序的坑
    如何申请腾讯位置服务的密钥
    使用Promise封装小程序wx.request的实现方法
    关于vue-router当中addRoutes的使用
    前端Promise总结笔记
    css怎么设置超出几行显示省略号?
    大数据Spark和Hadoop以及区别(干货)
    Spark和Hadoop的区别和比较
  • 原文地址:https://www.cnblogs.com/njqa/p/6132673.html
Copyright © 2011-2022 走看看