随笔分类 -  css

《CSS世界》读书笔记（十六）
摘要：<!-- 《CSS世界》张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中，原因在于 CSS 中“行距的上下等分机制”。之所以说近似，是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低。由于我们平时使用的 font-s 阅读全文

posted @ 2018-09-13 20:38 纤锐 阅读(192) 评论(0) 推荐(0)

《CSS世界》读书笔记（十五）
摘要：<!-- 《CSS世界》张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中，凡是涉及垂直方向的排版或者对齐的，都离不开最基本的基线（baseline）。例如，line-height 行高的定义就是两基线的间距，vertical-align 的默认值就是基线，其他中线顶 阅读全文

posted @ 2018-09-03 00:18 纤锐 阅读(253) 评论(0) 推荐(0)

《CSS世界》读书笔记（十四）
摘要：<!-- 《CSS世界》张鑫旭著 --> 功勋卓越的 border 属性 border-width 不支持百分比值 border-style 类型 border-style 默认值是none；多出现在重置边框样式的时候，渲染性能最高的写法是： div { border: 1px solid; bor 阅读全文

posted @ 2018-08-26 18:42 纤锐 阅读(172) 评论(0) 推荐(0)

《CSS世界》读书笔记（十三）
摘要：<!-- 《CSS世界》张鑫旭著 --> margin 无效情形解析 （1）display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素，垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。 （2）表格中的<t 阅读全文

posted @ 2018-08-19 11:05 纤锐 阅读(241) 评论(0) 推荐(0)

《CSS世界》读书笔记（十二）
摘要：<!-- 《CSS世界》张鑫旭著 --> 正确看待 CSS 世界里的 margin 合并 什么是 margin 合并 块元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并成单个外边距，这样的现象称为“margin合并”。 （1）块级元素，但不包括浮动元素和绝对定 阅读全文

posted @ 2018-08-18 17:54 纤锐 阅读(306) 评论(0) 推荐(0)

《CSS世界》读书笔记（十一）
摘要：激进的margin属性 margin与元素尺寸以及相关布局 元素尺寸 border box尺寸，对应jQuery中的$().outerWidth()和$().outerHeight()方法，在原生DOM API中写作offsetWidth和offsetHeight，所以有时候也称为“元素偏移尺寸” 阅读全文

posted @ 2018-08-12 13:42 纤锐 阅读(175) 评论(0) 推荐(0)

《CSS世界》读书笔记（十）
摘要：<!-- 《CSS世界》张鑫旭著 --> 温和的padding属性 因为默认的box-sizing是content-box，所以使用padding会增加元素的尺寸。 尺寸表现对具有块状特性的元素和内联元素而言有些许不同。 很多人会觉得内联元素的padding只会影响水平方向，不会影响垂直方向。这种认 阅读全文

posted @ 2018-08-08 21:17 纤锐 阅读(399) 评论(0) 推荐(0)

《CSS世界》读书笔记（九）
摘要：<!-- 《CSS世界》张鑫旭著 --> content内容生成技术 1. content 辅助元素生成 清除浮动： 辅助实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”：（示例地址 http://demo.cssworld.cn/4/1-7.php） 2. content 字符内容生成 比较常 阅读全文

posted @ 2018-08-06 21:17 纤锐 阅读(287) 评论(0) 推荐(0)

《CSS世界》读书笔记（八）
摘要：<!-- 《CSS世界》张鑫旭著 --> 替换元素和非替换元素的距离有多远？ 观点1：替换元素和非替换元素之间只隔了一个src属性！ 在Firefox浏览器下，没有src属性的<img>表现和普通<span>类似，已经完全不是替换元素了。很好地证明了“如果图片没有替换内容，图片就是一个普通的内联标签 阅读全文

posted @ 2018-08-01 20:26 纤锐 阅读(367) 评论(0) 推荐(0)

《CSS世界》读书笔记（七）
摘要：<!-- 《CSS世界》 张鑫旭著 --> 替换元素 根据是否具有可替换内容，我们可以把元素分为替换元素和非替换元素。 <img>、<object>、<video>、<iframe>或表单元素<textarea>和<input>都是典型的替换元素。 替换元素除了内容可替换这一特性之外，还有以下一些特 阅读全文

posted @ 2018-07-27 22:40 纤锐 阅读(447) 评论(0) 推荐(0)

《CSS世界》读书笔记（六）
摘要：<!-- 《CSS世界》 张鑫旭著 --> min-width/max-width和min-height/max-height min-width/max-width出现的场景一定是自适应布局或者流体布局中； max-width和max-height的初始值是none，min-width和min-h 阅读全文

posted @ 2018-07-25 19:37 纤锐 阅读(511) 评论(0) 推荐(0)

《CSS世界》读书笔记（五） --height:100%
摘要：<!-- 《CSS世界》 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多，原因在于： CSS默认流是水平方向的，宽度是稀缺的，高度是无限的。因此，宽度的分配规则比较复杂，高度就显得随意的多。 此外，height:auto也有外部尺寸特性 阅读全文

posted @ 2018-07-23 18:38 纤锐 阅读(396) 评论(0) 推荐(0)

《CSS世界》读书笔记（四）--宽度分离
摘要：<!-- 《CSS世界》张鑫旭著 --> CSS流体布局下的宽度分离原则 所谓“宽度分离原则”，就是CSS中的width属性不与影响宽度的padding/border(有时候包括margin）属性共存，也就是不能出现以下的组合： .box { width:100px; border: 1px sol 阅读全文

posted @ 2018-07-21 11:25 纤锐 阅读(339) 评论(0) 推荐(0)

《CSS世界》读书笔记（三） --width:auto
摘要：<!-- 《CSS世界》 张鑫旭著 --> width:auto width:auto至少包含了以下4种不同的宽度表现： 充分可利用空间。比方说，<div>、<p>这些元素的宽度默认是100%于父级容器的。 收缩与包裹。典型代表是浮动、绝对定位、inline-block元素或table元素，英文成为 阅读全文

posted @ 2018-07-19 20:20 纤锐 阅读(524) 评论(0) 推荐(0)

《CSS世界》读书笔记（二）
摘要：<!-- 《CSS世界》 张鑫旭著 --> 块级元素：水平流上只能单独显示一个元素 <li>元素默认的display值是list-item，是块级元素 块级盒子（block-level box）：负责结构；内联盒子（inline box）：负责内容； list-item元素会出现项目符号是因为生成了 阅读全文

posted @ 2018-07-17 21:03 纤锐 阅读(297) 评论(0) 推荐(0)

《CSS世界》读书笔记（一）
摘要：<!-- 《CSS世界》 张鑫旭 著 --> CSS世界构建的基石是HTML，而HTML最具代表的两个基石<div>和<span>正好是CSS世界中块级元素和内联级元素的代表。 CSS世界的专业术语 属性 值 关键字 变量 长度单位 功能符 属性值 声明 声明块 规则或规则集 选择器 关系选择器 @ 阅读全文

posted @ 2018-07-16 19:48 纤锐 阅读(390) 评论(0) 推荐(0)

css杂记
摘要：1，font-variant:设置文本是否为小型的大写字母，值可以为normal，small-caps;2，a:link:未访问过的 a:visited:访问过的 a:active:活动的链接，即获得当前焦点的链接3，span和div： span为行内元素；而div为块元素，会自动换行。不过可以... 阅读全文

posted @ 2014-11-25 16:27 纤锐 阅读(225) 评论(0) 推荐(0)

css 前景色与背景色
摘要：前景色：color:#990000;背景色：background-color:red;可以用来设置文字的前景色与背景色 阅读全文

posted @ 2014-11-25 09:50 纤锐 阅读(10924) 评论(0) 推荐(0)