你不知道的css(二) —-content与替换元素,margin,padding

• 2019 年 11 月 20 日
• 筆記

1.替换元素

• 替换元素的尺寸计算规则：css尺寸 > html尺寸 > 故有尺寸
• 当做懒加载时,直接抛弃掉src属性<img>效率最高
• 替换元素没有::after 和 ::before

2.如何将一个替换元素变成一个非替换

• 去掉src属性
• 替换元素和非替换间隔了一个css的content属性 chrome浏览器所有元素都支持content属性，而在其他浏览器仅在::before或::after中支持

3.content的特性

• content生成的文本是无法复制选中的
• content动态生成的值无法获取

4.content内容生成技术

• 清楚浮动
• content字符内容生成 正在加载…
• content生成图片
• content属性值内容生成（自定义的html属性也可以）
• content生成couter计数值

5.padding属性

• 对于内联元素来说，padding在垂直方向上会起作用，但是不会影响布局，适用于手机端点击区域过小的情况
• padding的百分比值无论水平和垂直都是相对于宽度计算的(块状元素),可以利用padding百分比来制作一个自适应的比例图形

.box{      padding: 10% 50%;      position: reletive;  }  .box img{      position: absolute;      width: 100%;      height: 100%      left: 0;      top: 0  }

• 内联元素默认的高度完全受font-size决定
• 按钮实现小技巧

button{      position: absolute;      clip: rect(0,0,0,0);  }  label{      display: inline-block;      line-height: 20px;      padding: 10px;  }  <button id="btn"></button>  <label for="btn">click</label>

• padding进行图形绘制

.icon{      display: inline-block;      width: 14px;      height: 1px;      padding: 3px 0;      border-top: 1px solid;      border-bottom: 1px solid;      background-color: currentColor;      background-clip: content-box;  }

• padding尺寸不为负

6.margin属性

• 可以通过给父元素添加负margin，来增加容器的可用宽度 -利用margin实现等高

.column-box{      over-flow: hidden;  }  .son,  .child{      margin-bottom: -9999px;      padding-bottom: 9999px  }

• 内联元素垂直方向上的margin是没有任何影响的
• margin: auto的作用

如果一侧定值，一侧auto，则auto为剩余空间大小（margin初始值为0） 如果两侧均是auto，则平分剩余空间

触发margin:auto的前提条件是对应方向会自动填充，所以一般高度不会自适应，可以使用writing-mode: vertical-lr改变文档流方向，而这样水平方向无法居中，所以需要设置position，将正常流宽度改变成格式化宽度和格式化高度

• margin无效的情况

(1) 绝对定位元素非定为方向的margin值无效 (2)定高容器的子元素的margin-bottom或者定宽元素的子元素的margin-right无效