《CSS那些事儿》读书笔记_html/css_WEB-ITnose

注：

立即学习“前端免费学习笔记（深入）”；

Get笔记

Get笔记，一款AI驱动的知识管理产品

125

查看详情

耐心地学习CSS，掌握好CSS的本质原理后，你将会发现原来CSS真的很好玩。

立即学习“前端免费学习笔记（深入）”；

学习CSS最好的方法就是 不断地做，不断地想，不断地实践。

立即学习“前端免费学习笔记（深入）”；

CSS特点：

立即学习“前端免费学习笔记（深入）”；

CSS的简写：

立即学习“前端免费学习笔记（深入）”；

CSS选择符：

立即学习“前端免费学习笔记（深入）”；

伪类：

用来指定一个或者多个与其相关的选择符的状态( IE6/7支持部分)。其形式为：选择符:伪类 {属性:属性值;}。

如：a:link{}、a:visited{}、a:hover{}、a:active{}。

伪类可使页面增加更多交互效果，而不必去使用过多的javascript来辅助实现。

立即学习“前端免费学习笔记（深入）”；

伪对象：

指在html的文档指定的信息之外，创建文档的额外信息( IE6/7支持部分)。其形式：选择符:伪对象 {属性:属性值;}。

如：p:before {content: “4月1日”}。

立即学习“前端免费学习笔记（深入）”；

CSS层叠样式表的特色在于“层叠”，所谓 层叠即表示CSS样式表会根据选择符的使用而将样式相互叠加或者覆盖。

立即学习“前端免费学习笔记（深入）”；

网页定义的4种样式：

立即学习“前端免费学习笔记（深入）”；

CSS样式采用的优先顺序：

立即学习“前端免费学习笔记（深入）”；

选择符优先级积分：

立即学习“前端免费学习笔记（深入）”；

对于 !important关键字的使用一定要谨慎，切勿随便使用，避免产生不必要的问题。

立即学习“前端免费学习笔记（深入）”；

内嵌样式表，一般应用在访问量比较大的页面 减少对服务器的http请求数而减少对服务器的负担。

缺点是如果需要修改，那就只能对页面进行修改， 且无法利用浏览器缓存特性。

立即学习“前端免费学习笔记（深入）”；

由于浏览器最后解析@import，这样很容易导致IE6的闪屏或者在打开页面的过程中无样式，直到页面加载完毕后才会加载样式的现象出现，因此 不建议使用@import。

立即学习“前端免费学习笔记（深入）”；

因为浏览器在解析html代码时是由上而下的方式逐句分析的，因此 将mainBox放在sideBox之前的主要作用是将内容区域提前展现在浏览器中。

立即学习“前端免费学习笔记（深入）”；

在使用CSS样式布局页面结构时，不使用浮动那么就只能采用定位的方式进行页面布局。

立即学习“前端免费学习笔记（深入）”；

两列页面布局：

立即学习“前端免费学习笔记（深入）”；

三列或多列布局：

文本相关

立即学习“前端免费学习笔记（深入）”；

图片相关

PNG优点：

PNG缺点：不支持动画效果。

立即学习“前端免费学习笔记（深入）”；

PNG-8比GIF要小一点，GIF可制作动画而PNG-8无法实现动画效果。

PNG-24是色彩最丰富的图片，且支持alpha通道的透明，不像PNG-8和GIF只能支持全透明的图片。

支持alpha通道的透明，可以让图片产生半透明的效果，使页面更漂亮。

立即学习“前端免费学习笔记（深入）”；

采用哪种格式的图片作为背景图的参考点：

立即学习“前端免费学习笔记（深入）”；

background-position注意点：

立即学习“前端免费学习笔记（深入）”；

CSS Sprite常用来合并频繁使用的图形元素。

CSS Sprite注意点：

立即学习“前端免费学习笔记（深入）”；

图文混排：给设置float: left;

立即学习“前端免费学习笔记（深入）”；

三种列表：

立即学习“前端免费学习笔记（深入）”；

行内元素不具备宽高属性，只有将其转化为块级元素后才具备宽高属性。

CSS样式中能将块元素以横向排列方式排列的只有定位( position)和浮动( float)两种方式。

立即学习“前端免费学习笔记（深入）”；

CSS实现表现效果，javascript实现行为效果。

立即学习“前端免费学习笔记（深入）”；

CSS样式需要大家 不断去摸索，不断尝试新的内容才会使每个人自身对CSS样式的理解及处理问题的能力得到提升。

立即学习“前端免费学习笔记（深入）”；

列表示例：

立即学习“前端免费学习笔记（深入）”；

理解、分析、总结是必须要进行的几个步骤：

立即学习“前端免费学习笔记（深入）”；

在IE浏览器中，按钮与文字之间的垂直对齐关系 如同 复选框与文字之间的对齐关系，需要利用 vertical-align对其进行调整。

立即学习“前端免费学习笔记（深入）”；

表格相关

border-collapse：检索或设置表格的行和单元格的边是否合并到一起。默认值：separate。合并：collapse。

可使用相邻选择符实现隔行换色。个人觉得此知识点，主要是了解相邻选择符的应用，实际应用性不大。

日历表的制作： http://jsfiddle.net/XianfaLang/Z4wVQ/2/

立即学习“前端免费学习笔记（深入）”；

将table标签用于显示数据结构，而不是用于页面布局。

立即学习“前端免费学习笔记（深入）”；

float是将页面中的元素在水平方向上 并排显示的，而 position却是将页面的元素以 叠加的方式显示的。

立即学习“前端免费学习笔记（深入）”；

使用CSS滤镜之前，需要思考的几个问题：

立即学习“前端免费学习笔记（深入）”；

使用iframe实现的“选项卡”逐渐演变为将页面内容集于一体，通过JS切换显示内容。

实现tab选项卡要把握html结构与css样式之间的微妙关系。

立即学习“前端免费学习笔记（深入）”；

负边距与层叠效果的应用：怪异的导航菜单。

立即学习“前端免费学习笔记（深入）”；

IE浏览器会在每个列表li之间产生几个像素的空间，可用float:left;使多余的几个像素“消失”。

立即学习“前端免费学习笔记（深入）”；

分析实例最好的方法就是 将其简单化，从根本上去了解问题、分析问题。

立即学习“前端免费学习笔记（深入）”；

清除浮动作用：

立即学习“前端免费学习笔记（深入）”；

清除浮动的常用方法：

    1. clear属性--常用clear: both;

    2. 添加额外标签:

    3. 使用 br标签和其自身的 html属性:

    4. 父元素设置: overflow: hidden; *zoom:1; (在IE6中还需要触发 hasLayout ，例如 zoom：1)

    5. 父元素设置: display: table;

    6. 父元素设置  :after 伪类 (推荐)：

.clearFix:after {    clear: both; /* 清除伪类层以上的浮动 */    display: block;   /* 使生成的元素以块级元素显示,占满剩余空间; */    visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */       height: 0;    line-height: 0; /* 设置伪类层中的高度和行高为0 */    content: " "; /* 将伪类层中的内容清空 */}.clearFix {    zoom: 1; /* 针对IE浏览器产生hasLayout效果清除浮动 */}

结构分析是页面制作的第一步。

立即学习“前端免费学习笔记（深入）”；

用户习惯于滚动条上下移动，而不是左右移动。

立即学习“前端免费学习笔记（深入）”；

如果图片很大，可将其切成两张图片。

立即学习“前端免费学习笔记（深入）”；

使用语义的XHTML标签优点：

立即学习“前端免费学习笔记（深入）”；

分享自己的作品，对批评你作品的人表示感谢，因为他在告诉你如何才能做的更好。

立即学习“前端免费学习笔记（深入）”；

怎么提高自身编写代码的能力：