1、用audio插入的背景音乐在电脑端可以默认播放，但是在iphone端不行，不知道怎么解决——原因是：在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截；
2、在iphone上用Safari查看是正常的（右侧），但是用QQ浏览器查看（左侧）页面就变形了，感觉应该是媒体查询里面字体大小的变化没有生效，这样一个简单的页面都会出现兼容性的问题么？
3、投票页面的小图标用active的伪类实现鼠标点击时出现的效果，但是在移动端无效，解决方法：http://www.w3cmark.com/2015/399.html，现在还看不懂，不会用；
1、background-size用百分数时图片大小不是按背景图片大小的百分数来计算，而是装截背景图的元素百分比计算；用cover背景图片自己会放大到适合容器的尺寸，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中；contain刚好是跟cover相反，是把背景图片缩小到适合元素容器的尺寸；
2、高度自适应可以用rem实现，也是结合媒体查询改变大小，或者使用媒体查询直接改变高度的px大小，不是很复杂的时候应该时可以完成的：
@media screen and (max-width: 360px) {
div.column-right {
width: 30px;
height: 30px;
3、flex：flex是新版本的语法，box和flexbox是老版本的语法
① Flex布局以后，子元素的float、clear和vertical-align属性将失效，Webkit内核的浏览器，必须加上-webkit前缀；
② flex-direction属性
决定主轴的方向（即项目的排列方向）→ flex-direction: row | row-reverse | column | column-reverse;
③ flex-wrap属性
定义如果一条轴线排不下，如何换行→flex-wrap: nowrap（不换行） | wrap （换行，第一行在上方）| wrap-reverse（换行，第一行在下方）;
④ justify-content属性
定义了项目在主轴上的对齐方式（水平对齐）→justify-content: flex-start | flex-end | center | space-between（两端对齐） | space-around;
⑤ align-items属性
定义项目在交叉轴上如何对齐（垂直对齐）→align-items: flex-start | flex-end | center | baseline | stretch（占满整个容器的高度);
⑥ order属性
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
⑦ flex-grow属性
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
⑧ flex-shrink属性
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
⑨ flex-basis属性
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
⑩ flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
⑪ shiyialign-content属性
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。⑫ align-self属性
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
4、①button的字体好像是不能继承html或者父元素中的字体属性，需要重新设置，包括font-family；
②在 button 元素内部可以放置内容，比如文本或图像。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容；
③button的type分为button和submit，type=button 就单纯是按钮功能type=submit是发送表单;
5、在定义a的伪类时，要按照a:link， a:visited， a:hover， a:actived的顺序（lv包hao用）书写，原因：是“同等优先权的样式，写在后边的会覆盖前边”，a标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必须按lvha来写。
6、<audio>标签<audio src="audio/fight.mp3" autoplay loop>中的autoplay、loop、controls都是布尔属性，出现即可；
| 音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
| OGG | 支持 | 支持 | 支持 | 支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
一般提供ogg和mp3格式，就可以支持所有主流浏览器了。
wav格式音质最好，但是文件体积较大。mp3压缩率较高，普及率高，音质相比wav要差。ogg与mp3在相同位速率(Bit Rate)编码的情况下，ogg体积更小，并且ogg是免费的不用交专利费
解决兼容性的方法：
<audio controls>
<source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
<source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
<source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>
{width：a%; padding:(a/2)%;}
8、smartsprite来创建雪碧图很好用，使用雪碧图的优点是为了优化页面性能，减少加载网页图片时对服务器的请求次数，提高加载速度；
① 运行方法：cmd窗口里输入smartsprites d:/example/example.css或Smartsprites d:/example/example.css --document-root-dir-path d:/root；
② 在CSS中第一个背景图出现之前的css代码前打上下面这句注释/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */
注意在/**后面有一个空格，sprite: mysprite是指定的创建的雪碧图的名字，sprite-image是雪碧图创建的地址， sprite-layout标明图片是水平（默认）还是竖直；
③ 在每一个需要生成雪碧图的background-image后面打上这句注释
/** sprite-ref: mysprite; */
这句注释的意思是将注释前的background-image加入到mysprite这张雪碧图中；
④ 使用雪碧图的CSS文件中的background的属性不能合并，要一个一个写，background-image，background-size等
⑤ 不能出现background-position，会与smartsprite创建的重复；
⑥ 只接受 jpg、png 和 gif 格式的图片；
⑦ Sprite Alignment, 语法为：sprite-alignment: left | right | top | bottom | repeat
指定对齐方式，垂直布局时默认值为left，水平布局时默认值为top
⑧ Sprite margins ,语法为：sprite-margin-(left | right | top | bottom): OFFSETp
指定图片和周围图片或者和sprite 边的距离，尽可能让你的背景图片覆盖到整个元素，如果覆盖不够（当原始图没有放置在盒子的边上时），这个属性可能会有用； ⑨ 自适应可以使用rem，也可以手动更改smartsprite创建的background-positio为百分比，将装背景图的div宽度高度都设置为百分比，例如四个图片，每个位置就是0,1/3,2/3,3/3；
① h标签在网站优化中起的作用可谓非常强大，任何一个合理优化之后的网站都需要有h标签护航方可得到良好的排名；
② 每个网页只能拥有一个<h1>标签，<h1>用来修饰网页的主标题，一般是网页的标题，文章标题，<h1>中部署主关键词。<h1>尽量靠近在html中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。
③ <h2>表示一个段落的标题，或者说副标题，部署长尾关键词。
④<h3>表示段落的小节标题，<h3>效果跟Strong差不多，一般是用在段落小节。
⑤ <h4>-<h6>基本很少用到，是告诉搜索引擎这些不是很重要的内容，当一篇文章内容较多的时候，可以用来说明一些内容是不很重要的。
10、CSS代码的书写顺序：①位置②大小（width，height， margin，padding）③文字④背景⑤其他；
11、两端对齐
text-align: justify;/*文字两端对齐*/
①opacity：1r为不透明，0为完全透明，所有子元素透明；
②RGBA:最后一项为不透明度，只针对元素本身，不涉及子元素
13、伪类选择器
比如：p:first-child 选择器的选择条件：此P子元素是其父元素的第一个子元素；前面加上li指的是作为li的子元素的一个P元素
返回列表
评论