css小功能

手机端顶部css

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0" />

字体颜色

li之间的线颜色:#EEEEEE

水平居中

margin:0 auto;

上下外边距为0,左右auto,这是针对父元素进行设置的,设置这一句的意思是这个元素在父元素中水平居中

text-align:center

这一句是设置该元素的子元素水平居中,子元素要是inline,inline-block才能生效

垂直居中

line-height:

将line-height与height的高度设为相同,那么该元素的子元素将会垂直居中

position加transform:translate(-50%,-50%);定位居中

该百分比计算不是以父元素为基准,而是以自己为基准


父级元素要用position定位,有宽高,百分比计算以自己为准,适用于没固定大小的内容，min-width，max-height，overflow:scroll

left:50%; top:50%; 
transform:translate(-50%,-50%);

绝对定位居中

父容器元素:position:relative

.子元素class{
  width: 50%;
  height: 50%;//高度必须定义
  overflow: auto;//防止内容溢出
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

文字两端对齐

    text-align: Justify;/*(火狐)*/
	text-align-last: justify;
	text-justify: inter-ideograph;/*(IE)*/

文字单行显示,多余隐藏

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

文字多行显示,多余隐藏

text-overflow: -o-ellipsis-lastline;  
overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-box-orient: vertical; 
-webkit-line-clamp: 2; //显示行数

文字强制不换行

div{white-space:nowrap;}

文字自动换行

div{ 
word-wrap: break-word; 
word-break: normal; 
}

强制英文单词,数字断行

div{word-break:break-all;}

css根据品目定义页面字体

@charset "utf-8";
@media only screen {/*media only screen 是针对彩色屏幕设备,media all是指所有设备*/
    html{
        font-size: 30px;/*这里指1rem为30px*/
    }
}

@media only screen and (max-width: 479px) and (min-width: 321px) {/*屏幕宽度在321--479之间*/
    html {
        font-size: 15px;
    }
}

@media only screen and (max-width: 320px) {/*屏幕宽度小于等于320的*/
    html {
        font-size: 13px;
    }
}
body {
	margin: 0;
	padding: 0;
	background: #fff;   
	font-family: Verdana, "华文细黑";
}

去掉textarea小三角,禁止调整大小

textarea {
    resize: none;
}

去掉下拉框右侧小三角

select{
    appearance:none;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none;  /* Safari 和 Chrome*/
}

去掉input,select 边框点击样式

input,select{
    border:0;
    outline:none;
}

css小箭头

.top_search em {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transition: -webkit-transform .3s;
	transition: transform .3s ease 0s;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-ms-transition: -ms-transform .3s;
	float: left;
	margin-top: 0.9rem;
	margin-left: 1.2rem;
}

css隐藏滚动条,兼容IE,依然可以上下滚动

思路:让父容器overflow:hidden
子容器:宽度增加17

.left-nav-btn {
	/*下面三个宽度用于控制滚动条的隐藏*/
	width: -webkit-calc(100% + 17px);
    width: -moz-calc(100% + 17px);
    width: calc(100% + 17px);
	margin-top: 15px;
	height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
}

css 边框线可以适用于各种边框

.project-phase-all>p:before{
	content: '';
	width: 4px;
	height: 0.875rem;
	background-color: #f13533;
	position: absolute;
	top: 0.8125rem;
	left: 0;
}

修改input placeholder字体颜色

input::-webkit-input-placeholder {
	/*WebKit browsers*/
	color: #cdcdcd;
	font-size: 0.875rem;
}

input::-moz-input-placeholder {
	/*Mozilla Firefox*/
	color: #cdcdcd;
	font-size: 0.75rem;
}

input::-ms-input-placeholder {
	/*Internet Explorer*/
	color: #cdcdcd;
	font-size: 0.75rem;
}