CSS | ♠♥♣♦

[toc]

零. css hack

.box{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

常见css hack
|标记|IE6|IE7|IE8|FF|Opera|Sarari|
|:–:|:–:|:–:|:–:|:–:|:–:|:–:|
[*+><]|√|√|X|X|X|X
_ |√ |X| X |X |X |X
\9 |√ |√ |√ |X |X |X
\0 |X |X |√ |X |√ |X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} |X| X| X |X| X |√
.bb , x:-moz-any-link, x:default| X |√ |X| √(ff3.5及以下) |X |X
@-moz-document url-prefix(){.bb{}} |X |X |X |√ |X |X
@media all and (min-width: 0px){.bb {}} |X |X |X |√ |√ |√

+html .bb {} |X |√ |X |X |X |X
游览器内核 |Trident |Trident |Trident |Gecko |Presto |WebKit
注意：网上很多资料中常常把!important也作为一个hack手段，其实这是一个误区。!important常常被我们用来更改样式，而不是兼容hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是，大家注意一下，IE6只是在某些情况下不识别！==（ie6下，同一个大括号里对同一个样式属性定义，其中一个加important 则important标记是被忽略的，例：{background:red!important; background:green;} ie6下解释为背景色green，其它浏览器解释为背景色red；如果这同一个样式在不同大括号里定义，其中一个加important 则important发挥正常作用，例：div{background:red!important} div{background:green}，这时所有浏览器统一解释为背景色red。）==
一. UL高度自适应
1
2
3
4
ul {
min-height:450px;
height:auto;
}

二. 垂直居中

1
2
3

.chjz {
    justify-content:center;
}

三. 文本溢出显示省略号

1
2
3

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

四. 鼠标滑过变成手型

1	cursor:pointer;

五. pageX，clientX，screenX与offsetX

先统一了解下这四个概念，理解不透没关系，咱们把概念相近的对比着一一细说。

pageX：鼠标指针距离文档X轴左侧边缘的距离，不随滚动条变化而变化

clientX：鼠标指针距离可视窗口左侧边缘的距离，随着滚动条变化而变化

screenY：鼠标指针距离屏幕的距离(包括浏览器工具栏之类)，不随滚动条变化而变化

offsetX：鼠标指针距离当前绑定元素左侧距离

我们先来看看pageX与clientX无滚动条的对比效果

1	<div class="one"></div>

var Div = document.querySelector('.one');
Div.onmousemove = (e) => {
    var X1 = e.pageX;
    var Y1 = e.pageY;
    var X2 = e.clientX;
    var Y2 = e.clientY;
    Div.innerHTML = `pageX:${X1},pageY:${Y1},clientX:${X2},clientY:${Y2}`
}

由图可见，在无滚动条的情况下，pageX与clientX，pageY与clientY是完全相同的。

试着给div增加一个margin-left:1600px;让页面出现滚动条,我们将可视窗口滚动到最右侧，再来对比pageX与clientX

可以看到，在页面X轴出现滚动条后，pageX始终要比clientX要大，那是因为clientX无论滚动条滚动多少，它始终只计算鼠标到可视窗口左侧的距离，而pageX则还要加上滚动的距离

pageX = 鼠标到可视窗口左侧距离+滚动条滚动距离(如果有滚动条)

clientX = 鼠标到可视窗口左侧距离

如果没有滚动条，这两者的距离是完全相同的。

我们再结合前者，加上screenY与offsetY的对比，请看图

为了方便对比，这里我们拿Y轴做对比。

offsetY是相对绑定事件的元素，这里是相对div，所以相比另外三个，Y轴的数值永远是最小的。

pageY和clientY在无滚动条的情况下是完全相同的，相对文档和可视窗口区域。这里因为没有滚动条，所以是完全相同的。

screen是相对屏幕，包含了浏览器任务栏，书签栏的高度，所以它永远是最高的。

关于这四个的兼容问题，由于浏览的不断更新，比如offsetX很多博客都说是IE独有的，结果上图我全是在谷歌测试的，也是支持的，所以这样的说法过于绝对，是不完全正确的。

offsetLeft与style.left

==下面概念中的position值为非static时，可以理解为position为relative,absolute,fixed其一==

2.1 offsetLeft：

元素相对其定位父级(offsetParent)的左偏移量。

简单去理解，就是距离元素最近且position值非static父级元素的左偏移量，如果向上一直未找到，则相对body。

假设此时一个父级div包含一个子级div，均未定位，父级margin-left为20px,子级margin-left为30px，且父级border为2px

我们上面说了，从子级开始往上找定位父级，但是未找到，那么此时就相对body

那么子级的offsetLeft = 父级左偏移量20px+子级30px+父级边框2px

我们尝试给父级div添加一个position：absolute属性，其余属性全部不做改变，此时子级的定位父级就是自己的上级div，因此offsetLeft为30px

2.2 style.left：

获取元素相对其定位父级的左偏移，且元素本身position值为非static。

简单去理解，style.left只有元素自身进行定位才会有效，否则是无法取到的。

2.3 为什么style.left取不到？

首先元素本身要进行定位，其次，其left属性为内部样式时才能获取。

1	<div style='left=20px'></div>

2.4 offsetLeft与style.left的区别

1.获取offsetLeft属性的元素自身不用定位，但获取style.left的元素必须定位
2.offsetLeft是只读的，style.left是读写的
3.offsetLeft返回的是数字，不带单位，style.left 返回的是字符串，带单位
4.style.left 只能获取定义在html中的内部样式属性，而offsetLeft并没有这个限制
2.5 同时存在margin-left与left时的offsetLeft

1	<div class="parent"><div class="child" style='left:20px'></div></div>

需要注意的是，当margin与left，外边距与定位偏移量同时存在时，它们是累加的，并不会发生重叠。

offsetwidth,clientWidth与scrollWidth

我们先来看看这三者的含义

offsetwidth：获取元素的宽度，包含border，padding和元素的width，不包含margin

clientWidth:获取元素内容区域的宽度，包括padding与元素的width，不包含border与margin

scrollWidth：获取元素的宽度，包含padding和width，不包含border与margin

clientTop，scrolleTop

scrolleTop:获取元素滚动后的距离文档顶部的距离，也就是滚动条滚动的距离。

clientTop:获取元素边框的厚度，也就是border的宽度。

六. iframe的高度自适应

子页面html节点上要有下面这部分，不然ie浏览器会无限递增

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

页面部分

1 2	<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx" frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>

父页面调用

1
2
3

<script type="text/javascript">
  startInit('mainFrame', 560);
</script>

//父页面加入下面js

var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1,] == false);
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false) {
            try {
                bHeight = iframe.contentWindow.document.body.scrollHeight;
            } catch (ex) {                
            }
        }
        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
        else if (isIE == false && isOpera == false && iframe.contentWindow) {
            try {
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            } catch (ex) {
            }
        }
        else if (isIE == true && isIE9More) {//ie9+
            var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
            if (heightDeviation == 0) {
                bHeight += 3;
            } else if (heightDeviation != 3) {
                eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                bHeight += 3;
            }
        }
        else//ie[6-8]、OPERA
            bHeight += 3;

        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        //alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
        iframe.style.height = height + "px";
    } catch (ex) { }
}
function startInit(iframeId, minHeight) {
    eval("window.IE9MoreRealHeight" + iframeId + "=0");
    window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}

在iframe页面地址更改前，将iframe高度设置为0，清除上一个子页面高度的影响，google内核浏览器的高度才会自动缩减

1
2
3

document.getElementById("mainFrame").style.height = "0px";//最好设置为minHeight
//$("#mainFrame").height(0);
$("#mainFrame").attr("src", url);

利用window.onresize，它的作用就是当窗口大小改变的时候会触发这个事件。

function changeFrameHeight(){
    var ifm= document.getElementById("iframepage"); 
    ifm.height=document.documentElement.clientHeight;

}

window.onresize=function(){  
     changeFrameHeight();  

}

七. input等标签点击时没有蓝色框

input,
textarea,
select,
a:focus {
  outline: none;
}

八、Table

1、边框合并

table{

border-collapse: collapse;

}

九、三列布局，两边宽度固定中间自适应

https://blog.csdn.net/a18792627168/article/details/79686746