《CSS世界》笔记二:盒模型四大家族
上一篇:《CSS世界》笔记一:流/元素/尺寸
下一篇:《CSS世界》笔记三:内联元素与对齐
写在前面
在读《CSS世界》第四章之前,粗浅的认为盒模型无非是margin/border/padding/content
而已,再多无非在不同box-sizing
下的表现不同而已;但是书中记录的替换元素与非替换元素、content
的一些用法、margin
合并等等,让我对“盒模型四大家族”有了全新的认识
一、替换元素与非替换元素
根据“外在盒子”是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素
1.1 替换元素定义
通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”,常见的替换元素有:<img>
、<object>
、<video>
、<iframe>
或者表单元素<textarea>
和<input>
1.2 替换元素的特点
- 内容的外观不受页面上的 CSS 的影响;如单复选框的内间距、背景色等样式
- 有自己的尺寸;如
<video>
、<img>
都有自己的尺寸 - 在很多 CSS 属性上有自己的一套表现规则;
vertical-align
中,替换元素默认为baseline
(字母x下边缘),替换元素的基线就被硬生生定义成了元素的下边缘
1.3 替换元素的尺寸计算规则
替换元素的尺寸从内而外分为 3 类:固有尺寸、HTML 尺寸和 CSS 尺寸
- 固有尺寸指的是替换内容原本的尺寸;例如,图片、视频、input作为一个独立文件存在的时 候,都是有着自己的宽度和高度的;
- HTML 尺寸,“HTML 尺寸”只能通过
HTML
原生属性改变,这些HTML
原生属性包括<img>
的width
和height
属性、<input>
的size
属性、<textarea>
的cols
和rows
属性 - CSS 尺寸特指可以通过 CSS 的
width
和height
或者max-width/min-width
和max-height/min-height
设置的尺寸,对应盒尺寸中的content box
尺寸计算优先级: CSS 尺寸 > HTML 尺寸 > 固有尺寸
1.4 替换元素与普通元素的转换(理论上)
猜想1:html中src属性,img/video去掉src属性后也就成了普通元素
猜想2:css中的content属性,普通元素通过content属性也可以展示元素中原本没有的文字或图片
二、content属性
注意,content
属性不仅能用于::before/::after中,还能用于元素中,不过有一定兼容性。
在 Chrome 浏览器下,所有的元素都支持 content 属性,而其他浏览器仅在::before/::after 伪元素 中才有支持
案例1:基于伪元素的图片内容生成技术
原理:img标签有src时不支持伪类,没有src时支持伪类;图片没有src时,::before
和::after
可以生效;给图片添加一个src
地址时,图片从普通元素变成替换元素,原本都还支持的::before
和::after
此时全部无效
案例2:content 引入图片
img { content: url(1.jpg); }
案例3:hover 实现图片替换
<img src="laugh.png">img:hover {content: url(laugh-tear.png);
}
案例4:优雅实现h1的SEO
<h1>《CSS 世界》</h1>
h1 {width: 180px;height: 36px;background: url(logo.png); /* 隐藏文字 */text-indent: -999px;
}
案例5:加载中动画
正在加载中<dot>...</dot>dot {display: inline-block;height: 1em;line-height: 1;text-align: left;vertical-align: -.25em;overflow: hidden;
}
dot::before {display: block;content: '...\A..\A.';white-space: pre-wrap;animation: dot 3s infinite step-start both;
}
@keyframes dot {33% { transform: translateY(-2em); }66% { transform: translateY(-1em); }
}
原理:content中有三行内容,分别是‘...’,‘..’,‘.’;动画位移dot即可实现正在加载的效果
案例6:计数器(了解)
三、padding属性
- padding 对内联元素水平和垂直方向上均有影响
- padding 宽高百分比都是基于父元素的宽度计算
很多很多的前端同事有这么一个错误的认识:内联元素的 padding 只会影响水平方向,不会影响垂直方向。这种认知是不准确的,内联元素的 padding 在垂直方向同样会影响布局,影响视觉表现。 只是因为内联元素没有可视宽度和可视高度的说法(clientHeight 和 clientWidth 永远是 0),垂直方向的行为表现完全受 line-height 和 vertical-align 的影响,视觉上并没有改变和上一行下一行内容的间距,因此,给我们的感觉就会是垂直 padding 没有起作用。
案例1:增大点击区域
a { padding: .25em 0; }
案例2:任意高度的分隔符
<a href="">登录</a><a href="">注册</a>a + a:before {content: "";font-size: 0;padding: 10px 3px 1px;margin-left: 6px;border-left: 1px solid gray;
}
案例3:等比例盒子
用于实现自适应布局,如网页banner等比例大小图片
/* 矩形 */
div { padding: 50%; }
/* 正方形 */
div { padding: 25% 50%; }
案例4:图形绘制
/* 菜单 */
.icon-menu {display: inline-block;width: 140px; height: 10px;padding: 35px 0;/* 默认border-color:currentColor; */border-top: 10px solid;border-bottom: 10px solid;/* 核心 */background-color: currentColor;background-clip: content-box;
}
四、margin属性
margin特点:
- 与padding不同,margin可以为负值;
- 与padding相同,margin的百分比也是相对于其父元素的width
4.1 margin负值应用
(1)增大盒子尺寸
只有元素是“充分利用可用空间”状态的时候,margin 才可以改变元素的可视尺寸
/* 无法改变尺寸 */
.father {width: 300px;margin: 0 -20px;
}/* .son 尺寸变化 */
<div class="father"><div class="son"></div>
</div>.father { width: 300px; }
.son { margin: 0 -20px; }
(2)经典无兼容两栏布局
.column-box {overflow: hidden;
}
.column-left,
.column-right {margin-bottom: -9999px;padding-bottom: 9999px;
}
布局原理:
默认情况下,垂直方向块级元素上下距离是 0,一旦 margin-bottom:-9999px 就意味着后面所有元素和上面元 素的空间距离变成了-9999px,也就是后面元素都往上移动了 9999px。此时,通过神来一笔 padding-bottom:9999px 增加元素高度,这正负一抵消,对布局层并无影响,但却带来了我们 需要的东西— 视觉层多了 9999px 高度的可使用的背景色
4.2 margin合并
块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin 合并”。
两个条件:块级元素和仅发生在垂直方向上
margin合并的3种场景
(1)相邻兄弟元素 margin 合并。这是 margin 合并中最常见、最基本的
<p>第一行</p>
<p>第二行</p>p { margin: 1em 0; }
(2)父级和第一个/最后一个子元素
<div class="father"><div class="son" style="margin-top:80px;"></div>
</div><div class="father" style="margin-top:80px;"><div class="son"></div>
</div><!-- 这种情形也只表现为上边距80px,margin发生了合并 -->
<div class="father" style="margin-top:80px;"><div class="son" style="margin-top:80px;"></div>
</div>
(3)空块级元素的 margin 合并
.father { overflow: hidden; }
.son { margin: 1em 0; }<div class="father"><div class="son"></div>
</div>
此时.father
所在的这个父级<div>
元素高度仅仅是 1em,因为.son
这个空<div>
元素的 margin-top
和margin-bottom
合并在一起了
如何阻止margin发生合并?
对于 margin-top 合并,可以进行如下操作(满足一个条件即可):
- 父元素设置为块状格式化上下文元素;
- 父元素设置 border-top 值;
- 父元素设置 padding-top 值;
- 父元素和第一个子元素之间添加内联元素进行分隔。
对于 margin-bottom 合并,可以进行如下操作(满足一个条件即可):
- 父元素设置为块状格式化上下文元素;
- 父元素设置 border-bottom 值;
- 父元素设置 padding-bottom 值;
- 父元素和最后一个子元素之间添加内联元素进行分隔;
- 父元素设置 height、min-height 或 max-height。
margin 合并的计算规则:
“正正取大值”“正负值相加”“负负最负值”
4.3 margin:auto深入
margin:auto 的填充规则如下
(1)如果一侧定值,一侧 auto,则 auto 为剩余空间大小。
(2)如果两侧均是 auto,则平分剩余空间。
一侧auto应用
<div class="father"><div class="son"></div>
</div>.father {width: 300px;
}
.son {width: 200px;margin-right: 80px;margin-left: auto;
}
两侧auto,水平垂直居中
.father {width: 300px; height: 150px;background-color: #f0f3f9;position:relative;
}
.son {position: absolute;top: 0; right: 0; bottom: 0; left: 0;width: 200px; height: 100px;background-color: #cd0000;margin: auto;
}
注意:
display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素, 垂直 margin 有效,并且没有 margin 合并的问题,所以图片永远不会发生 margin 合并。
五、border属性
几个特点:
- border属性值不支持百分比
- border-style 默认值为none
- border-color 默认值为currentColor
应用1:图片上传hover变色
.add {color: #ccc;border: 2px dashed;
}
.add:before {border-top: 10px solid;
}
.add:after {border-left: 10px solid;
}
/* hover变色 */
.add:hover {color: #06C;
}
应用2:优雅增加点击区域
/* box-sizing非border-box时 */
.icon-clear {width: 16px;height: 16px;border: 11px solid transparent;
}
应用3:三角形绘制
div {width: 0;border: 10px solid;border-color: #f30 transparent transparent;
}
border能构成三角形和梯形的原理如下:
通过改变width/height以及border-width在不同方位的尺寸,可以改变三角形的倾角方位和尺寸
应用4:border等高布局
.box {border-left: 150px solid #333;background-color: #f0f3f9;
}
.box > nav {width: 150px;margin-left: -150px;float: left;
}
.box > section {overflow: hidden;
}
border等高布局的局限性:
- 由于 border 不支持百分比宽度,因此,适合至少一栏是定宽的布局
- 等高布局的栏目有限制。基本上,border 等 高布局只能满足 2~3 栏的情况,除非正好是等比例的,那还可以使用 border-style:double 实现最多 7 栏布局
上一篇:《CSS世界》笔记一:流/元素/尺寸
下一篇:《CSS世界》笔记三:内联元素与对齐
《CSS世界》笔记二:盒模型四大家族相关推荐
- DIV + CSS 学习笔记(盒模型)
本文目录 一.盒模型 (一)盒边框(border) (二)内边距(padding) (三)外边距(margin) (四)盒内容(element) (五)盒模型计算 (六)块级元素与内联元素的区别和转换 ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表 用于给HTML标签添加样式 CSS3是CSS的最新版本 增加了大量的样式/动画/3D特效以及移动端特性 前端 ...
- css盒模型(css的两种盒模型:标准盒模型、怪异盒模型)和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
- CSS世界-第四章 盒尺寸四大家族
盒尺寸的4个盒子:content box,padding box,border box,margin box 一 深入理解 content 1.根据可替换性把元素分为替换元素和非替换元素 <im ...
- CSS基础(二)--盒模型与浮动
盒模型 认识width和height 一个盒子中主要的属性有5个:width.height.padding.border.margin. width是"宽度"的意思,CSS中wid ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector {property: value;property: value;... property: value ...
- css盒模型只能应用于html,iframe,css样式表,盒模型的使用方法-2019年9月3日
实例演示:标签的使用 实例演示: css样式设置的优先级 实例演示: css的id, class与标签选择器的使用规则 实例演示盒模型的五大要素: width, height, padding, bo ...
- CSS学习笔记7—盒子模型
盒子模型(CSS重点) 学习目标 理解: 能说出盒子模型有那四部分组成 能说出内边距的作用以及对盒子的影响 能说出padding设置不同数值个数分别代表的意思 能说出块级盒子居中对齐需要的2个条件 能 ...
最新文章
- iOS开发时间戳与时间,时区的转换,汉字与UTF8,16进制的转换
- SAP Fiori的搜索实现
- 素数环 与 算法 全排列
- 【Git】Git如何在不提交当前分支的情况下切换到其它分支进行操作-git stash
- 怎么用python打开csv文件_使用Python从CSV文件读取数据
- 电脑系统哪个最好用_小米MIUI领衔,目前最好用的几个安卓系统,你觉得哪个更好用?...
- Qt学习之路(51): QByteArray和QVariant
- 精心准备了10个行业30张大屏模板,0代码直接套用
- SecureCRT SSH 失败 Key exchange failed 解决方法
- 火狐浏览器添加New Tab插件
- 怎样进行云迁移 企业才不会后悔!
- 前端技术文档及工具汇总
- jQuery常用功能大全
- PHP生成唯一订单号 阿星小栈
- MySQL学习之MySQL引擎
- 成功解决:计算交叉熵lossFunction报错“1D target tensor expected, multi-target not supported”的解决办法
- 【Beta阶段】Scrum meeting 3
- Facebook个人账号相关问题?
- 函数式编程:Python 调用迅雷下载
- APP攻防—— jadx反编译frida编写js