web前端

 

readonly="true"  不能写入字
 maxlength="10" 最多输入10个字

ist-style:none 去掉padding值

overflow: scroll; 出现滚动条
 background-origin:content-box; 定位背景图片的位置

在 body 元素中设置两个背景图像：

body { background-image:url(img_flwr.gif),url(img_tree.gif); }

设置透明:

filter: alpha(opacity=70);

opacity: 0.7;

设置文字与文字之间的间隙

letter-spacing: 5px;

设置单词与单词之间的间隙

word-spacing:5px ;

设置去掉button按钮在ios上的默认样式

-webkit-appearance: none;

可以使用 transition-duration 属性来设置 "hover" 效果的速度:

transition-duration: 0.1s;

鼠标放上去变为小手:

cursor:pointer;

把点击button按钮时显示的阴影去掉

-webkit-tap-highlight-color:rgba(255,255,255,0);

禁止textarea缩放

resize:none;

select标签属性:

1 multiple 设置多选选择框

2 size 设置多选选择框显示的行数

3 options获取所有的option元素

4 selectedIndex 获取选中项的索引

5 selected 设置选中项

HTML <textarea> 标签的 wrap 属性

wrap 属性

通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。

如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。

wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。

wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

如果把 wrap 设置为 off，将得到默认的动作。

适应手机端：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

做手机端页面body必须设置

不允许用户执行选中的操作

-webkit-user-select: none;

旋转屏幕的时候禁止调整文字大小

-webkit-text-size-adjust: none;

-webkit-tap-highlight-color:rgba(0,0,0,0);

 

用来跳转到指定页面或者是获取当前页面的地址

location.href;

设置或者是获取锚点链接(以#开头)

location.hash;

给当前地址栏设置参数或者是获取当前地址栏的参数(以?号开头)

location.search;

html5

弹性盒:（谷歌）

display: -webkit-box;

-webkit-box-orient: vertical;垂直

display: -webkit-box;

-webkit-box-orient: horizontal;水平（默认）

-webkit-box-flex: 1;自动占满剩余的空间

overflow: scroll;加滚动条

弹性盒水平垂直都居中

-webkit-box-pack:center;

-webkit-box-align:center;

 

iscroll4默认情况下阻止浏览器的默认行为,在iscroll滚动的区域a标签input标签等会失效,需要我们重写方法来判断一下

iscroll5已经修正了浏览器的的默认行为,如果不是a标签input标签等它才会阻止浏览器的默认行为

 

flex-direction 顺序指定了弹性子元素在父容器中的位置。

flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

 

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

flex-start：

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：

弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

 

在css文件中引入公共样式:

@import url（"reset.css"）；

 

调整背景图大小：

background-size：宽 高

自动换算padding和margin值:

-webkit-box-sizing: border-box;

调整背景图片位置

background-position: 左右 上下;

 

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

 

文字超出隐藏并显示省略号

overflow: hidden; /*自动隐藏文字*/

text-overflow: ellipsis;/*文字隐藏后添加省略号*/

white-space: nowrap;/*强制不换行*/

width: 20rem;/*不允许出现半汉字截断*/

 

滚动条进行隐藏:

overflow-y:auto;

&::-webkit-scrollbar{

width:0px;

}

 

 

 

placeholder是css3中表单元素input的一个占位符，适用于高级浏览器或者手机端的输入框的默认提示内容，通过下面几行代码就可以设置一个兼容的placeholder文字颜色。

修改所有的input

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/* Firefox 18- */
  color: red;
}
::-moz-placeholder{/* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder {
  color: red;
}

修改某个标签

#myInput::-webkit-input-placeholder {
  color: red;
}
#myInput:-moz-placeholder {
  color: red;
}
#myInput:-ms-input-placeholder {
  color: red;
}

css旋转动画:

@-webkit-keyframes mycss{

0%{

background: #b7d2ff;

-webkit-transform:rotate(0deg)

}

25%{

background: blue;

-webkit-transform:rotate(72deg)

}

}

@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。

webkit表示这个动画效果只适用于webkit内核的浏览器，labelON就是这个动画里面关键帧的名字。

 

transform:rotate(45deg)（旋转45度，deg是degree的缩写，意为角度；当然这只是一个单位，还有别的单位，但不常用；你也可以直接采用数字而不用单位，这个数字会被自动转换为角度）

 

参考网址：http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html