XiongJingzhi/CSS 中form表单两端对齐

## CSS 中form表单两端对齐
td {
  text-align:justify;
  text-justify:distribute-all-lines;/*ie6-8*/
  text-align-last:justify;/* ie9*/
  -moz-text-align-last:justify;/*ff*/
  -webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
td:after {
  content:".";
  display: inline-block;
  width:100%;
  overflow:hidden;
  height:0;
}

<body>
<table border="1" cellspacing="1" cellpadding="10">
  <tr>
    <td>姓名：</td>
  </tr>
  <tr>
    <td>工作单位：</td>
  </tr>
  <tr>
    <td>操作：</td>
  </tr>
  <tr>
    <td>所在地：</td>
  </tr>
</table>

## CSS强制换行和不换行
/* 自动换行 */
div{
  word-wrap: break-word;
  word-break: normal;
}
/* 强制英文单词断行 */

div{
  word-break:break-all;
}
/* 强制不换行 */

div{
  white-space:nowrap;
}


## DIV可编辑
在div中添加contentEditable="true" 属性就可以了，如下：

<div id="div1" contentEditable="true" ></div>

<div id="div2" contentEditable="true" ></div>

## div禁止选择
<div unselectable="on" onselectstart="return false;">
你想复制我？门儿都没有！！！
</div>

## img图片
    border-radius: 4px;
    /* width: 100%; */
    height: 444px;
    -o-object-fit: cover;
    object-fit: cover;

## input声音录入按钮（仅支持谷歌）
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>\

## textarea禁止拖动
resize: none; //禁止拖动
/*
以下是resize属性的的各个取值：
none：用户不能操纵机制调节元素的尺寸；
both：用户可以调节元素的宽度和高度；
horizontal：用户可以调节元素的宽度；
vertical：让用户可以调节元素的高度；
inherit：默认继承。
*/

## 溢出打点
.ell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

单行文本显示...
span{
width:200px;
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

多行文本显示.... （主要属性-webkit-line-clamp）
p {
  width: 200px;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；
p {
  position:relative;
  line-height:1.4em;
  /* 3 times the line-height to show 3 lines */
  height:4.2em;
  overflow:hidden;
}
p::after {
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding:0 20px 1px 45px;
  // background:url(和网页背景颜色一样的一张背景图) repeat-y;
  background-color:#fff;
}
/*
注意：
height高度正好是line-height的3倍；
结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
要支持IE8，需要将::after替换成:after；
*/

## 给input的placeholder设置颜色
::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
}

## 网站变成了灰色
html {
  filter: grayscale(100%);//IE浏览器
  -webkit-filter: grayscale(100%);//谷歌浏览器
  -moz-filter: grayscale(100%);//火狐
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);//谷歌浏览器
}

注：有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

## 设置多张背景图片及background-image属性
div {
  background:url("1.jpg") 0 0 no-repeat,
  url("2.jpg") 200px 0 no-repeat,
  url("3.jpg") 400px 201px no-repeat;
}
/* 也可以这么写 */
div {
  background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 200px 0, 400px 201px;
}

## 选中状态修改
::selection {
  background: yellowgreen;
  color: red;
}

## 透明度
div{
  opacity: .9;
  filter:alpha(opacity=90);
}
/* IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter； */
.div{
  opacity: 0;
  cursor:pointer;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}


## 阴影效果
/* 盒子阴影 */
box-shadow: 2px 2px 10px 4px #333333;
/* 文子阴影 */
text-shadow: 1px 1px 0px #fff;
	td {
	text-align:justify;
	text-justify:distribute-all-lines;/ie6-8/
	text-align-last:justify;/* ie9*/
	-moz-text-align-last:justify;/ff/
	-webkit-text-align-last:justify;/chrome 20+/
	}
	@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
	td:after {
	content:".";
	display: inline-block;
	width:100%;
	overflow:hidden;
	height:0;
	}

	<body>
	<table border="1" cellspacing="1" cellpadding="10">
	<tr>
	<td>姓名：</td>
	</tr>
	<tr>
	<td>工作单位：</td>
	</tr>
	<tr>
	<td>操作：</td>
	</tr>
	<tr>
	<td>所在地：</td>
	</tr>
	</table>
	/* 自动换行 */
	div{
	word-wrap: break-word;
	word-break: normal;
	}
	/* 强制英文单词断行 */

	div{
	word-break:break-all;
	}
	/* 强制不换行 */

	div{
	white-space:nowrap;
	}
	在div中添加contentEditable="true" 属性就可以了，如下：

	<div id="div1" contentEditable="true" ></div>

	<div id="div2" contentEditable="true" ></div>
	<div unselectable="on" onselectstart="return false;">
	你想复制我？门儿都没有！！！
	</div>
	border-radius: 4px;
	/* width: 100%; */
	height: 444px;
	-o-object-fit: cover;
	object-fit: cover;
	resize: none; //禁止拖动
	/*
	以下是resize属性的的各个取值：
	none：用户不能操纵机制调节元素的尺寸；
	both：用户可以调节元素的宽度和高度；
	horizontal：用户可以调节元素的宽度；
	vertical：让用户可以调节元素的高度；
	inherit：默认继承。
	*/
	.ell {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	单行文本显示...
	span{
	width:200px;
	display:block;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	}

	多行文本显示.... （主要属性-webkit-line-clamp）
	p {
	width: 200px;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	}

	这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
	跨浏览器兼容的方案
	比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；
	p {
	position:relative;
	line-height:1.4em;
	/* 3 times the line-height to show 3 lines */
	height:4.2em;
	overflow:hidden;
	}
	p::after {
	content:"...";
	font-weight:bold;
	position:absolute;
	bottom:0;
	right:0;
	padding:0 20px 1px 45px;
	// background:url(和网页背景颜色一样的一张背景图) repeat-y;
	background-color:#fff;
	}
	/*
	注意：
	height高度正好是line-height的3倍；
	结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
	IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
	要支持IE8，需要将::after替换成:after；
	*/
	::-webkit-input-placeholder { /* WebKit browsers */
	color: #999;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #999;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #999;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #999;
	}
	html {
	filter: grayscale(100%);//IE浏览器
	-webkit-filter: grayscale(100%);//谷歌浏览器
	-moz-filter: grayscale(100%);//火狐
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(1);//谷歌浏览器
	}

	注：有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：

	<param value="false" name="menu"/>
	<param value="opaque" name="wmode"/>
	div {
	background:url("1.jpg") 0 0 no-repeat,
	url("2.jpg") 200px 0 no-repeat,
	url("3.jpg") 400px 201px no-repeat;
	}
	/* 也可以这么写 */
	div {
	background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: 0 0, 200px 0, 400px 201px;
	}