个人笔记

过渡动画：是从一个状态渐渐过渡到另一个状态，经常和 :hover 一起搭配使用 属性：想要变化的css属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以 花费时

CSS3滤镜 filter filter CSS属性将模糊或颜色偏移等图形效果应用于元素 clac() 此CSS函数让你在声明CSS属性值时执行一些计算

新增语义化标签 标签 描述 <header> 规定文档或节的页眉、头部 <nav> 定义导航链接 <article> 定义文章、内容 <section> 定义文档中的节、内容 <aside> 定义页面

单行文本溢出显示省略号-必须满足三个条件 多行文本溢出显示省略号 多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit内核的浏览器或移动端（移动端大部分是webKit内核）

vertical-align 属性应用场景：经常用于设置图片或者表单（行内元素）和文字垂直对齐 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效 值 描述 baseli

鼠标样式 cursor 属性值 描述 default 小白（默认） pointer 小手 move 移动 text 文本 not-allowed 禁止 表单轮廓线 outline 给表单添加outli

CSS-三角的做法、三角的应用 其他方向的应用同理 div { width: 0; height: 0; line-height: 0; font-size: 0;

精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图中 这个大图也称sprites精灵图或者雪碧图 移动背景图片位置，此时可以使用 background-position 移动的距离就

本质：让一个元素在页面中隐藏或者显示出来 display 显示隐藏 display隐藏元素后，不在占有原来的位置 visibility 显示隐藏 visibility隐藏元素后，继续占有原来的位置 3

绝对定位的盒子居中显示 加了绝对定位的盒子不能通过 margin: 0 auto; 水平居中，但是可以通过以下计算方法实现水平垂直居中 left: 50%; 让盒子的左侧移动到父级元素的水平中心位置

在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用 z-index 来控制盒子的前后次序（z轴） 数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上 如果属性值相同，则按照书写顺序

固定定位 fixed 固定定位是元素固定于浏览器可视的区域 固定定位小技巧：固定在版心右侧位置 让固定定位的盒子 left: 50%; 走到浏览器可视区（也可以看做版心）的一般位置 让固定定位的盒子

属性书写顺序、1. 布局类型 2. 盒子模型+背景 3. 文本属性内容 4. 点缀属性。 .

为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 定位组成 定位：将盒子定在某

语法 值 描述 h-shadow 必须，水平阴影文章，允许负值 v-shadow 必须，垂直阴影文章，允许负值 blur 可选，模糊距离 color 可选，阴影颜色

语法 值 描述 h-shadow 必须，水平阴影文章，允许负值 v-shadow 必须，垂直阴影文章，允许负值 blur 可选，模糊距离 spread 可选，阴影尺寸 color 可选，阴影颜色 in

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素就可以了

相邻块元素垂直外边距合并 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 marg

外边距可以让块级盒子水平居中，但必须满足两个条件： 盒子必须制定了宽度（width） 盒子左右的外边距都设置为auto margin: 0 auto; 注意：以上方法是让块级元素水平居中，行内元素或者

collapse 单词是合并的意思 border-collapse: collapse; 表示相邻边框合并在一起