CSS笔记8（之前忘上传那篇）

html5和css3提高

html5新增了一些标签，表单，表单属性

html5新增的语义化标签

<header>头部</header>
<nav>导航栏</nav>
<article>内容</article>
<section>某个区域</section>
<aside>侧边栏</aside>
<footer>尾部</footer>
主要针对搜索引擎
IE9中要把他们转换为块级元素

多媒体标签

<video src="" autoplay="autoplay" muted="muted" controls="controls" loop="loop" >
	<source src="" type="" >
</video>

<audio></audio>

input 标签

新增的input类型

---

css3新特性

新增属性选择器

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

• 属性选择器，按照字面意思，都是根据标签中的属性来选择元素
• 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
• 属性选择器也可以选择出来自定义的属性
• 注意：类选择器、属性选择器、伪类选择器，权重为 10。
• input[type=text] 权重为11

新增结构伪类选择器

n可以是数字，关键字和公式

• E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

新增伪元素选择器

伪元素选择器可以帮助我们使用css创建新标签元素，不需要HTML标签

选择符	简介
::before	在元素的前面插入内容
::after	在元素的后面插入内容

注意：

• before 和 after 创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法： element::before {}
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  伪元素选择器和标签选择器一样，权重为 1

盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况：

• box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
• box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

图片模糊处理

css3滤镜filter:

filter: 函数(); 例 filter: blur(5px);数值越大越模糊

calc函数

width:calc(100%-80px)

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

css3过渡

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

• 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
• 花费时间： 单位是 秒（必须写单位） 比如 0.5s
• 运动曲线： 默认是 ease （可以省略）
• 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
• 后面两个属性可以省略
• 记住过渡的使用口诀： 谁做过渡给谁加