《CSS那些事儿》读书笔记
- 此书出版于2009年,所以有些知识...你懂得。
- 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧。
- 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多多指教。
- 代码演示我统一放到了jsfiddle上,国内访问速度稍慢些,大家耐心点。或是大家知道国内有类似的在线调试网站,麻烦和我分享下,在此先谢了。
- 该笔记中只给出了部分代码演示链接,如果想看该书的完整示例代码,可到百度云:http://pan.baidu.com/s/1o64sPR0 下载,我已经共享好了。
- 该笔记较长,大家耐心点哦。
- 修饰页面文本、图片等页面元素,避免使用不必要的HTML元素。
- 更有效地控制页面结构、页面布局。
- 提高开发和维护效率。
- 颜色的缩写:#RRGGBB –– 缩写成 #RGB。
- 单位值的省略:当数值为0时,可省略单位。
- 内外边距的简写:根据上右下左的顺时针方向,有4种简写方式。
- 边框的简写:border: -width || -style || -color。
- 背景的简写:background: -color || -image || -repeat || -attachment || -position
- 字体的简写:font: -style || -variant || -weight || -size || /line-height || -family
- 列表的简写:list-style: -image || -position || -type
- 标签选择符:E(html标签)
- ID选择符:#className
- 类选择符:.className
- 通配符选择符:*
- 包含选择符:又称派生或后代选择符,作用于元素的后代元素。
- 子选择符:又称子对象选择符,作用于元素的子元素,用“>”连接选择符(IE7+)。
- 相邻选择符:作用于元素的相邻的下一个元素(线性结构中的直接后驱),用”+“连接选择符(IE7+)。
- 属性选择符:E[attr]、E[attr=“value”]、E[attr~=“value”]、E[attr|=“value”]、E[attr^=“value”]
- 选择符的组合关系:针对性使用类选择符或ID选择符、选择符群组、选择符组合。
- html:表示在html中是使用的样式。
- 作者:表示CSS文件的编写者。
- 用户:指浏览器网页的用户所设置的样式。
- 浏览器:指浏览器默认样式。
- 标有!important关键字声明的属性。
- html中的CSS样式属性。
- 作者编辑的CSS文件样式属性。
- 用户设置的样式。
- 浏览器默认的样式。
- 标签选择符、伪类及伪对象:优先级积分为1。
- 类选择符、属性选择符:优先级积分为10。
- ID选择符:优先级积分为100。
- style属性:优先级积分为1000。
- 其他选择符,如通配符选择符等:优先级积分为0。
- 两列定宽结构:
要点:float、width指定、 :after清除浮动。
效果:http://jsfiddle.net/XianfaLang/tWvph/
前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象。 - 两列自适应结构:
要点:float、width百分比、 :after清除浮动。
效果:http://jsfiddle.net/XianfaLang/MyfXs/ - 单列定宽-单列自适应结构:
要点:相对定位、负边距效果:http://jsfiddle.net/XianfaLang/U3J3X/
问题:当sideBox的内容很多时,使用绝对定位导致无法撑开父元素的高度,而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决,个人觉得应该有CSS方案来解决这个问题,而不是用javascript来解决。这不,第5章就给出了一种解决方案:http://jsfiddle.net/XianfaLang/5w8MD/ - 两列等高:
4.1. 背景模拟:利用背景图片的平铺,在视觉效果上产生等高的感觉。
4.2. 负边距实现(推荐):
原理:利用左右两个方向的外边距弥补在页面中布局出现错位的现象。
要点:两容器设置margin-bottom:-9999px; padding-bottom:9999px,父元素设置overflow:hidden;
效果:http://jsfiddle.net/XianfaLang/Q5nph/
问题:如果页面使用<a>做页面跳转,将会隐藏部分文字信息。如果将背景图片放到mainBox或者sideBox底部,将看不到背景图片。
4.3. 边框模拟:
要点:border-right:280px solid #AAAAAA; 绝对定位
效果:http://jsfiddle.net/XianfaLang/tLmTc/
4.4. JS方式:
要点:使用javascript设置两列高度相同。
效果:http://jsfiddle.net/XianfaLang/C9XcZ/
- 了解width:auto与float的关系:http://jsfiddle.net/XianfaLang/nMyh4/
- 两列定宽中间自适应结构:
要点:浮动、负边距、mainBox的width为100%。
效果:http://jsfiddle.net/XianfaLang/dsfKU/ - 左侧定宽-右侧和中间自适应结构:
要点:浮动、margin百分比、负边距。
效果:http://jsfiddle.net/XianfaLang/nB57t/ - 三列宽度自适应结构:同左侧定宽-右侧和中间自适应结构类似,把宽度改为百分比即可。
- 三列等高:
原理同两列等高类似,也有4种实现方式。这里只列举两种:
负边距实现:http://jsfiddle.net/XianfaLang/hRq2q/
边框模拟:http://jsfiddle.net/XianfaLang/EBww5/
- text-indent属性可将文字往旁边“推”,如:p { text-indent: 2em; } /* 设置段落缩进2em */ 联想到负边距有“吸”功效。
- 隐藏文字方法:
a. 使用text-indent/line-height 将文字“推”到容器之外。
b. visibility: hidden; 设置元素不可见,但占空间位置。
c. display: none; 设置元素不可见,不占空间位置。
- 是目前保证最不失真的格式,它汲取了GIF和JPG二者的优点,存储形式丰富。
- 即能把图像文件压缩到极限以利于网络传输,又能保留所有与图像品质有关的信息。
- 显示速度快。
- 支持透明图像的制作。
- 图片是否严重失真。
- 哪种格式的图片是最小的。
- 图片是否有透明效果,如果有,那是否有alpha透明效果。
- 任何背景图片都是先设置水平方向的定位,再设置垂直方向的定位。
- 只有一个数值时,该数值将作用于水平方向的定位,而垂直方向的定位将以默认的50%为基准。
- 属性值为百分比时,将以图片的中心点为基准计算其相对位置,而使用px像素值时将以图片的左上角为基准。
- 可以使用负值。
- 固定容器的宽度和高度。
- 超出容器的宽度和高度部分的背景图片需要隐藏。
- 背景图片在合并时,需要考虑每张图片的用途。
- 无序列表:<ul><li>...</li></ul>
- 有序列表:<ol><li>...</li><ol>
- 自定义列表:<dl> <dt>标题</dt> <dd>内容</dd> </dl>
- 二级菜单导航(横排):
要点:整体宽度、一级列表宽高和浮动、二级列表绝对定位。
效果:http://jsfiddle.net/XianfaLang/4CPdG/ - 图文列表信息:
要点:整体宽度、浮动。
效果:http://jsfiddle.net/XianfaLang/KM7Ua/
- 理解每个例子中所讲解的步骤及实现的方法。
- 分析每个方法的可用性及是否有其他更好的实现方法。
- 总结在每次实践中所得到的经验。
- 页面中使用CSS滤镜的次数会不会过多。
- 使用CSS滤镜是不是会占用较多的CPU。
- 能否使用图片直接代替由CSS滤镜产生的效果。
- 使用CSS滤镜后,会不会影响到页面中的内容操作。
- 解决页面错位现象。
- 解决子元素浮动导致父元素无法自适应子元素高度的问题。
.clearFix:after {
clear: both; /* 清除伪类层以上的浮动 */
display: block; /* 使生成的元素以块级元素显示,占满剩余空间; */
visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */
height:;
line-height:; /* 设置伪类层中的高度和行高为0 */
content: " "; /* 将伪类层中的内容清空 */
}
.clearFix {
zoom:; /* 针对IE浏览器产生hasLayout效果清除浮动 */
} /* 更简洁的写法 */
.clearFix:before,
.clearFix:after {
content: "";
display: table;
} .clearFix:after {
clear: both;
}
.clearFix{
zoom:;
}
- 当样式无法正常加载时,依然会显示条理清晰的文档结构。
- 增加SEO(搜索引擎优化)性能。
- 加强与程序开发之间的配合。
- 提高页面后期维护的工作效率。
- 多看CSS手册。
- XHTML代码中每个标签的含义。
- 善于分析CSS布局网站的处理方式。
- 多做CSS布局网站的练写。
- 学会使用网络搜索引擎。
- 善于利用辅助工具解决布局问题(Firebug, Chrome devtool)。
- 善于总结经验、整理笔记(这里推荐大家使用有道云笔记,PC/Mobile/Web都有,而且在微信中复制链接可直接同步云笔记,这样便于大家利用碎片时间阅读笔记)。
- 收藏和使用代码片段。
《CSS那些事儿》读书笔记的更多相关文章
- csapp读书笔记-并发编程
这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...
- CSAPP 读书笔记 - 2.31练习题
根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1) 属于第一种情况 sum = x ...
- CSAPP读书笔记--第八章 异常控制流
第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...
- CSAPP 并发编程读书笔记
CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 读书笔记--SQL必知必会18--视图
读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...
- 《C#本质论》读书笔记(18)多线程处理
.NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...
- C#温故知新:《C#图解教程》读书笔记系列
一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...
- C#刨根究底:《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- Web高级征程:《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
随机推荐
- 趁有空,再了解一下GROOVY中关于类的通例
简单的,浅浅的看一下. 想起了RUBY里覆盖类的方法... 在GROOVY里也同样提到了,比如TOSTRING... (其实,在我以前的经验中,从未用过这些东东..:)) 这样用了PACKAGE,显得 ...
- sublime每次打开时都提示升级,怎么取消这个弹出框?
答案其实很简单,设置如下: 进入Preferences -> Settings-User ,添加 "update_check": false 重启Sublime. 发现了什么 ...
- COJ 0967 WZJ的数据结构(负三十三)
WZJ的数据结构(负三十三) 难度级别:E: 运行时间限制:7000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大 ...
- javascript 路线整理
前端开发很重要,编写脚本也不容易. 总结我以前的前端学习经历,基本是一团乱麻:css+javascript是在大三自学的,当时自己做课程设计,逼着自己在一个月之内,写了一个半成品的j2ee网站.当时, ...
- 【转】Android开发中adb启动失败adb连接异常的解决办法 offline
原文网址:http://www.cnblogs.com/yejiurui/p/4173521.html 一.情况描述: 我们在使用eclipse开发有时候会出现adb连接异常中,有时候控制台会打印出来 ...
- Android FileUtil(android文件工具类)
android开发和Java开发差不了多少,也会有许多相同的功能.像本文提到的文件存储,在Java项目和android项目里面用到都是相同的.只是android开发的一些路径做了相应的处理. 下面就是 ...
- HDOJ(HDU) 2148 Score(比较、)
Problem Description 转眼又到了一年的年末,Lele又一次迎来了期末考试.虽然说每年都要考试,不过今年的这场考试对Lele来说却意义重大. 因为经济原因,如果今年没有排在班级前几名, ...
- HDOJ(HDU) 2109 Fighting for HDU(简单排序比较)
Problem Description 在上一回,我们让你猜测海东集团用地的形状,你猜对了吗?不管结果如何,都没关系,下面我继续向大家讲解海东集团的发展情况: 在最初的两年里,HDU发展非常迅速,综合 ...
- [Locked] Group Shifted Strings
Group Shifted Strings Given a string, we can "shift" each of its letter to its successive ...
- The Minimum Length - HUST 1010(求最小循环节)
题意:有个一字符串A(本身不是循环串),然后经过很多次自增变成AAAAA,然后呢从自增串里面切出来一部分串B,用这个串B求出来A的长度. 分析:其实就是求最小循环节.......串的长度 - 最大 ...