由于placeholder是h5新特性之一，目前还有兼容性问题，所以这样写以兼容各浏览器。
针对不同浏览器或不同版本的浏览器会有不同的写法，会添加相应的前缀。
注意：
1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀，且是双冒号，写的时候还要带上input
2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（：），而高版本的使用双冒号（：：）；要点2：火狐浏览器不需要像webkit内核那样要带上input。
3、由于placeholder属性只在IE10+才支持，因此，针对IE10、IE11的写法是加上-ms-前缀，使用的是冒号（：），需要带上input
特别强调：冒号与双冒号的问题，还有是否需要加上input
作者：江峰★ 出处：http://www.cnblogs.com/jf-67/
打开CSDN，阅读体验更佳
css兼容性写法大全_前端独秀的博客
css兼容性写法大全 淘宝初始化代码 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 {margin:0padding:0}...
继续访问
css 兼容性写法,CSS hack写法_weixin_34112208的博客
一、CSS hack写法 书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。 color:red//所有浏览器 color:blue\9//所有IE +color:orange//IE7 _color:green//IE6 eg1. 若浏览器为FireFox,那么color:red若浏览器为IE8,...
继续访问
各浏览器css兼容写法
各浏览器css兼容写法各浏览器css兼容写法
如何解决placeholder的兼容性
placeholder在不支持html5的低版本的浏览器中，placeholder属性是无效的，例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理 在页面添加如下脚本 $(function() { // 如果不支持placeholder，用jQuery来完成 if(!isSupportPlaceholder()) { // 遍历所有in
继续访问
CSS浏览器前缀兼容写法_梦凝哲雪的博客_css兼容前缀
CSS浏览器前缀兼容写法 Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。 该图来自简书沈龙 浏览器引擎前缀(Vendor Prefix)有哪些?
继续访问
CSS 各浏览器兼容写法(CSS HACK)_caspar笔记的博客
CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不...
继续访问
html+placeholder+兼容问题,placeholder属性做兼容性处理
placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点(或输入内容)时，提示文字消失。但是在不支持html5的低版本的浏览器中，placeholder属性是无效的，例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理效果：http://hovertree.com/t...
继续访问
css兼容写法
css3 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4)/*兼容ie*/ -moz-box-shadow: 2px 2px 10px #909090/*兼容firefox*/ -webkit-box-shadow: 2p...
继续访问
css 兼容解决方案,css兼容性处理方案
css兼容性处理方案首先是对于兼容性的理解。不同浏览器之间的兼容+同一浏览器，不同版本之间的兼容。解决方案主要有以下四种：1 浏览器CSS样式初始化对padding和margin，以及line-height等在全局初始化，统一不同浏览器之间的差异。举例：* {margin: 0padding: 0}html {line-height: 1.15-webkit-text-size-adjust...
继续访问
三分钟速记CSS兼容写法
CSS兼容浏览器的写法 主要是坑爹的IE浏览器，身为前端开发在写PC端项目的时候，需要在CSS样式上进行最基本最简单的样式适配的方法，这些也是必要掌握的。 文章目录CSS兼容浏览器的写法前言一、兼容不同浏览器1、针对不同内核基本的浏览器的兼容写法二、CSS Hack总结 前言 本篇文章主要总结了简单的及常用的CSS样式的兼容写法。 一、兼容不同浏览器 1、针对不同内核基本的浏览器的兼容写法 -webkit-：safari、chrome -moz- ：firefox -ms- ：ie -o-
继续访问
浏览器不能切html样式,css不同浏览器兼容性问题怎么解决？
浏览器的兼容性问题是Web前端开发人员经常会碰到的和必须要解决的问题。那么css不同浏览器兼容性问题怎么解决？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。css不同浏览器兼容性问题的解决方案1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防...
继续访问
各浏览器兼容css写法
/* 针对Chrome谷歌浏览器内核支持的CSS样式 */ @media screen and (-webkit-min-device-pixel-ratio:0) { 样式 /* 例如 .font1 {color:red} / } 针对Firefox浏览器的内核CSS写法： @-moz-document url-prefix(){ 样式 / 例如 .font1 {color:red} / } ...
继续访问
css的兼容性写法
各浏览器兼容性css写法/* 针对Chrome谷歌浏览器内核支持的CSS样式 */@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 /* 例如 .font1 {color:red} */}针对Firefox浏览器的内核CSS写法：@-moz-document url-prefix(){ 样式 /* 例如 .f
继续访问
最新发布 浏览器兼容css_CSS 样式浏览器前缀兼容性写法、生效写法
浏览器兼容css_CSS 样式浏览器前缀兼容性写法、生效写法
继续访问
CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体
font-family的调用方法： font-family:Arial,'Times New Roman','Microsoft YaHei',SimHeifont:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei根据font-family的原则，假如客户终端不认识前面的字体，就自动切换到第...
继续访问
ie浏览器样式兼容写法_常见的CSS样式兼容性写法
1. 设置透明度在IE6中使用 filter: alpha(opacity = 40)在其他浏览器中使用 opacity: 0.42. 设置行高/*\9表示兼容所有的IE浏览器*/line-height: 35px\93. 清除浮动.clearfix:after {content: ''height: 0clear: bothoverflow: hiddenvisibility: h...
继续访问
CSS兼容写法整理
css3(含ie9以下) 1.box-shadow： filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4)/*兼容ie*/ -moz-box-shadow: 2px 2px 10px #909090/*兼容firefox*/ -webkit-box-shado
继续访问
placeholder的简单使用
placeholder就是用户名密码框未输入内容时,默认显示的灰色文字。 如下图效果： <!DOCTYPE html><html><head><meta charset="utf-8"><title>placeholder效果演示(runoob.com)</title></head>&l...
继续访问
css兼容性写法大全
淘宝初始化代码 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{margin:0padding:0} body,button,input,sel...
继续访问
热门推荐 css ie6,ie7,ie8 兼容性写法,CSS hack写法
margin-bottom:40px /*ff的属性*/ margin-bottom:140px\9 /* IE6/7/8的属性 */ color:red\0 /* IE8支持 */ *margin-bottom:450px/*IE6/7的属性*/ +margin-bottom:450px_color:#ff0000
继续访问
浏览器兼容的css写法
1. IE6、IE7、IE8兼容写法 _color: #ccc /* _只ie6支持 */ *color: #ccc/* *ie6/7支持 */*+color: #ccc/* *+ie7支持 */ color: #ccc\0 /* \0 IE8支持 */ color: #ccc\9/* \9 IE
继续访问
css 兼容 ie
首先，我在把 ie 浏览器更新到 11 后，在 f12 调试工具中发现一片空白，解决方法如下： 安装补丁： 64位的系统应该使用下面这个补丁：http://www.microsoft.com/en-us/download/details.aspx?id=45154 32位的系统应该使用下面这个补丁：http://www.microsoft.com/zh-CN/download/details.as...
继续访问
css中属性兼容性写法,CSS3兼容属性和标准属性的书写顺序
一、不同书写顺序示例首先个人推荐的正确写法：//标准属性放在兼容属性之后-webkit-border-radius: 10px 30pxborder-radius:10px 30px容易产生问题的错误写法：//标准属性放在兼容属性之前border-radius:10px 30px-webkit-border-radius: 10px 30px二、实例说明1.实例实例1.1(正确写法)：Do...
继续访问
几种css属性兼容性写法
css属性兼容性写法，兼容低版本主流浏览器
继续访问
css兼容写法
关于css常见问题，大多是移动端的。
简单的排版规则：条目与条目之间空两行，每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。
条目编号后面紧跟英文字母的，要空一格，比如 4. css，“4.”和“css”之间有一个空格。
一、在做手机轮播图时，banner图的宽度是手机屏幕的宽度，轮播图加了左右切换按钮，按钮的position:absolute；定位的元素，定位的元素超出父容器时（超出了100%），会出现滚动条。
二、在移动端有3种布局可选。
1.定位布局
说明：头部、尾部是fixed定位。中间内容部分绝对定位，overflow-y:auto；
2. flex布局（朕极力推荐）
说明：这里写的简洁，没有写很多兼容，移动端兼容性比较好，安卓5.1以上都可以用。用的是较新的flex声明。（这个布局是抄袭手淘团队的。）
3.普通的流式布局
说明：头部和尾部依然是fixed定位，但是#content内容部分则是用padding-top和padding-bottom来支撑页面，这种布局相当垃圾，会带来各种页面上下莫名其妙的留白问题。
三、css属性
1. word-wrap:break-word； word-break:break-all；让一行连续的数字或英文字母遇到边界自动换行。
2. -webkit-user-select:none | normal | text；这个属性是禁止用户选择、复制文字，同时还会使input框、select框不能获取焦点，导致无法输入或选择。 所以在使用这个属性时，注意防止对input和select的污染。
3. css3属性选择器。li[class*='act']，可以选中所有class中有‘act’的li元素。
$('li').attr('class').indexOf('act')只是获取第一个li的class，然后判断是否有‘act’
通过for循环可以进一步 *** 作，
for(var i = 0i <$("li[class*='act']").lengthi++){
$("li[class*='act']")[i] . . .
}
4.清除浮动，解决高度塌陷
a.伪类(抄袭bootstrap的做法)
.clearfix{}
.clearfix:after{ display:tablecontent:' 'clear:both}
b.王妮的做法
.box{ clear:bothoverflow:hidden}
c.对于子元素写margin-top把父级拖下来的情况
（百度说是W3C的标准，只要破坏了父级子级紧贴的结构就可以了）
给父级写border-top，或者给父级写padding-top。采用b方法也可以，a方法无效。
5. css高度单位和颜色单位
height:calc（100vh - 200px）目前来看，兼容性还不错。注意，减号两边是有空格的。
background:rgba（255，255，255，0.5）rgb颜色值 和 颜色透明度。
6.关于 padding-top:100%padding-left:100%
可以利用这两个属性做绝对正方形。比如微信朋友圈的照片9宫格，qq空间的照片9宫格，sina微博的照片9宫格。屏幕宽度未知，一行排3个，每个宽度都是33.33333%，但是高度不能写百分比了。在每个宽度为33.3333%的元素里再写一个div，这个div的默认宽度就是父级的33.33333%，再用padding-top:100%把高度撑开，padding-top:%就是根据已有宽度计算，padding-top:100%padding-top的px值就和宽度相同，这样，正方形就做出来了，在正方形里面position:absolute一个div，width:100%height:100%然后在这个div里面布局就好。
每个正方形的间距可以用qq空间的2px的透明边框来做，也可以像sina微博一样，用左右padding和margin-bottom来做。一张图和四张图的时候，sina是另外写两个class来做的。
qq空间是js插件写进去的，最大宽度是290px，高度是根据最大宽度计算出来的。
7. 0.5px的线
a.发现qq空间的细线，兼容2倍屏和3倍屏
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.5)
-moz-transform: scaleY(.5)
-ms-transform: scaleY(.5)
-o-transform: scaleY(.5)
transform: scaleY(.5)
}
.action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {
-webkit-transform-origin: 100% 0
-moz-transform-origin: 100% 0
-ms-transform-origin: 100% 0
-o-transform-origin: 100% 0
transform-origin: 100% 0
}
.action.flex:after,.action.flex>.btn:after,.feed .source:after {
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
}
}
@media only screen and (-webkit-device-pixel-ratio: 1.5) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.6666)
-moz-transform: scaleY(.6666)
-ms-transform: scaleY(.6666)
-o-transform: scaleY(.6666)
transform: scaleY(.6666)
}
}
@media only screen and (-webkit-device-pixel-ratio: 3) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.33)
-moz-transform: scaleY(.33)
-ms-transform: scaleY(.33)
-o-transform: scaleY(.33)
transform: scaleY(.33)
}
}
b. weui的作法是
.weui-cells:after {
content: " "
position: absolute
left: 0
bottom: 0
right: 0
height: 1px
border-bottom: 1px solid #e5e5e5
color: #e5e5e5
-webkit-transform-origin: 0 100%
transform-origin: 0 100%
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
z-index: 2
}
8.背景图片尺寸background-size，img标签object-fit，object-position。
background-size:contain | cover | auto 90% | 50% auto
这是以背景图的方式展示图片的，如果用img元素的话，
object-fit:fill | contain | cover | none | scale-down（和background-size效果类似）
object-position:center和background-position的取值一样。
这两个属性一起用的话，就能让img元素src的图片效果像背景图片的效果一样，不会因为图片尺寸不成比例而走形。但是兼容性不太好，目前只适合在移动端用。
9.阻止手机d出默认菜单，长按img标签或者长按a标签会d出系统默认菜单（ios上，安卓上没测）。
-webkit-touch-callout:none
10.给文字写行高时，让文字垂直居中时，要把高度也一起写了，line-height:35pxheight:35px
在用appcan做hybrid app时，发现在华为meta8上，用 ul li 做九宫格，li 浮动排在一行时，每个 li 有文字，高度用li的行高撑开的，没有文字的 li 和有文字的 li 的高度是不一样的。有的格子有文字有的没有文字，导致九个格子没有排在3行，有格子掉下去了，排成了4行。所以，在用行高让文字居中时，高度和行高要都写上。
11. text-align:justify
p标签内大段文字时，除了最后一行，其余的文字都是左对齐，导致段落文字距离右边间距明显大于左边。
可以利用这个属性不处理最后一行的特性，做这种布局：
上面这个布局有一点bug，最后一行是留白，把父级撑高了，原因是父级认为所有子代，包括空文本节点都是占据空间的，哪怕空格，也占据空间。可以给父级 ul 写 font-size:0；就能把底部留白去除了，然后给子代再写font-size:14px就可以了。 但是，text-align:justify毕竟是处理空格（拉伸空格来使内部元素水平分散），所以在html中，li 要是连着写和分段写，表现结果是不一样的，所以这种奇妙的布局还是有些许不完美，甚至不能用。
12.去除-webkit-的滚动条
#content::-webkit-scrollbar{ display：none}
设置滚动条样式
/*滚动条宽度*/
#content::-webkit-scrollbar{ width:5px}
/*滚动条滑块*/
#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25)border-radius:3px}
/*滚动条的整个背景*/
#content::-webkit-scrollbar-track-piece{ background:#eee}
TGuide
/* scrollbar */
::-webkit-scrollbar{width:10pxheight:10px}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-track{background-color:black}
::-webkit-scrollbar-track-piece{background:#FFF}
::-webkit-scrollbar-thumb{background-color:#8E8E8Eborder-radius:5px}
::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner{background-color:#535353}
/*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/
前面不加选择器表示，所有出现滚动条的元素。
13.设置placeholder的样式
input::-webkit-input-placeholder{ color:#999}
input::-moz-input-placeholder{ color:#999}
input:-ms-input-placeholder{ color:#999}
注意 -ms- 前面是一个 “ ：”。
14.移动端点击某一行 :active 时添加背景色，比如 li:active{ background:#eee} 时，要给 body标签上写ontouchstart，否则没有效果。
另一方面，给body添加，可以阻止图片被默认拖拽。百度的logo就可以被拖拽。
15.pageshow（）和pagehide（）方法。
问题描述：A页面跳转到B页面，在B页面 *** 作后，返回到A页面，A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面，微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如，修改姓名，修改性别。从A页面点击input跳转到B页面进行修改 *** 作，修改完成之后返回A页面，发现信息没有刷新，此时需要主动触发。
解决方法：可以监听pageshow方法，用addEventListener方法进行监听。pageshow（）方法的触发条件是，只要页面被显示就触发，比如appcan里的B页面覆盖在A页面，把B页面关闭，A页面自然就展现出来了，那么A页面的pageshow方法就会触发；微信里，点击返回，虽然是从缓存里取页面，但也会触发pageshow方法。pagehide（）顾名思义。
16.关于position。
华为meta7，安卓版本4.4.2，position:relative的元素比position:absolute的元素层级要高。百度新闻的导航效果，也是利用了这个。很奇怪。
这种结构，i.line是absolute，每个div都是relative，安卓4.4.2上 i.line 会被父级的兄弟div遮挡住。
解决办法是，把 i.line 拿出来，和div同级。
17. background:url() no-repeat center, url() no-repeat center可以一次性放两个图片，中间用逗号隔开。
18.关于移动端软键盘d起，盖住页面的问题。
核心解决办法是利用 document.activeElement.scrollIntoView(false)参数false，表示activeElement的元素与页面下边对齐，true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。
另一个方法与之类似 document.activeElement.scrollIntoViewIfNeeded()这个方法效果不是很好，没有上面那个好用。
19.常见于小说、报纸排版的column布局。
常用的5个属性有4个是知晓效果的：
column-width:每列的宽度。
column-gap:列与列之间的间距。
column-fill:不知有何软用。
column-rule:列与列直接的分割线，与border属性效果一样。
column-count:总共分多少列。（这个属性受column-width限制，当同时写上column-width和column-count时，以column-width优先，比如总宽度800px，height:200pxcolumn-width:400pxcolumn-count:4显然，800px最多只能分2列，所以优先以column-width进行计算。）
小兼容：ios上，横向滚动 overflow-x:auto的容器不适合直接当成分栏布局的容器，应该在 overflow-x 的元素内嵌套一个div当做分栏布局的容器。否则会出现，分栏线，column-rule不跟随容器滚动的奇异现象。另外，column-gap不适合赋值，应当将column-gap写成0，列与列之间的间距可以用分栏布局的子元素的左右padding来做。
大段文字
.box{ width:300pxheight:14emoverflow-x:auto} /*滚动的容器*/
.col{ height:11.9emtext-align:justifycolumn-count:2column-gap:0} /*分栏的容器*/
.col >p{ padding:0 .5emline-height:1.2} /*文字内容的容器，加左右padding以增加列与列之间的间距。*/
四、貌似很多webapp都会写两个meta标签
不确定是否支持16进制的颜色值。（好像测试过，16进制颜色没有效果。在appcan里也没有效果。）
五、 一般不能上传相同图片
可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset()重置后就可以了。
六、在安卓上touchmove出现了神奇的bug，百度上说，安卓上touchmove的一瞬间就会触发touchcancel，touch事件就全部被取消了。IOS上是没有这个问题的。
解决方法是：在touchmove里写e.preventDefault()即可。但是这样的话，手指滑动页面就不能scroll了。页面将无法滚动了。
七、flex布局
1. 2012年以后的版本
给父级添加 display:-webkit-flexdisplay:flex
flex盒子内子元素的排列方向称作主轴，与主轴垂直的称作交叉轴。
flex盒子内的子元素可以被作项目。
注意：设为flex后，其子元素的float、clear、vertical-align属性就会失效。
a.作用于父级的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。
//子元素的排列方向
flex-direction:row（默认值，从左到右） | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上）
//子元素是否换行
flex-wrap:nowrap（默认值，不换行） | wrap（换行） | wrap-reverse（换行，但第一行在下方）
//子元素排列方向和子元素是否换行的简写
flex-flow:row nowrap（默认值，从左到右，不换行。）
//项目（子元素）在主轴上的对齐方式
justify-content:flex-start（默认值，以起点为始） | flex-end（以终点为始） | center（居中） | space-between（首尾两个元素紧贴边界，其余元素之间间隔相等） | space-around（每个项目的两侧间隔相等，相当于给每个项目加了margin，并且左右margin相等。所以首尾元素与边界都是有间距的。）
//项目（子元素）在交叉轴上的对齐方式
align-items:flex-start（以起点为始） | flex-end（以终点为始） | center（居中） | baseline（与项目的第一行文字的基线对齐） | stretch（默认值，在交叉轴方向撑满父级）
//多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。
align-content:flex-start（与交叉轴的起点对齐） | flex-end（与交叉轴的终点对齐） | center（与交叉轴的中点对齐） | space-between（与交叉轴两端对齐，轴线之间的间隔平均分布） | space-around（每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍，第一行和最后一行不会紧贴边框） | stretch（默认值，铺满整个交叉轴）
（ align-content：stretch第一根轴线与边框对齐，其他轴线均分父级间隙。 ）
b.作用于项目（子元素）的6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
//子元素的排列顺序
order:0（默认值） | 1 | 2 | 3 . . .
//项目（子元素）的放大比例
flex-grow:0（默认值，默认不放大，尽管有剩余空间） | 1 | 2 | 3 . . .
//项目的缩小比例
flex-shrink:1（默认值，当空间不足时，该项目将缩小） | 0（不论如何，都不缩小）
//项目占据的主轴空间
flex-basis:auto（默认值，项目本来的大小） | 固定值（200px，50%，100% . . .）
//flex-grow，flex-shrink，flex-basis的简写 flex ：0 1 auto；
flex:0 1 auto（默认值，有多余空间也不放大，但空间不足会缩小，默认占据空间就是自身大小）
flex:auto=>flex：1 1 auto根据空间大小，可放大可缩小。（有兼容性问题，chrome可以正常解析 flex：auto-- flex：1 1 auto但 IE 就搞笑了，IE10解析出来的flex：auto -- flex：1 0 auto；只放大，不缩小。IE11解析出来的flex：auto；和chrome一样，可放大可缩小。所以在用这个属性的时候，要写完整值，不要简写。）
flex:none； -- flex：0 0 auto；不放大，也不缩小。
//单个项目与其他项目不一样的对齐方式，会覆盖父级的align-items
align-self:auto（默认值， 继承父级的align-items的值） | flex-start | flex-end | center | baseline | stretch除了auto，其他的与父级align-items属性一致。
注意要活用align-self：stretch和align-items：stretch
2. 2009年的版本
目前新版本被支持的很好，所以旧版的直接写带前缀的。
display:-webkit-boxdisplay:-ms-flexbox
子元素如果有display：inline的，要把子元素写成display：block2012年的版本不需要。
a.父级的5个属性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。
//项目在主轴上的对齐方式
-webkit-box-pack:start（默认值，从起点开始） | end | center | justify
//项目在交叉轴上的对齐方式
-webkit-box-align:stretch（默认值，交叉轴方向撑满父级） | start | end | center | baseline
//项目的排列顺序
-webkit-box-direction:normal（默认值，以起点为始） | reverse（以终点为始）
//主轴方向
-webkit-box-orient:horizontal（默认值，水平方向） | vertical（垂直方向） | inline-axis（行内方式，映射为horizontal） | block-axis（块方式排列，映射为vertical）
//项目（子元素是否换行）
box-lines:single（默认值，不允许） | multiple（允许）
经测试，没有浏览器支持，这个属性不能用。
b.子元素的3个属性。box-flex，box-flex-group，box-ordinal-group。
//是否缩放
-webkit-box-flex:0（默认值，不放大也不缩小） | 1 | 2 | 3 . . .
//子元素排列次序
-webkit-box-ordinal-group:1 | 2 | 3 . . . 从小到大排列。
3. 对 1、2 的小结。
2012年版本比2009年的版本主要多了两个属性，1个是子元素是否换行，flex-wrap，2009年的box-lines不起作用。还有一个是子元素在主轴的对齐方式，2012年的justify-content:space-around2009年的没有这个效果，但是可以通过加左右padding值的方式做到。
如果要兼容2009年版本的盒子布局又想换行的，只能改用float布局。
八、html结构嵌套问题
p标签内不要嵌套块元素，其他的像h、p、dl . . .的块元素都会发生解析错误。可以嵌套行间元素。
类似的，还有a标签里不能再出现a标签，嵌套多少层都不行。
html标签嵌套要按照块元素包含行间元素的规则来写。
九、标签
让浏览器用最新内核渲染。
十、form标签一点特性
在移动端，input框获取焦点时，浏览器会d出软键盘，想让软键盘的enter键变成搜索两个字，需要让这个input按照这种结构写：
说明：onsubmit='return false'阻止表单默认提交，便于自己 *** 作。
input 的 type 必须是 search。
input 的 加了style='position：relative'，防止ios上点击搜索按钮会闪屏（白屏）。
十一、浏览器兼容
1.关于table表格的宽度设置问题。
Firefox和chrome的解析方式是不一样的，chrome会把你写的table宽度全部转化成px。Firefox则不会，所以在td写行间样式宽度时，不能百分比和px混用，要统一，要么每个td都写百分比的宽，要么都写px的宽；不要这几个td写百分比，那几个td写px。
2.某些安卓不识别height:calc（）可以用flex布局代替。
十二、KTV字幕效果
实现方式1：
把文字写两遍，两个行间元素span，包裹相同的文字。
首页
首页
或者
首页
首页
实现原理是：让内部两个span宽度相等，其中一个设置width:0%；overflow:hidden然后用js动态控制width从0% -- 100%。
实现方式2：（张鑫旭说只适用于chrome，但是我测了下，好像firefox也是可以的。）
实现原理：background-image是覆盖在background-color上的，chrome有个私有属性 -webkit-background-clip:text意为背景裁切，以文字为裁切起止。效果就是背景图片只会展示文字的书写路径，除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent将文字渲染的颜色写为透明，这样，文字路径就透出了背景图。再改变背景图片的水平位置，就能露出文字和背景图片下的背景颜色，就做到KTV字母效果了。
核心的css属性：
background-image:url()/*纯色的背景图，用来渲染文字颜色，因为文字是透明的。*/
background-repeat:no-repeat
-webkit-background-clip:text
-webkit-text-fill-color:transparent
background-position:0 0
↑改变他就可以了。
关于实现方式2的图示：
WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页，实现WebView有以下两种不同的方法：第一种方法的步骤：
1.在要Activity中实例化WebView组件：WebView webView = new WebView(this)
2.调用WebView的loadUrl()方法，设置WevView要显示的网页：
互联网用：webView.loadUrl("http://www.google.com")
本地文件用：webView.loadUrl("file:///android_asset/XX.html")本地文件存放在：assets 文件中
3.调用Activity的setContentView( )方法来显示网页视图
4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。
<uses-permission android:name="android.permission.INTERNET" />
第二种方法的步骤：
1、在布局文件中声明WebView
2、在Activity中实例化WebView
3、调用WebView的loadUrl( )方法，设置WevView要显示的网页
4、为了让WebView能够响应超链接功能，调用setWebViewClient( )方法，设置 WebView视图
5、用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
6、需要在AndroidManifest.xml文件中添加权限，否则出现Web page not available错误。
<uses-permission android:name="android.permission.INTERNET"/>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）