利用内联元素的 padding 实现高度可控的『管道符』

作者: McDu | 来源:发表于2021-01-31 16:01 被阅读0次

利用内联元素的 padding 实现高度可控的『管道符』
CSS系列一
元素的高度和宽度
CSS布局&居中
常见居中方式（定宽，不定宽，inline，inline-bloc
css垂直居中
浮动。box
css系列2 堆叠上下文
javascript Dom操作
JQuery 计算高度

内联元素的 padding 属性，其上下 padding 视觉表现为层叠，但其会影响外部尺寸。relative 元素的定位、盒阴影 box-shadow 及 outline 是纯视觉层叠，不会影响外部尺寸。

<div>
     <span class="span">木薯胖</span>
     <span class="span">樱花道</span>
</div>

<style>
.span + .span::before {
  content: "";
  font-size: 0;
  padding: 10px 3px 1px;
  margin-left: 6px;
  border-left: 1px solid grey;
}
</style>

利用内联元素的 padding 实现高度可控的『管道符』
内联元素的 padding 属性，其上下 padding 视觉表现为层叠，但其会影响外部尺寸。relative 元...
CSS系列一
内联元素： margin,padding都有用，padding不会影响其位置。但是无法设置宽高，内联元素的高度是...
元素的高度和宽度
div中只有内联元素内联元素的高度 div中一行内联元素由行高决定，多行是每一行的叠加；padding和marg...
CSS布局&居中
块级元素和内联元素的高度文档流：文档内元素的流动方向块级元素：从上往下，可以设置宽高，可以设置padding,...
常见居中方式（定宽，不定宽，inline，inline-bloc
1 水平居中 1.1 内联元素水平居中利用text-align: center可以实现在块级元素内部的内联元素水...
css垂直居中
1.父元素不设置高度，子元素设置padding撑开，形成垂直居中 2.父元素高度固定，利用table属性居中对齐....
浮动。box
盒子样式内边距：padding 外边距：margin 外边距重叠：浮动：float 内联元素浮动：内联元素盒模型：
css系列2 堆叠上下文
堆叠顺序内联元素比如span，width，height，padding-top，padding-bottom，m...
javascript Dom操作
clientHeight 返回元素的可见高度 (内容高度+padding高度)clientWidth 返回元素的...
JQuery 计算高度
.height()只计算元素的高度.innwerHeight()计算元素的高度加上 padding的高度.oute...