属性选择器，结构伪类选择器，伪元素选择器，box-sizing,transition

                     目录

css初始化

新增布局和表单标签

属性选择器

结构伪类选择器

伪元素选择器

box-sizing

blur函数，calc函数，transition状态转移

css初始化

* {
	margin:0;
	padding:0;
}

em,i {
    font-style:normal
	斜体的文字不倾斜
}
img {
	border:0;
	照顾低版本浏览器，如果图片外面包含链接会有边框问题
	vertical-align: middle
	取消图片底侧有空白缝隙问题
}

当鼠标经过button时候变成手
 button {
 cursor: pointer;
 }

 body {
 -webkit-font-smoothing: antialiased;
 抗锯齿形，文字显示更清晰
 font: 12px/1.5 Microsoft YaHei
 1.5倍行高
 }

宋体："\5B8B\4F53"
防止汉字乱吗，通过unicode编码代替

 .clearfix:after {
 visibility: hidden;
 clear: both;
 dispaly: block;
 content: "."
 height: 0
 }

新增布局和表单标签

<header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档某个区域
section相当于大号的div
<aside>侧边栏标签
<footer>尾部
这些标签针对搜索引擎
标签可以使用多次
ie9中需要把他们转为块

<audio> <video>只支持mp4

<video src="" controls="controls"></video>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">

如果mp4打不开就打开ogg

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"></video>
添加muted可以在谷歌浏览器解决自动播放问题
controls="controls" 有视频控制按钮
把video看成一个盒子
loop="loop"
poster="media/mi9.jpg">
这里poster代表，如果视频加载慢就显示这个图片

video {
	width: 100%;
}
<audio src="media/music.mp3" autoplay="autoplay"></audio>

谷歌一样把音频声音去掉，且没有muted

input: search 属性多了个required="required" 表示内容必须书写不能为空
注意必须包含在 form action=""里面
placeholder表示提示文本

属性选择器

根据元素特定属性选择元素，可以不借助于类

input[value] {
	必须属于input，必须包含有value属性
	color:pink;
}

只能这么写，或者 input[value='what']{}

E[att]：表示选择具有att属性的E元素，选择属性=值的元素

input[type=text] {
	color: pink;
}

<input type="text" value="请输入用户名">
<input type="text">
<input type="password">

<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>

1 class以icon开头的选择出来

div[class^=icon]{
	以icon开头，选择首先是div然后具有class属性并且属性值必须是icon开头的元素
	color: red;
}

2 以谁结尾：

section[class$=data] {
    color:blue;
}

3 包含的情况

section[class*=icon] {
    只要包含icon都会选择出来
}

注意：<strong>类选择器，属性选择器，伪类选择器，权重都是10</strong>

div.icon1 {
	这是个交集选择器，11
}

结构伪类选择器

如果ul里有很多li，那么在style里选择时，

ul li: first-child {
}
ul li:last-child {}
nth-child(n)

选择某个父元素的一个或者多个特定子元素
括号里的n可以是数字，关键字或者公式
n是数字，就选择第几个：

ul li:nth-child(2) {
    background-color: pink;
}
n也可以是关键字：even,odd可以选出偶数行和奇数行

• ol li:nth-child(n)表示选中所有孩子，只能写n不能写其他字母
• ol li:nth-child(2n)，2n表示偶数的孩子被选中，等价于even
• ol li:nth-child(2n+1)，选中奇数个
• ol li:nth-child(5+n)，选中包含第五个及往后的
• ol li:nth-child(5-n)，选中前五个

n都从0开始

ul li: first-of-type {
    
}
ul li: last-of-type {
    
}

第一个和最后一个孩子选中
ul li:nth-of-type使用和前面nth-child一样

区别：
nth-child会把所有盒子都排列序号，执行时先看nth-child(1)，之后看前面的div，无法匹配
但是nth-of-type(1)会把指定元素的盒子排列序号
结构伪类选择器一般用于选择父级里第几个孩子
：nth-of-type属于伪类选择器权重为10

伪元素选择器

css模拟 eg：遮罩层和三角
::before
::after

element::before{}
before和after必须有content属性
放到父盒子里面的前面
element::after{}
但是都是行内元素
content加上引号，但是::before权重为1

div:: after {
    content:'1';
}

通过伪元素生成新盒子放在浮动元素最后

.clearfix:after {
    content: "";伪元素必须写的属性
    display: block;插入元素必须是块级
    height:0;不要看见这个元素
    clear:both;核心代码清除浮动
    visibility: hidden;不要看见这个元素
}

.clearfix:before,.clearfix:after {
    content:'';
    display:table;
}

相当于在float元素左边一个右边一个守护


.clearfix:after {
    clear:both;
}

box-sizing

box-sizing: content-box盒子大小包括padding和border
border-box

blur函数，calc函数，transition状态转移

img {
blur是个函数 括号里数值越大图像越模糊
    filter: blur()
}

width: calc(100% -80px);
子盒子比父盒子小80像素

transition: width 1s;

第二个参数：盒子从200到400要多长时间
第三个参数：ease速度变慢；

如果有两个属性都要渐变：

div {
     width: 200px;
     height: 100px;
    transition: width .5s ease 0s, height .5s ease 0s;
}

如果多个属性：
transition: all 0.5s;

.bar {
    width:150px;
    height:15px;
    border:1px solid red;
    border-radius: 7px;
    padding:1px;
}
.bar_in {
    width:50%;
    height:100%;
    bgc:red;
    谁加过度给谁加
    transition: all .7s
}
.bar:hover .bar_in {
    width:100%;
}
<div class="bar">
    <div class="bar_in"></div>
</div>