《CSS世界》读书笔记(六)
<!-- 《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的计算值应该是父元素的宽度值,也就是子元素的宽度永远不会比父元素大了,这显然是有问题的;
而如果min-width的初始值是0,那么当我们设置transition过渡同时改变了min-width值,就应该有动画效果,实际上并没有。我们需要手动设置min-width:0,才会出现动画。
min-width/max-width和min-height/max-height属性间,以及与width和height之间有一套相互覆盖的原则:
超越 !important,超越最大。
超越 !important指的是max-width会覆盖width,而且是超越覆盖,就是即便是拥有!important权重的width属性声明也会被max-width覆盖,举个例子:
<img src="1.png" style="width: 480px!important;">
img {max-width: 256px; }
图片最后的呈现宽度是256px。
超越最大指的是min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候。
任意高度元素的展开收起动画技术
用css来实现展开收起的动画效果,很多时候,我们展开的元素的内容是动态的,也就是高度是不固定的,这时候不妨试试max-height,css代码如下:
.element {
max-height:;
overflow: hidden;
transition: max-height .2s;
}
.element.active {
max-height: 666px;
}
其中展开后的max-height值,我们只需要设定为保证比展开内容高度大的值就可以。但是,如果max-height值太大,在收起的时候可能会有“效果延迟”的问题。因此,建议max-height使用足够安全的最小值。
内联元素
哪些元素是内联元素
这里的“内联”特指“外在盒子”,inline-block和inline-table都是“内联元素”,因为它们的“外在盒子”都是内联盒子。display:inline的元素也是“内联元素”
内联盒模型
(1)内容区域
内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子(character box);但有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因为对于这类元素来说,内容区域可以看成元素自身。
实际上,内容区域没有明确的定义,所以将其理解成em盒(em-box,可看成是中文字符占据的1em高度区域)也是可以的。
(2)内联盒子(inline box)。
内联盒子和匿名内联盒子
如果外部含内联标签(<span>、<a>等),则属于“内联盒子”;
如果是光秃秃的文字,则属于“匿名内联盒子”;
并不是所有光秃秃的文字都是“匿名内联盒子”,也可能是“匿名块级盒子”,关键要看前后的标签是内联还是块级。
这里前后的标签我理解的是兄弟元素,如果光秃秃的文字前后都是块级元素,那么就是“匿名块级盒子”,不知道理解的对不对。。
(3)行框盒子
每一行就是一个“行框盒子”,每个“行框盒子”又是由一个个“内联盒子”组成的。
(4)包含盒子(containing box)
此盒子由一行一行的“行框盒子”组成。更准确的称呼是“包含块”。
幽灵空白节点
“幽灵空白节点”实际上也是一个盒子,不过是个假想盒,名叫“strut”,中文直译为“支柱”,是一个存在于每个“行框盒子”前面,同时具有该元素的字体和行高属性的0宽度的内联盒。
这里有一个前提,文档声明必须是HTML5文档声明,如果还是很多年前的老声明,则不存在“幽灵空白节点”。
明白“幽灵空白节点”的存在是理解后续很多内联元素为何会这么表现的基础。
《CSS世界》读书笔记(六)的更多相关文章
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- 《精通CSS》读书笔记(一)
最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...
- 《css世界》笔记之流、元素与基本尺寸
1. 块级元素 基本特性:就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示. 块级元素和"display 为block 的元素"不是一个概念,display:list- ...
- css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
- 《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
- spring揭秘 读书笔记 六 bean的一生
我们知道,Spring容器具有对象的BeanDefinition来保存该对象实例化时需要的数据. 对象通过container.getBean()方法是才会初始化该对象. BeanFactory 我们知 ...
- CSS Grid 读书笔记
基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...
- css揭秘读书笔记
currentColor属性让hr和段落相同的颜色: div { color: red; } hr { background: currentColor; /* 一定要设置高度*/ height: 0 ...
随机推荐
- rabbitmq消费端加入精确控频。
控制频率之前用的是线程池的数量来控制,很难控制.因为做一键事情,做一万次,并不是每次消耗的时间都相同,所以很难推测出到底多少线程并发才刚好不超过指定的频率. 现在在框架中加入控频功能,即使开200线程 ...
- u3d内嵌H5游戏 设置cookie
Intent intent1 = getIntent(); Log.d("SS", "onCreate: "); String data = intent1.g ...
- MTK NTP和NITZ更新时间的问题
NITZ(Network Identity and Time Zone,网络标识和时区),是一种用于自动配置本地的时间和日期的机制,同时也通过无线网向移动设备提供运营商信息.NITZ是自从PHASE ...
- 用 wait-notify 写一段代码来解决生产者-消费者问题
在同步块中调用 wait() 和 notify()方法,如果阻塞,通过循环来测试等待条件.请参考答案中的示例代码. [生产者] import java.util.Vector; import java ...
- Kafka认证权限配置(动态添加用户)
之前写过一篇Kafka ACL使用实战,里面演示了如何配置SASL PLAINTEXT + ACL来为Kafka集群提供认证/权限安全保障,但有一个问题经常被问到:这种方案下是否支持动态增加/移除认证 ...
- iOS - 解决 Cocoapods 第三方库下载不下来
Cocoapods 第三方库下载不下来问题:一些第三方的库由于网的原因下载不下里 (解决思路:(原理) cocoapods 下载的时候 会先从缓存中拿 缓存中没有再去下载 所以可以把下载不下来的放到缓 ...
- 如何看待淘宝二手交易APP“闲鱼”推出的新功能“闲鱼小法庭”?
转:https://www.zhihu.com/question/55487716?utm_source=qq&utm_medium=social
- 事件Event
信号量可以控制一个或多个进程同时进行阻塞或执行. 一个事件被创建后,默认是阻塞状态. from multiprocessing import Event e = Event() # 创建一个事件,默认 ...
- 前端上传 base64 编码图片到七牛云存储
参考文档 如何上传base64编码图片到七牛云 调试过程 文档中分别有 java 和 html 的 demo,可以根据文档示例调试. 下面是我调试的过程,可以作为参考,特别注意的是,如果需要给文件起名 ...
- PHP(Dom操作)
jsDOM操作组成: ECMAscript:语法核心 BOM:浏览器对象模型 window:窗口 open close 定时器 dingsh history:历史记录 go back location ...