html5,css3前端开发相关内容整理(持续更新)

作者 梦想.家 日期 2016-01-11 字数 1.7k
html5,css3前端开发相关内容整理(持续更新)

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

常见问题处理方式

单行文字垂直居中

html结构

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

css样式

.row {
    display: block;
    height: 100px;
    line-height: 100px;
    width: 600px;
    background-color: #d5effc;
}

多行文字垂直居中

html结构


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

css样式



.wrap {
    display: table;
    width: 600px;
    height: 150px;
    background-color: #f780a4;
}

#content {
    display: table-cell;
    vertical-align: middle;/**垂直居中**/
}

单行文本溢出

html结构


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

css样式

<!-- 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;
}

文本内容自动换行

word-break{
    word-wrap: break-word; 
    word-break: normal; 
}

多行文本溢出

html结构

<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>        

css结构

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

表格细边框设置


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

hr细边框

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

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

a, img {
    -webkit-touch-callout: none; 
}

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

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

改变选中的内容的样式

::selection{
    color:#ff0000;
}

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

禁止用户选中文本内容

.content {
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

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

全部细边框

html结构

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

css样式


.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;
}

部分变细边框

html结构


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

css样式


.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;
}

垂直居中

html结构

<div class="wrap">
    <div class="box"></div>
</div>


模仿单行文字居中的方式

.wrap {
    width: 200px;
    height: 80px;
    line-height: 80px;
}

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

已知宽高,通过position:absolute;

.wrap {
    width: 200px;
    height: 200px;
    position: relative;
}

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

未知宽高,通过css3属性 transfrom

.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%);
}

通过flex布局

html结构

<div class="wrap flexbox flexbox-center flexbox-middle">
    <div class="box"></div>
</div>

css样式


.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;
}

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

div样式表中添加如下属性

div {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

或者使用

iscroll.js

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

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

开发常见问题整理

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等间布局

查看效果



本文完

本文如有误,请不吝赐教!

原文标题:html5,css3前端开发相关内容整理(持续更新)

原文链接:https://www.wuhuan.me/2016/01/11/mobile-remark/

版权声明:保留署名-非商业性使用-禁止演绎 4.0 国际 | Creative Commons BY-NC-ND 4.0