注: 此书出版于2009年,所以有些知识...你懂得. 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧. 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多多指教. 代码演示我统一放到了jsfiddle上,国内访问速度稍慢些,大家耐心点.或是大家知道国内有类似的在线调试网站,麻烦和我分享下,在此先谢了. 该笔记中只给出了部分代码演示链接,如果想看该书的完整示例代码,可到百度云:http://pan.baidu.com/s/1o64sPR0 下载,我已经

由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开,以做记录和日后翻查之用. 1.CSS的基本结构 Selector {property:value;} 由 选择符(Selector ),声明({}),属性(property),属性值(value)组成: 2.CSS的简写 颜色的简写: 有以下几种形式: #RRGGBB(16进制),RGB(125,0,255)

今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[class="one"][name="two"] class属性为one且name属性为two的p元素p[class~="one"] class属性包含one的p元素p[class^="one"] class属性以one开头p[clas

第二章  目标的样式   要用CSS样式化一个HTML元素,必须要定位一个元素, CSS的选择器就是这样的手段. 这章中,你要学到的 • Common selectors 普通选择器 • Advanced selectors 高级选择器 • New CSS 3 selectors 新的CSS3选择器 • The wonderful world of specificity and the cascade 特征和层叠的奇妙世界 • Planning and maintaining your sty

--本笔记中英混合,专业名词尽量不翻译,免得误解,如果不习惯,就不用往下看了,走好不送. 第一章 基础 人类的好奇心总是促使我们捣鼓,捣鼓是最好做有效的学习CSS的方法 In this chapter you will learn about • Structuring your code • The importance of meaningful documentation • Naming conventions • When to use IDs and class names • Mi

<!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机制”.之所以说近似,是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低.由于我们平时使用的 font-size 都比较小,所以我们往往察觉不到. 多行文本或者替换元素的垂直居中实现原理和单行文本不一样,需要 line-height 属性的好朋友 vertical-align 属性帮助才可以

<!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseline).例如,line-height 行高的定义就是两基线的间距,vertical-align 的默认值就是基线,其他中线顶线一类的定义也离不开基线. 基线的定义:字母 x 的下边缘(线)就是我们的基线. x-height 指的是小写字母 x 的高度,术语描述就是基线和等分线(mean line)(也称作中线

<!--  <CSS世界>张鑫旭著 --> 功勋卓越的 border 属性 border-width 不支持百分比值 border-style 类型 border-style 默认值是none:多出现在重置边框样式的时候,渲染性能最高的写法是: div { border: 1px solid; border-bottom: 0 none; } border-style: dashed 虚线边框.虚线颜色区的宽高比以及颜色区和透明区的宽度比例在不同浏览器下是有差异的.例如,在 Chr

<!-- <CSS世界>张鑫旭著 --> margin 无效情形解析 (1)display 计算值 inline 的非替换元素的垂直 margin 是无效的.对于内联替换元素,垂直 margin 有效,并且没有 margin 合并的问题,所以图片永远不会发生 margin 合并. (2)表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素 margin 都是无效的. (3) margin 合并

<!-- <CSS世界>张鑫旭著 --> 正确看待 CSS 世界里的 margin 合并 什么是 margin 合并 块元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并成单个外边距,这样的现象称为“margin合并”. (1)块级元素,但不包括浮动元素和绝对定位元素,尽管浮动和绝对定位可以让元素块状化 (2)只发生在垂直方向,准确来说,是只发生在和当前文档流方向的相垂直的方向上 margin 合并的3种场景 (1)相邻兄弟元素margin合并

激进的margin属性 margin与元素尺寸以及相关布局 元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DOM API中写作offsetWidth和offsetHeight,所以有时候也称为“元素偏移尺寸” 元素内部尺寸 padding box尺寸,对应jQuery中的$().innerWidth()和$().innerHeight()方法,在原生DOM API中写作clientWidth和clientH

<!-- <CSS世界>张鑫旭著 --> 温和的padding属性 因为默认的box-sizing是content-box,所以使用padding会增加元素的尺寸. 尺寸表现对具有块状特性的元素和内联元素而言有些许不同. 很多人会觉得内联元素的padding只会影响水平方向,不会影响垂直方向.这种认知是不准确的,内联元素的padding在垂直方向同样会影响布局,影响视觉表现.只是因为内联元素没有可视宽度和可视高度的说法,视觉上没有改变和上一行下一行内容的间距,因为给我们的感觉是垂直

<!-- <CSS世界>张鑫旭著 --> content内容生成技术 1. content 辅助元素生成 清除浮动: .clear:after { content: ''; display: table; /* 也可以是‘block’ */ clear: both; } 辅助实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”:(示例地址 http://demo.cssworld.cn/4/1-7.php) 2. content 字符内容生成 比较常用的是配合@font-face规

<!-- <CSS世界>张鑫旭著 --> 替换元素和非替换元素的距离有多远? 观点1:替换元素和非替换元素之间只隔了一个src属性! 在Firefox浏览器下,没有src属性的<img>表现和普通<span>类似,已经完全不是替换元素了.很好地证明了“如果图片没有替换内容,图片就是一个普通的内联标签”.. Chrome浏览器其实有类似的表现,只是需要特定的条件触发,这个条件就是需要有不为空的alt属性值.例如:<img alt="任意值&qu

<!-- <CSS世界> 张鑫旭著 --> 替换元素 根据是否具有可替换内容,我们可以把元素分为替换元素和非替换元素. <img>.<object>.<video>.<iframe>或表单元素<textarea>和<input>都是典型的替换元素. 替换元素除了内容可替换这一特性之外,还有以下一些特性: (1)内容的外观不受页面上的CSS的影响.用专业的话讲就是样式表现在CSS作用域之外.例如:直接 input

<!-- <CSS世界> 张鑫旭著 --> min-width/max-width和min-height/max-height min-width/max-width出现的场景一定是自适应布局或者流体布局中: max-width和max-height的初始值是none,min-width和min-height的初始值是auto. 如果max-width的初始值是auto,自然会使用和width一样的渲染解析规则,此时max-width的计算值应该是父元素的宽度值,也就是子元素的宽度

<!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的,宽度是稀缺的,高度是无限的.因此,宽度的分配规则比较复杂,高度就显得随意的多. 此外,height:auto也有外部尺寸特性.其可能只存在于绝对定位模型中,也就是“格式化高度”??. 关于height:100% 对于width属性,就算父元素width为auto,其百分比值也是支持的.但是,对于height属

<!-- <CSS世界>张鑫旭著 --> CSS流体布局下的宽度分离原则 所谓“宽度分离原则”,就是CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存,也就是不能出现以下的组合: .box { width:100px; border: 1px solid; } 或者 .box{ width:100px; padding: 20px; } 而是利用宽度分离原则,width独立占用一层标签,而padding.border.margin利

<!-- <CSS世界> 张鑫旭著  --> width:auto width:auto至少包含了以下4种不同的宽度表现: 充分可利用空间.比方说,<div>.<p>这些元素的宽度默认是100%于父级容器的. 收缩与包裹.典型代表是浮动.绝对定位.inline-block元素或table元素,英文成为shrink-to-fit,直译为“收缩到合适”,更形象的叫法是“包裹性” 收缩到最小.这个最容易出现在table-layout为auto的表格中 超出容器限制

<!-- <CSS世界> 张鑫旭著  --> 块级元素:水平流上只能单独显示一个元素 <li>元素默认的display值是list-item,是块级元素 块级盒子(block-level box):负责结构:内联盒子(inline box):负责内容: list-item元素会出现项目符号是因为生成了一个附加的盒子,学名叫“标记盒子(marker box)”,专门用来放远点.数字这些项目符号.IE浏览器下伪元素不支持list-item或许就是无法创建这个“标记盒子”导致

<!-- <CSS世界> 张鑫旭 著 --> CSS世界构建的基石是HTML,而HTML最具代表的两个基石<div>和<span>正好是CSS世界中块级元素和内联级元素的代表. CSS世界的专业术语 属性  值  关键字  变量  长度单位  功能符  属性值  声明  声明块   规则或规则集  选择器  关系选择器  @规则 CSS世界的“未定义行为” web应用场景千变万化,web标准也不可能面面俱到,也会存在规范描述外的场景,用计算机领域的专业术语描