今天翻手机,翻到了许久之前看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…

书籍位置: /Users/baidu/Documents/Data/Interview/业界/淘宝十年产品事.pdf…

<!-- <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…