替换元素
定义:通过修改某个属性值呈现的内容就可以被替换的元素。例如:img,object,video,iframe,textarea,input,select。
特征
内容不受页面上 CSS 的影响
有自己的尺寸,和浏览器的渲染机制有关
在很多 CSS 属性有自己的一套表现规则,基线为下边缘
替换元素的尺寸计算方式
CSS 属性 > 行内 HTML 属性 > 固有属性。
无论 display 如何改变其尺寸表现机制不变,当没有任何尺寸样式,其默认大小为 300px * 150px ,而 img 的默认尺寸在各个浏览器表现不一。
其固有属性无法改变。
小技巧
在首屏以下的图片使用以下方式加载:
<img>
<style>
img {
//Firefox在src缺省时,让img以内联元素渲染,宽高失效,设置其为内联块元素,解决兼容性问题。
display: inline-blick;
visibility: hidden;//元素不可见
}
img[src] {
visibility: visible;//元素可见
}
</style>
object-fit
指定的替换的内容元素如何放在建立的的高和宽的框里
- fill::填充
默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
- none:无
保持原有尺寸比例。同时保持替换内容原始尺寸大小。
- contain:包含
保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
- scale-down: 降低
就好像依次设置了 none 或 contain , 最终呈现的是尺寸比较小的那个。
- cover:覆盖
保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
神奇的content
基于伪元素的图片生成技术
<style>
img {
//生成 alt 信息
content: attr(alt);
//尺寸和定位
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(200,200,200,.2);
//过渡效果
transform: transform .2s;
}
img:hover::after {
//alt 信息显示
transform: translateY(0);
}
</style>
<img alt="图片" />
鼠标上移切换图片的实现
<style>
img:hover {
content: url(laugh-tear.png);
}
</style>
<img src="laugh.png" alt="laugh">
普通元素content属性变成替换元素
<style>
h1 {
content: url(log.png);
}
</style>
<h1>《css 世界》</h1>
虽然视觉发生改变但,屏幕阅读设备和 SEO 抓取的还是原本的文本。
content与替换元素关系
content 属性生成的对象称为“匿名替换元素”,它无法选中无法复制,content 生成的文本无法被屏幕阅读设备读取也无法被搜索引擎获得
不能左右 :empty 伪类
动态生成的值无法获取
content内容生成
- 清除浮动的影响
.clear:after {
content: "",
display: block,
clear: both;
}
- 弹性布局的实现
<style>
.box {
width: 256px;
height: 256px;
//两端对齐
text-align: justify;
}
.box:before {
content: "",
display: inline-block,
height: 100%;
}
.box:after {
content: "",
display: inline-block,
width: 100%;
}
.bar {
display: inline-block;
width: 20px;
}
</style>
<div class="box">
<i class="bar"><i>
<i class="bar"><i>
<i class="bar"><i>
<i class="bar"><i>
</div>
温和的 padding 属性
padding 与元素的尺寸
内联元素 padding 对视觉层和布局层具有双层影响,它不会影响其他元素的布局,而块级元素 padding 会影响布局。
可以使用 padding 在不影响当前布局的情况下优雅的增加链接的点击区域。
article a {
padding: .25em 0;
}
padding 的百分比
padding 属性不支持负值,pddding 支持百分比值,padding 百分比无论是垂直还是水平方向均是对于宽度计算的。
标签元素内置的 padding
- ol/ul 列表内置 padding-left,单位为 px。
- 很多表单元素内置 padding
- 所有浏览器
- input、textarea、button、select
- button 的 padding 难控制
- 所有浏览器
- 无内置 padding
- 所有浏览器 radio、checkbox
激进的 margin
margin 与元素尺寸及相关布局
元素尺寸相关概念
- 元素尺寸(元素偏移尺寸):包括 padding 和 border,也就是元素 border box 的尺寸,原生 DOM API 写作 offsetWidth 和 offsetHeight。
- 元素内部尺寸(元素可视尺寸):表示元素的内部尺寸,包括 padding 但不包括 border,也就是元素 padding box 的尺寸,原生 DOM API 写作 clientWidth 和 clientHeight。
- 元素外部尺寸:表示元素的外部尺寸,不仅包括 padding 和 border,还包括 margin,也就是元素 margin box 的尺寸,没有对应的原生 DOM API。
外部尺寸的大小可能是负值。
margin 与元素的内部尺寸
margin 可以改变元素的可视尺寸,只有元素是“充分利用可用空间”状态的时候,margin 才可以改变元素的可视尺寸。
一侧定宽的两栏布局
<style>
.box {
overflow: hidden;
}
.full {
width: 100%;
float: left;
}
.box > img {
float: left;
margin-left: -128px;
}
.full > p {
margin-right: 140px;
}
</style>
<div class="box">
<div class="full">
<p>文字内容...</p>
</div>
</div>
<img src="1.jpg" />
margin 与元素的外部尺寸
一个兼容性问题:Chome 浏览器子容器超过 content box 尺寸触发滚动显示,而 IE 和 Firefox 浏览器是超过 padding box 尺寸触发滚动条显示。
由于这个兼容性问题导致给滚动容器留白不能使用 padding,可以借助 margin 的外部尺寸特性来实现底部留白。
<div style="height: 200px;">
<img height="300" style="margin: 50px 0;" src="1.jpg" />
</div>
margin 的百分比值
元素设置 margin 在垂直方向上我无法改变元素自身的内部尺寸,往往需要父元素作为载体。由于 margin 合并的存在,垂直方向往往需要双倍尺寸才能和 padding 表现一致。
margin 合并
什么是 margin 合并
块级元素的上边距与下边距有时会合并成单个外边距,称为“margin 合并”。
- 块级元素:不包括浮动和绝对定位的元素,尽管浮动元素和绝对定位能让元素块状化。
- 只发生在垂直方向:在不考虑 writing-mode 的情况下,即默认文档流。
三种场景
- 相邻兄弟元素合并
- 父级和第一个/最后一个子元素
- 空块级元素
margin 合并的计算规则
- 正正取大值
- 正负取相加
- 负负取最负值
margin 合并的意义
HTML 最初的设计是用来做图文显示,内置 margin 是为了让文章等不挤在一起,让排版更自然。
margin:auto
有时候元素就算没有设置 width 或者 height,也会自动填充。
margin:auto 的填充规则如下:
- 如果一侧定值,一侧 auto,则 auto 为剩余空间大小。
- 如果两侧均是 auto,则平分剩余空间。
margin 无效的情况
- display 计算 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素,垂直 margin 有效,并且没有 margin 合并的问题,所以图片永远不会发生 margin 合并。
- 表格中的 tr 和 td 元素或者设置 display 计算值是 table-cell 或者 table-row 的元素的 margin 都是无效的。
- margin 合并时,更改 margin 必须设置负值或者比原来的直大,否则无效。
- 绝对定位元素非定位方位的 margin 值“无效”。
- 定高容器的子元素的 margin-bottom 或者宽度定死的元素的 margin-right 的定位“失效”。
- 内联特征导致的 margin 无效。
功勋卓越的 border
border-width 不支持百分比
border-width 的尺寸
- thin:薄薄的,等同于 1px
- medium:厚薄均匀,等同于 3px
- thick:厚厚的,等同于 4px
border-color 和 color
border-color 默认颜色是 color 色值
参考
【1】CSS 世界@张鑫旭