CSS相关属性的理解和一些效果的实现
CSS
Em和rem的区别：
em相对于父元素，rem相对于浏览器根元素html大小
1、超出文本省略号显示：
利用CSS样式，设置文字超出的部分用省略号代替
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;设置超过两行的文本用省略号显示时：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //代表文本的行数为两行
2、Vertical-align:(参数)
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
3、吸顶效果的距离测量
js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性：（暂时只测了IE和firefox，实际上我工作中用到的最多的是chrome）
网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
(javascript) document.documentElement.scrollTop //firefox
(javascript) document.documentElement.scrollLeft //firefox
(javascript) document.body.scrollTop //IE
(javascript) document.body.scrollLeft //IE
(jqurey) $(window).scrollTop()
(jqurey) $(window).scrollLeft()网页工作区域的高度和宽度
(javascript) document.documentElement.clientHeight// IE firefox
(jqurey) $(window).height()
元素距离文档顶端和左边的偏移值
(javascript) DOM元素对象.offsetTop //IE firefox
(javascript) DOM元素对象.offsetLeft //IE firefox
(jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left
4、jQuery可以通过计算
element..offset().top-$(document).scrollTop()来计算元素到可是窗口顶部的距离原生Js可以直接通过
document.getElementsByClassName("tab-contain")[0].getBoundingClientRect().top来直接获取元素到可是窗口顶部的距离
5、margin的应用
一侧定宽的自适应布局：
左边的元素给予一个固定的宽度并左浮动，右边的block元素设置一个固定的margin-left值即可
6、border的一些应用
实现边框与字体的颜色一致变化
因为border-color的默认颜色就是color！所以当没有指定border-color、box-shadow、text-shadow…时，会使用color作为边框色！例如如下例子：
.add{color:#ccc; border: 1px solid; transition: color .25s;} .add:hover{color:#06c;}三角与梯形的实现：
梯形：
.trapezium{width:100px; height:100px; border: 100px solid; border-color: red green blue orange;} 三角形：
.trangle{width:0px; height:0px; border: 100px solid; border-color: red green blue orange;}增加radios和checkboxs的响应区域大小：
.checkbox{border: 2px solid transparent; background-clip: content-box; background-color: #fff; box-shadow:inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px; color: #d0d0d5;}实现两栏等高布局：
Html：
<div id="fa">
<div class="col">
<p>1231321321p>
<p>1313213p>
<p>1313213p>
<p>1313213p>
<p>1313213p>
<p>1313213p>
div>
<div class="col">
<p>45645456456p>
div>
div>
css：
#fa {
width: 800px;margin: 0 auto;background-color: #1524e5;overflow: hidden;
}
.col {
float: left;width: 50%;padding-bottom: 10000px;margin-bottom: -10000px;
}
.col:first-child {
background-color: #34ef34;
}
.col:last-child {
background-color: #ef34ef;
}7、 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
Html：
<div class="box">
<div class="el1">div>
<div class="el2">div>
div>css：
.box {width:200px; height: 100%;background:red;position:relative;}
.el1 {height:100px;background:green;}
.el2 {background:blue;width:100%;position:absolute;top:100px;bottom:0;}
有一个宽度自适应的div，里面有两个div，一个宽度100px，希望另一个填满剩下的宽度。
.box{
width: 100%;height: 100px; background: red;position: relative; overflow: hidden;
}
.el1 {
float: left;width: 100px;height: 100%; background: green;
}
.el2 {
float: left;background: blue;height: 100%; position: absolute; left: 100px;right: 0;
}
或者：
.box{
width: 100%;height: 100px; background: red; overflow: hidden;
}
.el1 {
float: left;width: 100px;height: 100%; background: green;
}
.el2 {
width:100%;height: 100%; margin-left:100px;background:blue}或者：
.box{
width: 100%;height: 100px; background: red;
}
.el1 {
position: absolute;width: 100px;height: 100%; background: green;
}
.el2 {
width:100%;height: 100%; margin-left:100px;background:blue}
8、padding实现三道杠
html
<div class="line">div>
css
.line{width:150px; height:30px; padding: 15px 0; border-top:30px solid; border-bottom: 30px solid; background-color: currentColor; background-clip: content-box;}
实现原因：background-clip:content-box 使得background只作用于内容区域
9、CSS 七阶层叠水平
1、层叠上下文 background/border
2、负z-index
3、block块状水平盒子：正常流失布局，非inline-block，无position定位（static除外）
4、float浮动盒子：无position定位（static除外）的float浮动元素
5、inline/inline-block水平盒子：正常流式布局，非inline-block
6、z-index:auto或z-index:0
7、正z-index