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>1231321321</p>    <p>1313213</p>    <p>1313213</p>    <p>1313213</p>    <p>1313213</p>    <p>1313213</p>  </div>  <div class="col">    <p>45645456456</p> </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