《精通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.