border-sizing
这个属性用于计算盒模型的宽高,由于浏览器的兼容问题,主要是ie低版本的问题.
有两个属性:border-sizing: content-box;
或者border-sizing: border-box;
前者是css默认的宽高计算方法,就是 width = 内容的宽度, height = 内容的高度.
后者则是被称为怪异盒模型, width = 内容的宽度+border的宽度+padding的宽度, height = 内容的高度+borderde的高度+padding的高度.
H5语义化标签
语义化标签有利于;浏览器或其他软件对网页的解析,有利于搜索引擎的优化,有利于编译时更好地理解含义.
- 太多了…着重写一下媒体标签
video
<figure>
<img>
<figcaption></figcaption>
</figure>
- 其中
figure
来存放图片,使用img
引入,figcaption
写图片的标题,同一个figure里面只能嵌套一个标题.
<video src="mov/cz.mp4" controls autoplay></video>
<video controls loop muted>
<source src="mov/cz.mp4"/>
<source src="mov/cz.ogg"/>
<source src="mov/cz.webm"/>
</video>
<video controls poster="images/1.jpg">
<source src="mov/cz.mp4"/>
<source src="mov/cz.ogg"/>
<source src="mov/cz.webm"/>
</video>
- controls为播放器,autoplay为自动播放(谷歌不支持),loop为循环播放,muted为静音播放,poster为播放之前显示的背景图片.
- video一共就支持三种格式,分别为Ogg、MPEG4、WebM
audio
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
embed
- 适用于各种媒体文件,包括但不限于midi、wav、AIFF、AU、MP3、Flash
属性选择器
标签[属性="值"]{ }
- 标签 存在 attr 属性即可
a[title]{
/* */
font-size:100px;
}
- 标签存在attr属性,且以value 开头
a[href^="http://www.baidu"]{
/* */
}
- 标签存在 attr 属性 并且是以 value 结尾
a[href$='.com']{
/* */
background-color: #f40;
}
- 标签存在 attr 属性 并且包含 value 值
a[href*='jd']{
- 标签存在attr属性,且值为value
a[href='http://www.sina.com']{
- 标签存在 attr 属性 并且包含 value 值(整个单词)
a[class~='nav']{
/* */
background-color: gray;
}
$
- 标签存在attr属性 并且包含value字段
a[class*="nav"]{}