/* 使用cssText */
el.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 20px‘;
复制代码
// css
p{
background-color: expression(altBgcolor(this))
}
// js
function altBgcolor(el){
el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
复制代码
.triangle{
width:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:20px solid #000;
}
复制代码
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
box-sizing: content-box|border-box|inherit:
复制代码
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
line-height
子级 position: absolute; // 左,高 各50%,
子级 具体宽高度 position: absolute; left,right,bottom,top 都为0,margin:atuo;
通过给父级设置 flex
父级display:table, 子级:display: table-cell; vertical-align: middle;
父级display:grad, 子级:margin:auto; 兼容性差,不推荐
通过给父级设置before
.ghost-center {
position: relative;
border: 1px solid blue;
height: 400px;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center>.content {
display: inline-block;
vertical-align: middle;
width: 20rem;
}
复制代码
transform:
transition:transition: property-color duration timing-function; transition: height 0.3s ease;
animations:用来指定一组或多组动画,每组之间用逗号相隔,支持IE10以上
.anim{
animation-name:jump;
}
@keyframes jump{
form{
top: 100;
}
to{
top: 0
}
}
复制代码
transition-timing-function
说明:针对不同的浏览器写不用的CSS,就是CSS Hack
条件Hack
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
复制代码
属性级Hack
hack | 写法 | 实例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
---|---|---|---|---|---|---|---|---|---|---|---|---|
* | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
+ | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
- | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
_ | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
# | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
\0 | color:red\0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
\9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
!important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
选择符Hack 最常见的是
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
复制代码
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
原文:https://www.cnblogs.com/tkqq000/p/14894858.html