单行文本溢出
.inaline{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
多行文本溢出，合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
.intwoline{display: -webkit-box!important;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp:2;}
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
after伪元素实现
.img-box{border:1pxsolid red;width:300px;height:300px;text-align: center;overflow: hidden;font-size:0;}.img-box:after{content:"";height:100%;display: inline-block;vertical-align: middle;}img{vertical-align: middle;}
table-cell实现
.img-box{display: table;border:1pxsolid red;width:308px;height:308px;overflow: hidden;text-align: center;}.img-boxa{display: table-cell;vertical-align: middle;width:300px;height:300px;}
.img-box{width:400px;height:300px;border:1pxdashed#ccc;display: table-cell;vertical-align: middle;text-align: center; }
line-height 实现
.img-box{width:400px;height:300px;border:1pxdashed#ccc;text-align: center;line-height:300px;font-size:0;}.img-boximg{vertical-align:middle;border:1pxsolid#ccc;}
.img-box{width:400px;height:300px;border:1pxdashed#ccc;text-align: center; }.img-boxp{width:400px;height:300px;line-height:300px; }.img-boxpimg{vertical-align:middle;border:1pxsolid#ccc;}
ele:nth-of-type(n)是指父元素下第n个ele元素
ele:nth-child(n)是指父元素下第n个元素且 这个元素为ele，若不是，则选择失败
zero
one
two
one节点.demo li:nth-of-type(2)则选择的是
two
节点。-->
n 可以是数字、关键词或公式:
odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值
p:nth-of-type(3n+0){background:#ff0000;}/*在这里，我们指定了下标是3的倍数的所有p元素的背景色*/
标准盒模型： 与css3中的 box-sizing：content-box 属性类似, 设置的width = content部分的宽
IE下的盒模型：与css3中的 box-sizing：border-box 属性类似，将padding值与border值归纳与设置的width中,设置的width= content+padding+border
height的值设置为百分比时值参照的是：它的首个设置了高度的祖先级块级元素的高度
padding、margin的值设置为百分比时参照的是：它的首个设置了宽度的祖先级块级元素的宽度
另外，在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。 由此可以纯css实现高度与宽度成比例:
.wrap{width:200px; }.inner{width:100%;height:0;padding-bottom:50%;background-color: red;overflow: hidden; }
先为元素添加边框
/*添加边框*/.navli{border-right:1pxsolid#666;}
为最后一个元素去除边框
/*添加边框*/.navli{border-right:1pxsolid#666;}
不过不要这么做，使用:not()伪类来达到同样的效果：
.navli:not(:last-child){border-right:1pxsolid#666;}
当然，你也可以使用.nav li + li或者.nav li:first-child ~ li，但是:not()更加清晰，具有可读性。
使列表的每项都由逗号分隔：
ul>li:not(:last-child)::after{content:",";}
因最后一项不加逗号，可以使用 :not() 伪类。
注意：这一技巧对于无障碍，特别是屏幕阅读器而言并不理想。而且复制粘贴并不会带走CSS生成的内容,需要注意。
使用负的nth-child可以选择 1 至 n 个元素。
li{display: none;}/*选择第1至第3个元素并显示出来*/li:nth-child(-n+3){display: block;}
或许你已经掌握了如何使用 :not()这个技巧，试下这个：
/*选择除前3个之外的所有项目，并显示它们*/li:not(:nth-child(-n+3)){display: none;}
用 display：-webkit-box;来实现真正的流式布局，虽然说float与display 都是可以实现，但是如果没有设置宽高，这两种方法还是不能实现，但是用display:-webkit-box 就可以实现。
父级元素 用
dispaly:-webkit-box;
-webkit-box-orient:horizontal //横排显示 vertical //竖排显示
-webkit-box-pack:end 距结束对齐 center距中对齐 justify 两端对齐
-webkit-box-align: 属性规定如何对齐框的子元素 start|end|center|baseline|stretch;
子元素也用
display：-webkit-box;
-webkit-display-flex:2//所占比例
使用padding-top来实现图片或者背景自适应
1.<div class='cover-paddingTop'><img src =''/></div>
虽然用width=100% 也可以是图片自适应，但是在浏览器渲染的时候，会出现高度塌陷的问题。用以下方法也可以实现，同时也避免了高度塌陷的问题，可以使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100；
.cover-paddingTop {
position: relative;
padding-top: 50%;
overflow: hidden;
}
.cover-paddingTop img{
width:100%;
position: absolute;
top:0;
}
背景自适应：
将使用到保持元素的宽高比的技巧，为元素添加垂直方向的padding-top的值，使用百分比的形式，这个值是相对于元素的宽而定的，比如我上面的一张图片的宽度是1024px，高度为316px；那么现在的
padding-top = （高度 / 宽度 ）＊ 100% ＝ （316 ／ 1024）＊ 100% ＝ 30.85%;
但是仅仅对图片高度和宽度缩放的放还不够，我门还必须添加 background-size:cover, 使这个属性让背景铺满元素的，但是IE8及以下不支持该属性，因此为了兼容IE下面的浏览器，我门还需要再加一个属性 background-position: center ; 同时我门也要保证 图片的宽度最大等于父容器的宽度；
.figure { padding-top:30.85%;/* 316 / 1024 */ background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; background-size:cover; background-position:center; }
网友评论