Web开发时,为了节约带宽以及提高加载性能,首屏以下的图片就会通过滚屏加载的方式异步加载,然后这个即将被异步加载的图片为了布局稳健,体验良好,往往会使用一张透明的图片占位,如: <img src="transparent.png"> 但是实际上这个透明的占位符图片也是多余的资源 但是如果是下面的CSS,可以实现上面一样的效果,并且还减少一次请求 img{ visibility:hidden; display:inline-block; width:XXX; }; img[s…

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

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

流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level element)和内联元素(inline element). 1.块级元素 1.1 概念相关 "块级元素"对应的英文是 block-level element,常见的块级元素有 div,li,table等. 块级元素和 display:block 不是一个概念 例如块级元素 li 和 tab…

上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin/border/padding/content而已,再多无非在不同box-sizing下的表现不同而已:但是书中记录的替换元素与非替换元素.content的一些用法.margin合并等等,让我对"盒模型四大家族"有了全新的认识 一.替换元素与非替换元素 根据"外在盒子"…

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

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

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

<CSS世界>,张鑫旭著,人民邮电出版社,2017年12月第一版. 1.P9二维码链接文章的demo值得一看,可以实现有关“某些区域颜色始终保持一致”的效果. P9二维码所链接文章的一个demo里,图标用i标签+背景图的形式实现.我在模仿知乎.简书网站的时候发现他们的图标实现和你的不一样.比如回到顶部的按键,知乎是用button+svg,简书则是i标签+content属性生成图片.我自己用的是a+img实现. 我想知道这些实现有什么区别么?从语义上考量我感觉知乎的更好,因为这个功能就是按键.…