/*DIV鼠标穿透*/
div{pointer-events:none;}
/*清除IE11默认×*/
input::-ms-clear{display:none;}
使用伪类写边框部分三角
右上角三角形
border-top:6px solid #c1ddf7
border-left:6px solid transparent
右下角三角形
border-bottom:6px solid #c1ddf7
border-left:6px solid transparent
左上角三角形
border-top:6px solid #c1ddf7
border-right:6px solid transparent
左下角三角形
border-bottom:6px solid #c1ddf7
border-right:6px solid transparent
圆形边框
border-radius:以百分比定义圆角的形状。-webkit-border-radius是chrome，Safari私有属性。
img{
border-radius: 100%;
-webkit-border-radius: 100%;
}
手机密度比
/*设备最小宽度321px到最大宽度1080px之间且最大密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-max-device- pixel-ratio: 2) {
}
/*设备最小宽度321px到最大宽度1080px之间且最小密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-min-device-pixel-ratio: 2) {
}
/*设备最小宽度321px到最大宽度1080px之间且最小密度比为1到最大密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-min-device-pixel-ratio: 1) and(-webkit-max-device-pixel-ratio: 2) {
}
/*设备最小宽度321px到最大宽度1080px之间且密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-device-pixel-ratio: 2) {
}
手机端全屏蒙层居中弹窗样式
css样式
.pop{width:100%;background-color:rgba(0,0,0,.6);position:fixed;left:0;top:0;z-index:999;height:100%;display:block;}
.outside{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.inside{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;}
.inPops{margin:0 auto;background-color:#fff;/*width:68%;可以根据要求改变宽度*/position:relative;text-align:center;border-radius:5px;-webkit-border-radius:5px;}
html结构
<div class="pop">
<div class="outside">
<div class="inside">
<div class="inPops">
...your html code
</div>
</div>
</div>
</div>
规定段落中的文本单行且溢出部分显示...
p{
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
文本控制显示行
p{
/*这个是想显示几行就写几*/
-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;
}
英文字体允许换行
p{word-break:break-word;}
box-sizing盒子宽度
div{
box-sizing:border-box;-moz-box-sizing:border-box;/* Firefox */-webkit-box-sizing:border-box;/* Safari */
}
/*content-box:
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框
border-box:
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/
css3旋转角度
div{
transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-moz-transfomr:rotate(90deg);
}
css3渐变
/*最简单的写法:*/
background:-webkit-linear-gradient(left,#ffffff,#ffffff);
/*渐变颜色*/
-webkit-linear-gradient(left,startColor,endColor);
/*left位置,startColor起始颜色,endColor结束颜色background-image:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));*/
css3阴影shadow
img{
-moz-box-shadow:2px 2px 5px e69696;/*firefox*/-webkit-box-shadow:2px 2px 5px e69696;/*webkit*/box-shadow:2px 2px 5px e69696;/*opera或ie9*/
}
/*语法box-shadow: h-shadow v-shadow blur spread color inset;*/
段落的行缩进
p{
text-indent:20px;
}
/*这是兼容写法与text-indent一样*/
p:empty{
padding-left:2%;
}
盒子模型分布，与自适应占位
/*
box-flex:
子容器将父容器的宽度等份分,有几个li就几个等份宽度的li;
如果其中一个li设置了固定的宽度而别的li没有设置,则父容器的宽度减去固定li的宽度后在进行等份分;
*/
ul li{
box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;display:block;
}
ul{
display:box;display:-webkit-box;display:-moz-box;
}
继续~
1、如何清除图片下方出现几像素的空白间隙？
/*方法1：*/
img{display:block;}
/*方法2：*/
img{vertical-align:top;}
2、如何让文本垂直对齐文本输入框？
input{vertical-align:middle;}
3、如何让单行文本在容器内垂直居中？
#test{height:25px;line-height:25px;}
/* 只需设置文本的行高等于容器的高度即可 */
4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
/* 按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）*/
5、如何使文本溢出边界不换行强制在一行内显示？
#test{width:150px;white-space:nowrap;}
/* 设置容器的宽度和white-space为nowrap即可，其效果类似标签 */
6、如何使文本溢出边界显示为省略号？
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。 */
7、如何使连续的长字符串自动换行？
#test{width:150px;word-wrap:break-word;}
/* word-wrap的break-word值允许单词内换行 */
8、如何清除浮动？
/*方法1：*/
#test{clear:both;}
/* #test为浮动元素的下一个兄弟元素 */
/*方法2：*/
#test{display:block;zoom:1;overflow:hidden;}
/* #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height */
/*方法3：*/
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
/* #test为浮动元素的父元素 */
9、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
/* #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中 */
10、如何设置span的宽度和高度（即如何设置内联元素的宽高）？
span{display:block;width:200px;height:100px;}
/* 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。 */
11、如何去掉超链接的虚线框？
a{outline:none;}
12、如何容器透明，内容不透明？
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
/*我是不透明的内容*/
/* 高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果 */
13、如何做1像素细边框的table？
/*方法1：*/
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
姓名 Joy Du
年龄 26
/*方法2：*/
#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}
姓名 Joy Du
年龄 26
/* IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。*/
