标签:它的 延迟 nts doc point ant mat 使用 特殊性
文章目录万能居中
1.margin: 0 auto;水平
2.text-align: center;水平
3.行高,垂直
4.表格,center,middle;水平垂直
5.display:table-cell;模拟表格,
6.绝对定位,50%减自身宽高
7.绝对定位,上下左右全0,margin:auto
8.绝对定位加相对定位。不需要知道宽高
9.IE6,IE7:给父元素设一个font-size:高度/1.14,vertical-align:middle
使 BFC 内部浮动元素不会到处乱跑;
和浮动元素产生边界。
盒模型哪两种模式?什么区别?如何设置
标准模式: box-sizing: content-box; 宽高不包括内边距和边框
怪异模式: box-sizing: border-box
?
额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
父元素添加overflow:hidden; (触发BFC)
使用after伪元素清除浮动(推荐使用)
使用before和after双伪元素清除浮动
删格化的原理
比如antd的row和col, 将一行等分为24份, col是几就占几份, 底层按百分比实现; 结合媒体查询, 可以实现响应式
纯css实现三角形
// 通过设置border
.box
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}
// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐个延迟0.4s
overflow原理
overflow: hidden 能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动
创建BFC条件(满足一个):
float的值不为none;
overflow的值不为visible;
position的值为fixed / absolute;
display的值为table-cell / table-caption / inline-block / flex / inline-flex。
实现自适应的正方形:
使用vw, vh
width百分比, height: 0, padding-top(bottom): 50%
标准模式和怪异模式
document.compatMode属性可以判断是否是标准模式,当 document.compatMode为“CSS1Compat”,是标准模式,“BackCompat”是怪异模式。
怪异模式是为了兼容旧版本的浏览器, 因为IE低版本document.documentElement.clientWidth获取不到
怪异模式盒模型: box-sizing: border-box; 标准模式: box-sizing: content-box
CSS3实现环形进度条
两个对半矩形遮罩, 使用rotate以及overflow: hidden进行旋转
ID选择器的特殊性值,权重100。
类选择器、属性选择器或伪类,权重10。
元素和伪元素,权重1。
通配选择器*对特殊性没有贡献,权重0。
最后比较特殊的一个标志!important(权- 重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性 权重10000。
标签:它的 延迟 nts doc point ant mat 使用 特殊性
原文地址:https://blog.51cto.com/14513127/2483494