定位：
定位总结：
- static: 不脱标，不能使用边偏移
- relative:不脱标（占有位置），可用margin,相对于自身位置移动
- absolute:脱标（不占有位置）,不可用margin,带有定位的父级
- fixed：脱标（不占有位置），浏览器可视区
- sticky:不脱标（占有位置），浏览器可视区
绝对定位特点：如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对，绝对，固定定位）则以最近一级的有定位的祖先元素为参考点移动位置
绝对定位不占有原先的位置（脱标）
叠放次序 z-index
在使用定位布局时，可以使用z-index来控制盒子的前后次序
语法：
选择器{z-index:1;}
- 数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上
- 如果属性相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
定位的拓展
1.绝对定位盒子居中
left:50%margin-left:-100px;
2.定位特殊性：
绝对定位固定定位和浮动相似
行内元素添加绝对或者固定定位，可以直接设置高度和宽度（span)
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
脱标的盒子不会触发外边距合并问题
3.绝对定位（固定定位）会完全压住盒子
浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流的文字（图片）但是绝对定位（固定定位）会压住下面标准流的所有内容
浮动之所以不会压住下面文字是因为浮动最初的目的是为了做文字环绕效果
元素里的显示和隐藏
display 显示隐藏元素 但是不保留位置 隐藏元素不想要原来位置，用none，否则用block
visibility显示隐藏元素 但是保留原来的位置,visible为元素可见，hidden为元素隐藏
overflow 溢出显示隐藏 但是只是对于溢出的部分处理,scoll:溢出的部分显示滚动条，visible:溢出部分可见,hidden:溢出部分不可见,auto:没溢出则不显示滚动条，溢出则超出部分显示滚动条。
用户界面样式
鼠标样式cursor
li {cursor: pointer; }
default 默认小白鼠标
pointer 小手
move 移动
text 文本
not-allowed 禁止
vertical-align实现行内块和文字居中对齐
vertical-align:middle
解决图片底部默认空白空隙：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决方法：
1.给图片添加vertical-align:middle或者top或者bottom
2.把图片转为块级元素 display:block
单行文字溢出显示省略号
white-space:nomal:如果文字显示不开自动换行
white-space:nowrap:如果文字显示不开强制一行内显示
overflow:hidden(溢出部分隐藏)
text-overflow:ellipsis(文字溢出部分用省略号显示)
多行文本溢出显示省略号
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 从第几行开始省略 */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
常见布局技巧
margin负值使用
让每个盒子margin往左移动-1px，正好压住相邻盒子的边框
鼠标经过盒子提高当前盒子层级（如果没有定位，则加相对定位（保留位置）如果都有定位则用z-index)
文字围绕浮动元素
三角形制作
weight:0;
height:0;
border-color:transparent red transparent transprent;
border-style:solid;
border-width:22px 8px 0 0;(上面的宽，右边的小一些)
HTML新标签
header:头部标签
nav：导航标签
article:内容标签
section:定义文档某个区域
aside:侧边栏标签
footer：尾部标签
主要针对搜索引擎，这些新标签页面中可以使用多次，在IE9中，需要把这些元素转换为块级元素
视频
用mp4格式
autoplay:自动播放
controls:向用户使用播放控件
width:设置播放器宽度
height:设置高度
loop:是否循环播放
src：url（视频url地址）
poster:加载等待的画面图片
muted：静音播放
新增input表单
type=”email”
type=”url”
type=”date”
type=”time”
type=”month”
type=”week”
type=”numbers”
type=”tel”
type=”search”
type=”color”
input属性
required=”requied”表示该内容不能为空，必填
placeholder=”placeholder”提示文本，表单提示信息
autofocus=”autofocus”自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete：默认为on，当用户键入字段时基于之前键入的值显示出字段，关闭为off
multiple:可以多选文件提交
新增选择器
属性选择器（特殊性0,0,1,0)
E[att]选择具有att属性的E元素
E[att=”val”]选择具有att属性且属性值等于val的E元素
E[att^=”val”]选择具有att属性且属性值以val开头
E[att$=”val”]选择具有att属性且属性值中含有val的E元素
伪类选择器
E:first-child:匹配父元素的第一个子元素
E:last-child:匹配父元素的最后一个元素
E:nth-child(n)匹配父元素的第n个元素
E:nth-child(even)匹配父元素的第偶数个元素，odd则第奇数个元素
E:nth-child(n)，从0开始计算，但是第0个元素或者超出元素个数会被忽略
nth-child(2n):偶数，2n+1:奇数 5n:5 10 15…
n+5:从第5个开始到最后
-n+5：前5个（包含第5个）
nth-of-type():会把指定孩子排序号，执行的时候先看E指定的元素，之后根据E回去看是第几个孩子
nth-child:对于父元素里面所有孩子进行排序选择，先找到第n个孩子，然后看着是否和E匹配
无序列表用nth-child比较多
类选择器，属性选择器和伪类选择器权重为10
伪元素选择器
::before:在元素内部的前面插入内容
::after:在元素内部的后面插入内容
- before和after创建一个元素，属于行内元素
- 新创建的这个元素在文档树中找不到，因此称为伪元素
- 语法：element::before{},
- before和after必须有content属性
- 伪元素和标签选择器一样，权重为1
伪元素选择器：清除浮动
.clearfix:after {
content:’’;
display:block;//插入的元素必须是块级
height:0;//不要看见这个元素
clear:both;
visibility:hidden;//不要看见这个元素
}
.clearfix:before,.clearfix:after {
content:’’;
diaplay:table;//元素在一行显示且转化为块级元素
}
CSS盒子模型
box-sizing:content-box，盒子大小为width+padding+border(CSS3之前默认)
box-sizing:border-box,盒子大小为width
如果盒子模型我们改为了box-sizing：border-box，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）
CSS过渡（重点）
transition:要过渡的属性 花费时间 运动曲线 何时开始
1属性：想要变化的CSS属性，宽度高度 背景颜色内外边距都可以 如果想要所有属性都变化过度则用all
2花费时间：单位是秒（必需写单位
3运动曲线默认为ease
4何时开始：单位是秒 可以设置延迟触发时间 默认是0s
CSS filter属性
修改图片的颜色为黑白
1 | img{filter:grayscale(100%)} |