html5，css3前端开发相关内容整理

文章时效性提示

这是一篇发布于 2931天前 的文章部分信息可能已经过时，请甄别后使用。

web、webapp前端开发过程中遇到的问题的常用处理方式整理和一些问题整理。

常见问题处理方式

单行文字垂直居中

html结构

1
<div class="row">单行文字垂直居中，单行文字垂直居中，单行文字垂直居中</div>
HTML

css样式

1
2
3
4
5
6
7
.row {
	display: block;
	height: 100px;
	line-height: 100px;
	width: 600px;
	background-color: #d5effc;
}
CSS

多行文字垂直居中

html结构

1
2
3
4
5

<div class="wrap">
	<div id="content">多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中</div>
</div>

APPLESCRIPT

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14

	
.wrap {
	display: table;
	width: 600px;
	height: 150px;
	background-color: #f780a4;
}
			    
#content {
	display: table-cell;
	vertical-align: middle;/**垂直居中**/
}

CSS

单行文本溢出

html结构

1
2
3

<div class='text-overflow'> 单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出 </div>

HTML

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- css -->

.text-overflow {
	width: 200px;/**设置显示的长度**/
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-overflow: ellipsis;
 	/* IE/Safari */
	-ms-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	/* Opera */
	-moz-binding: url("ellipsis.xml#ellipsis");
	/*FireFox*/
	background-color: #f4cd89;
}
CSS

文本内容自动换行

1
2
3
4
word-break{
	word-wrap: break-word; 
	word-break: normal; 
}
ARDUINO

多行文本溢出

html结构

1
2
<div class='more-text-overflow'>webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出
</div>		
HTML

css结构

1
2
3
4
5
6
7
8
9
.more-text-overflow {
	width: 600px;
	display: -webkit-box;
	-webkit-line-clamp: 3;/*显示的行数,多余的行数将被隐藏*/
	-webkit-box-orient: vertical;
	overflow: hidden;
	background-color: #dcf791;
}

CSS

表格细边框设置

1
2
3
4
5
6

table,table th,table td{
	border:1px solid #999;
	border-collapse: collapse;
}

CSS

hr细边框

1
2
3
hr{
	height: 1px; background:#ccc; border:0;
}
CSS

禁止长按链接与图片弹出菜单

1
2
3
a, img {
	-webkit-touch-callout: none; 
}
CSS

清除手机点击页面标签时候出现高亮

1
2
3
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
CSS

改变选中的内容的样式

1
2
3
4
5
6
7
8
::selection{
	color:#ff0000;
}

::-moz-selection{
	color:#ff0000;
}

CSS

禁止用户选中文本内容

1
2
3
4
5
6
.content {
	-webkit-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
}
CSS

高分辨率屏幕下1px处理方式

全部细边框

html结构

1
2
3
4
<body>
	<div class="box retina-border rt-bd-all"></div>
</body>

HTML

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.box {
	width: 200px;
	heigth: 100px;
	box-sizing: border-box;
	border: 1px solid #aaa;
}

/* 去掉元素原有的边框 */
.retina-border {
	position: relative;
	border: none;
}

/* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/
.retina-border:after {
	content: '';
	display: block;
	width: 200%;
	height: 200%;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	border: 0px solid #aaa;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.rt-bd-all:after {border-width: 1px;
}
CSS

** 部分变细边框**

html结构

1
2
3
4

<body>
	<div class="box retina-border rt-bd-b"></div>
</body>
HTML

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.tr-bd-b:after {
	border-bottom-width: 1px;
}

.tr-bd-t:after {
	border-top-width: 1px;
}

.tr-bd-l:after {
	border-left-width: 1px;
}

.tr-bd-r:after {
	border-right-width: 1px;
}
CSS

垂直居中

html结构

1
2
3
4
5
<div class="wrap">
	<div class="box"></div>
</div>


APPLESCRIPT

** 模仿单行文字居中的方式**

1
2
3
4
5
6
7
8
9
10
.wrap {
	width: 200px;
	height: 80px;
	line-height: 80px;
}

.box {
	display: inline-block;
	vertical-align:middle;
}
CSS

** 已知宽高，通过position:absolute;**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap {
	width: 200px;
	height: 200px;
	position: relative;
}

.box {
	width: 100px;
	height: 80px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -50px 0 0 -40px;
}
CSS

未知宽高，通过css3属性 transfrom

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap {
	width: 200px;
	height: 200px;
	position: relative;
}

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
CSS

** 通过flex布局**

html结构

1
2
3
<div class="wrap flexbox flexbox-center flexbox-middle">
	<div class="box"></div>
</div>
HTML

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.flexbox {
	display: -webkit-box; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: -webkit-flex;
	display: flex;
}

/* 水平居中 */
.flexbox-center {
	-webkit-box-pack: center; 
	-moz-box-pack: center; 
	-ms-flex-pack: center; 
	-webkit-justify-content: center;
	justify-content: center;
}

/* 垂直居中 */
.flexbox-middle {
	-webkit-box-align: center; 
	-moz-box-align: center;
	-ms-flex-align: center; 
	-webkit-align-items: center;
	align-items: center;
}

CSS

safari浏览器下div中的滚动卡顿不流畅解决方法

div样式表中添加如下属性

1
2
3
4
div {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
CSS

或者使用

iscroll.js

让元素能看见但是不能点击

1
2
3
div{
   pointer-events: none;  // div能看见但是不能点击
}
CSS

开发常见问题整理

ios(9.3.1)不支持css3属性calc嵌套使用，例如

width:calc( calc( 100% - 90px ) / 2);

ios 设备用jquery live绑定 click 事件不管用

动态拼接的html追加到页面，使用 live 绑定click事件不起作用的解决办法

**解决方法1：**直接在标签写onclick事件
**解决方法2（推荐）：**给需要绑定的标签添加css样式｛cursor:pointer｝，让它认为你是一个可以点击的标签。

低版本手机不支持模板字符串

一些低版本的android手机不支持es6的模板字符串，如果js中存在模板字符串，js直接不会被加载解析。

微信浏览器页面禁止下拉显示网址信息

禁止下拉显示网址信息

常见布局方式

flex等间布局

查看效果

前端开发
#tips
html5，css3前端开发相关内容整理
https://think.geekfanfan.com/2016/01/11/mobile-remark/
作者
梦想.家
发布于
2016年1月11日
许可协议