前端小tips之标签

原创 2015年07月09日 11:18:27
文本溢出 省略号
================
overflow: hidden;zoom:1;white-space:nowrap;text-overflow:ellipsis;


---------------------------------------------------------------------------------------------------------------
文本首行缩进
=============
text-indent: 2em;
---------------------------------------------------------------------------------------------------------------


圆角
=====
border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;behavior:url(css/iecss3.htc);
border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;behavior: url(css/iecss3.htc);


同样的类名
第一个 
   .input-group-addon:first-child {
        border: 1px solid #ccc;
        border-radius: 4px;
        display: table-cell;
        white-space: nowrap;
        vertical-align: middle;
        background-color: antiquewhite;
        width: 100px;
        float: left;


        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
最后一个 就是更改了 
      border-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
注意:IE9+才支持


---------------------------------------------------------------------------------------------------------------


透明度
======
filter:alpha(opacity=50);opacity:0.5;
rgba(20, 20, 20, 0.1);


---------------------------------------------------------------------------------------------------------------


滚动标签 
========
<marquee> 缺陷:不能实现无缝滚动
属性:behavior:设置滚动的方式:


scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动


     direction:设定活动字幕的滚动方向


     loop:设置滚动的次数默认为-1会一直滚动下去。


     scrollamount:设置滚动字母的速度


     scrolldelay:设定活动字幕滚动的两次之间的延长时间。(单位毫秒)


---------------------------------------------------------------------------------------------------------------


平滑过渡 transition
===================
css3 的transition:允许css属性值在一定的时间区内平滑的过渡。


transition-property:变换延续的时间


transition-duration:在延续时间段


transition-timing-function:变换速度变化


transition-delay:变化延迟时间


transition简写模式: 顺序为:transition-property transition-duration transition-timing-function transition-delay 


兼容性问题的解决:

-webkit-transition,-moz-transition,-o-transition,-ms-transition




---------------------------------------------------------------------------------------------------------------


Math应用
==========
Math.ceil()   向上取整
Math.floor()  向下取整
Math.abs()    绝对值
Math.round()  四舍五入


---------------------------------------------------------------------------------------------------------------


table 标签应用
=============
border-collapse:collapse; 表示边框合并在一起。
border-collapse:separate;表示边框之间的间距,间距的大小用border-spacing:0px;定义大小。
caption-side:top;设置表格标题的位置。
empty-cells:hide;隐藏空单元格。


隔行变色:
background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0") //设置隔行变色
table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9;}


---------------------------------------------------------------------------------------------------------------


媒体查询
========
@media screen and (-webkit-min-device-pixel-ratio: 0)


@media screen and (max-width: 767px){} 宽度小于767px时使用


@media (min-width: 768px)


@media (max-device-width: 480px) and (orientation: landscape) max-device-width指的是设备整个渲染区宽度(设备的实际宽度)


@media all and (transform-3d), (-webkit-transform-3d)


iPads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}


iPads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}


iPads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}


iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


---------------------------------------------------------------------------------------------------------------


水平垂直居中
=============
.DivCen{ width:500px; height:200px; position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-100px;}
---------------------------------------------------------------------------------------------------------------


flex布局
========
flex 是Flexible Box的缩写,意思是“弹性布局”
支持的浏览器:chrome21+,opera12.1+,FF22+,Safari6.1+,IE10+


任何容器都可以使用
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
行内元素:
.box{
  display: inline-flex;
}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。


容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。


【【【【【【属性】】】】】】】


以下6个属性设置在容器上。
【flex-direction属性】
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。


【flex-wrap属性】
flex-wrap属性定义,如果一条轴线排不下,如何换行。
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。


【flex-flow属性】
是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}


【justify-content属性】
定义了项目在主轴上的对齐方式。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。


【align-items属性】
定义项目在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。


【align-content属性】
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


以下6个属性设置在项目上。


【order属性】
定义项目的排列顺序。数值越小,排列越靠前,默认为0。


【flex-grow属性】
定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。


【flex-shrink属性】
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。


【flex-basis属性】
定义了在分配多余空间之前,项目占据的主轴空间(main size)。
浏览器根据这个属性,计算主轴是否有多余空间。
它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。


【flex属性】
是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。


【align-self属性】
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。该属性可能取6个值,除了auto,其他都与align-items属性完全一致。




【【【【【【布局】】】】】】】


【单项目】
水平线 默认为左上角 justify-content: center;居中 justify-content:flex-end;居最右
垂直线 align-items: center;垂直居中 align-items: flex-end;局最低端


【双项目】


  justify-content: space-between;
  flex-direction: column;
  align-items: center;

---------------------------------------------------------------------------------------------------------------

字符串操作
===========
search 查找,找不到返回-1,找到则返回他的位置
substring 获取子字符串,字符串截取,substring(起点,终点),不包括终点位置,如果没有终点,则截取到字符串结束
charAt 获取某个字符串
split 分割字符串,获得数组 切片


---------------------------------------------------------------------------------------------------------------

兼容性问题的解决
=================


<!--[if lt IE 9]>
      <script src="http://css/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://css/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="http://css/jquery/1.11.1/jquery.min.js"></script>


---------------------------------------------------------------------------------------------------------------


手机页面,头部
=========
<!DOCTYPE html>
<html>
<head>
<title>移联网信</title>
<meta charset="utf-8">
<meta name="data-spm" content="1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="移联网信">
<meta name="description" content="移联网信">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/base.css" rel="stylesheet" type="text/css">
</head>


---------------------------------------------------------------------------------------------------------------


公共标签属性
============
@charset "utf-8";
::selection{color:#fff;background-color:#f47264;}
::-moz-selection{color:#fff;background-color:#f47264;}
::-webkit-selection{color:#fff;background-color:f47264;}
html{height:100%;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,figure{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;vertical-align:bottom;}
button,input,select,textarea{font:12px/1.125 "Microsoft Yahei",Arial,Helvetica,sans-serif;}
input,select,img{vertical-align:middle}
input,select,textarea{outline:none;appearance:normal;-moz-appearance: normal;-webkit-appearance: normal;-o-appearance: normal;}
a, input[type="submit"], input[type="reset"], input[type="button"] {appearance:none;-moz-appearance: none;-webkit-appearance: none;-o-appearance: none;}
input[type="submit"], input[type="reset"], input[type="button"]{border: 1px solid #d2cec5;background-color: white;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;behavior:url(css/iecss3.htc);cursor: pointer;}
a:focus,input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-only;}
ul,ol{list-style:none;}
img{-webkit-tap-highlight-color:transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
a{color:#000;-webkit-tap-highlight-color:transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
a:hover{color:black;}
a:focus{outline:none;-moz-outline:none;-webkit-outline:none;}
a,del,ins{text-decoration:none;}
label{cursor:pointer}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,i,em,var{font-style:normal;}
body{font:12px/1.125 "Microsoft Yahei",Arial,Helvetica,sans-serif;height:100%;word-wrap:break-word;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
.adaptive {overflow:hidden;zoom:1;}
.floatL {float:left;}
.floatR {float:right;}
.clear {clear:both;height:0;font-size:0;overflow:hidden;}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1;}


---------------------------------------------------------------------------------------------------------------
IE9以下
========
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


---------------------------------------------------------------------------------------------------------------

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

整理电脑里面的前端开发中的小Tips【及时更新】

1)img 标签如果src设置为空或者#的时候,会多发一次请求,建议设置为 about:blank 。测试浏览器 ie6,ie7,ie8,chrome17,firefox10 2) try ~cat...

一些关于Web前端的小tips

代码细节

前端tips

行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素:div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内...

WEB前端-HTML-常用标签

各种符号要想在页面上显示各种符号,需要根据html的符号对照表来进行编写。 详细请点这里p&br&hrp 表示段落,默认段落上下会有行间距; br 是换行,自闭和标签; h...

5种非常精美的Web前端标签(一)

  • 2014年08月13日 15:52
  • 1.3MB
  • 下载

前端备忘标签

  • 2012年06月04日 23:48
  • 401KB
  • 下载

推荐十款来自极客标签的超棒前端特效[第十四期]

日期:2013-9-9  来源:GBin1.com 本周我们推荐来自极客标签社区带来的10款超棒前端特效,大家可以在这里免费下载你需要的内容。如果你也有更好的作品,欢迎分享到社区中来,在得到帮助的同...
  • jjfat
  • jjfat
  • 2013年09月17日 22:09
  • 888
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端小tips之标签
举报原因:
原因补充:

(最多只允许输入30个字)