overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决。
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"
*文字溢出显示省略号
{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
*旋转
综合使用使用transform对元素进行旋转、缩放、倾斜、移动的方法来对一个元素进行多重变形。用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate
*阴影(浏览器兼容)
-webkit-box-shadow: 3px 3px 5px #eb6100;左右 上下 大小 颜色-moz-box-shadow: 3px 3px 5px #eb6100;
box-shadow: 10px 10px 10px #eb6100;
*em与px
html{font-size:100%}
em
1. font-size:18px=18/16=1.125em line-height:30px=30/18=1.67em width:320px=1/18*320=17.78em height:50px=1/18*50=2.78em
2. font-size:16px=16/16=1em line-height:30px=30/16= width:320px=1/16*320= height:50px=1/16*50=@media only screen and (min-width: 320px)and (max-width: 360px) {
body{ font-size:0.75em;line-height:1.85em }
}
rem
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
*PC端banner居中
对于class的banner我们要经过如下定义{ position:relative; left:50%; margin-left:-50%px; width:100%; }margin-left的值就是图片大小的一半,left要定义个50%。*给head加 点击链接进入新的窗口
<base target="_blank" />
消除input框的默认样式
input, button, select, textarea {outline: none;-webkit-appearance:none;border-radius: 0;}
input[type="submit"], input[type="button"],input[type="reset"],button { -webkit-appearance: none; outline: 0; cursor: pointer; }
注:submit button reset是input的类型标签
- outline: none;去掉chrome浏览器自带的点击input框出现边框情况
- -webkit-appearance: button;使元素标签看起来像个按钮样式,意思定义了按钮样式
- -webkit-appearance: none;去掉按钮样式
- border-radius: 0;去掉圆角in
<input type="submit" name="submit" class="left" value="提交挂号" />
<input type="reset" name="reset" class="right" value="重置信息" />
*input框默认显示的字体颜色和输入的颜色保持一致
*我想让input框默认显示的字体颜色和输入的颜色保持一致,一直认为应该要设置input的颜色,改了很久,一定用不管,最后想到了placeholder属性,于是乎百度了一下,果然placeholder默认的字体颜色是浅灰色的, 然后针对placeholder来设置你自己想要的颜色:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000; opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;opacity:1;
}
input:-ms-input-placeholder{
color: #000;opacity:1;
}
input::-webkit-input-placeholder{
color: #000;opacity:1;
}
也可以给这个属性加字体
input::-webkit-input-placeholder { /* WebKit browsers*/
color:#999;font-size:14px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/
color:#999;font-size:14px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+*/
color:#999;font-size:14px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+*/
color:#999;font-size:14px;
}
* 列表 第几个间距改(手机站起作用 ie的不支持)
li#ttj_x6li:nth-child(3)
li.last
:nth-child(3n+2)-------每隔三个从第二个开始
*border边框背景图片
border-radius 2值 对角位置13 24
-----------三个值顺时针方向1 (2对角4) 3 四个值顺时1234 也就是上右 下左的顺序 一个四边形的各个位置
-webkit-border-images:url (Images/nin.png) 27/27px repeat stretch
-----------27是方向 27是宽度 平铺 拉伸 /边框宽度 图片81px /3=27四个角 水平垂直 方向九宫格
<style>
div
{border:15px solid transparent;
width:250px;
padding:10px 20px;}
#round
{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;}
#stretch
{-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;}
</style>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>
<div id="round">这里,图像平铺(重复)来填充该区域。</div>
<br>
<div id="stretch">这里,图像被拉伸以填充该区域。</div>
图片素材
h5图标用法
<i class ="Fa fa-pencil fa-fw"> ---------三个参数分别是: 类 字体类型 大小
*手机兼容性调节
@media only screen and (min-width: 320px)and (max-width: 430px) {.zhuanjia ul li dl a { margin-top: 0; }
}
*单位换算
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中先全局声明 Font-size=62.5%,很多初学者可能会在此定义0.625em或者直接定义12px,这是没有效果的,一定要定义font-size=62.5%。
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em,10px=1em,也就是说只需要将原来的px数值除以10,然后换上em作为单位就行了。
所以50px等于5em。
#LRfloater0{ top:40px !important}
距离顶部40像素
*br浮动
br{ float:left}可以限定屏幕在某个区间浮动显示为一行
{position:fixed; left:0; right:0; bottom:0}定位底部居中