html5和css3的学习笔记

H5结构知识点一:
body,nav,section需要h1-h6; header,div不需要h1-h6. h5结构
测试网站:https://gsnedders.html5.org/outliner/


移动端么meta格式:
移动端要加的标签<meta name="viewport&quot; content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">


移动端图片自适应css(配合上述标签使用):
img{display:block;max-width:100%;}

css3标签:ouline:none 点击无虚线


css3内边距和边框的高度融合在高度里面的属性(防止变形 移动端流体布局)
div{box-sizing:border-box;}


H5标题组合标签hgroup


css3文本属性保持一行white-space:nowrap;
css3文本属性超出部分隐藏:overflow:hidden;
css3文本属性如果有半截字用...代替:text-overflow:ellipsis;
css3媒体查询@media (min-width:480px)and(max-width: 640px);
h5图片标签figure 图片描述内容标签figcaption

css3伪类元素
#tour .clearfix:after{
content: ".";//在某元素后添加内容
clear: both;
height: 0;
visibility: hidden;//隐藏区域内容;
}

css3谷歌私有属性
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp:2//文本不得超出两行
-webkit-box-orient(属性规定框的子元素应该被水平或垂直排列。):vertical.从上向下垂直排列子元素。


水平居中的话就在img所在的标签设置text-align:center
垂直居中的话就在img上设置vertical-align:middle
至于水平垂直居中?这的问题与上面的已经重复了
例如:
<div style="text-align:center; width:100px; height:40px;"><img src="图片" style="vertical-align:middle;" width="16" height="16" /></div>
css3改变播放器宽高时能做相应的改变
<video controls preload="auto" width="640" height="264"><video>

h5文本禁止拉伸
style="resize:none"

posted @ 2015-10-25 11:45  兰小宇  阅读(358)  评论(0编辑  收藏  举报