html代码：
<div id="box">
<div id="child">我是测试DIV</div>
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
position: relative
}
#child {
width: 150px
height: 100px
background: orange
position: absolute
top: 50%
margin: -50px 0 0 0
line-height: 100px
}
运行结果如下：
这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。
2. 使用绝对定位和transform
html代码：
<div id="child">
我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
position: relative
}
#child {
background: #93BC49
position: absolute
top: 50%
transform: translate(0, -50%)
}
运行结果如下：
这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
3. 另外一种使用绝对定位和负外边距进行垂直居中的方式
html代码：
<div id="box">
<div id="child">我也是个测试DIV</div>
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
position: relative
}
#child {
width: 50%
height: 30%
background: pink
position: absolute
top: 50%
margin: -15% 0 0 0
}
运行结果如下：
这种方式的原理实质上和前两种相同。补充的一点是：margin的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。
4. 绝对定位结合margin: auto
html代码：
<div id="box">
<div id="child">呆呆今天退役了(。﹏。)</div>
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
position: relative
}
#child {
width: 200px
height: 100px
background: #A1CCFE
position: absolute
top: 0
bottom: 0
margin: auto
line-height: 100px
}
运行结果如下：
这种实现方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，我这里设成了0，当然你也可以设为99999px或者-99999px无论什么，只要两者相等就行，这一步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。
被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现。
5. 使用padding实现子元素的垂直居中
html代码：
<div id="box">
<div id="child">今天西安的霾严重的吓人，刚看了一眼PM2.5是422</div>
</div>
css代码：
#box {
width: 300px
background: #ddd
padding: 100px 0
}
#child {
width: 200px
height: 100px
background: #F7A750
line-height: 50px
}
运行结果如下：
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。
这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
6. 设置第三方基准
html代码：
<div id="box">
<div id="base"></div>
<div id="child">今天写了第一篇博客，希望可以坚持写下去！</div>
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
}
#base {
height: 50%
background: #AF9BD3
}
#child {
height: 100px
background: rgba(131, 224, 245, 0.6)
line-height: 50px
margin-top: -50px
}
运行结果如下：
这种方式也非常简单，首先设置一个高度等于父元素高度一半的第三方基准元素，那么此时该基准元素的底边线自然就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个margin-top，值的大小是它自身高度的一半取负，则实现垂直居中。
7. 使用flex布局
html代码：
<div id="box">雾霾天气，太久没有打球了</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
display: flex
align-items: center
}
运行结果如下：
这种方式同样适用于块级元素：
html代码：
<div id="box">
<div id="child">
程序员怎么才能保护好眼睛？
</div>
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
display: flex
align-items: center
}
#child {
width: 300px
height: 100px
background: #8194AA
line-height: 100px
}
运行结果如下：
flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下，想深入学习的小伙伴可以去看阮一峰老师的博客。（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
flex-start:：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐；
baseline：项目第一行文字的基线对齐；
stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。
8. 第二种使用弹性布局的方式
html代码：
<div id="box">
<div id="child">
答案当然是多用绿色的背景哈哈
</div>
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
display: flex
flex-direction: column
justify-content: center
}
#child {
width: 300px
height: 100px
background: #08BC67
line-height: 100px
}
运行结果如下：
这种方式也是首先给父元素设置display:flex，设置好之后改变主轴的方向flex-direction: column，该属性可能的取值有四个，分别如下：
row（该值为默认值）：主轴为水平方向，起点在左端；
row-reverse：主轴为水平方向，起点在右端；
column：主轴为垂直方向，起点在上沿；
column-reverse：主轴为垂直方向，起点在下沿。
justify-content属性定义了项目在主轴上的对齐方式，可能的取值有五个，分别如下（不过具体的对齐方式与主轴的方向有关，以下的值都是假设主轴为从左到右的）：
flex-start（该值是默认值）：左对齐；
flex-end：右对齐；
center：居中对齐；
space-between：两端对齐，各个项目之间的间隔均相等；
space-around：各个项目两侧的间隔相等。
9. 还有一种在前面已经见到过很多次的方式就是使用 line-height 对单行文本进行垂直居中
html代码：
<div id="box">
我是一段测试文本
</div>
css代码：
#box{
width: 300px
height: 300px
background: #ddd
line-height: 300px
}
运行结果如下：
这里有一个小坑需要大家注意：line-height(行高) 的值不能设为100%，我们来看看官方文档中给出的关于line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距。所以大家就明白了，这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。
10. 使用 line-height 和 vertical-align 对图片进行垂直居中
html代码：
<div id="box">
<img src="duncan.jpeg">
</div>
css代码：
#box{
width: 300px
height: 300px
background: #ddd
line-height: 300px
}
#box img {
vertical-align: middle
}
运行结果如下：
vertical-align并不像看起来那样天真无邪童叟无欺，以后会单独拎出来专门写一篇。
11. 使用 display 和 vertical-align 对容器里的文字进行垂直居中
html代码：
<div id="box">
<div id="child">我也是一段测试文本</div>
</div>
css代码：
#box {
width: 300px
height: 300px
background: #ddd
display: table
}
#child {
display: table-cell
vertical-align: middle
}
运行结果如下：
这里关于vertical-align啰嗦两句：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。
valign属性规定单元格中内容的垂直排列方式，语法：<td valign="value">，value的可能取值有四种：
top：对内容进行上对齐
middle：对内容进行居中对齐
bottom：对内容进行下对齐
baseline：基线对齐
关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
希望我的回答可以帮到您哦
关于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.阻止手机弹出默认菜单，长按img标签或者长按a标签会弹出系统默认菜单（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.关于移动端软键盘弹起，盖住页面的问题。 核心解决办法是利用 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框获取焦点时，浏览器会弹出软键盘，想让软键盘的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的图示：本文介绍css中float和position的区别
工具/材料
Dreamwear
区别：
1、float的定义和常见用法：
float属性定义元素在哪个方向浮动。
以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。、
实例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<style type="text/css">
div{
width:200px
height: 200px
border: 2px solid pink
margin:0 5px
float: left
}
</style>
</head>
<body>
<div>11111</div>
<div>22222</div>
<div>33333</div>
</body>
</html>
float属相使得块级元素的div可以在同一行并排，效果如下：
2、position定义和用法：
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
其属相值有：
绝对定位的实例：
