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

[z2014]

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无效