十八岁讨厌编程的博客

是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡(过渡可以说是一种简单的动画)，动画可以实现更多变化，更多控制，连续自动播放等效果。制作动画分为两步：首先定义动画，我们使用keyframes(类似定义类选择器)语法结构：这里的0%和100%有专门的名字 – 动画序列接下来是元素使用动画，在使用的时候有两个属性是必不可少的：语法结构：动画的基本使用现在我们来做一个小案例：一打开网页，一个红色的盒子就从左边飞到右边。代码实现如下：利用动画

文章目录

文章目录属性选择器结构伪类选择器nth-child（n）nth-child 和nth-of-type的区别总结伪元素选择器伪元素选择器使用场景场景一：伪元素字体图标新增的CSS3特性有兼容性问题，ie9+才支持CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器属性选择器属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。注意：类选择器、属性选择器、伪类选择器，权重为 10。例如：

文章目录溢出的文字省略号显示单行文本溢出显示省略号多行文本溢出显示省略号常见布局技巧margin负值的运用文字环绕浮动效果行内块的应用CSS三角强化CSS初始化溢出的文字省略号显示分为两种情况：单行文本溢出显示省略号多行文本溢出显示省略号单行文本溢出显示省略号三个步骤：强制一行内显示文本超出的部分隐藏文字用省略号替代超出的部分代码实现：/*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐

文章目录CSS三角CSS用户界面样式什么是用户界面样式更改用户的鼠标样式表单轮廓防止拖拽文本域 resizevertical-align 属性应用解决图片、表单和文字对齐的问题解决图片底部默认空白缝隙问题CSS三角网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：本质就是盒子将高度和宽度设为0，此时边就呈现一个三角形的效果代码实现：div { width: 0; height: 0; line-hei

文章目录精灵图为什么需要精灵图精灵图（sprites）的使用字体图标字体图标的产生字体图标的优点字体图标的使用字体图标的追加精灵图为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务

文章目录

文章目录

文章目录浮动传统网页布局的三种方式标准(普通流，文档流)为什么需要浮动什么是浮动浮动特性浮动元素经常和标准流父级搭配使用浮动传统网页布局的三种方式网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置.CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位标准(普通流，文档流)所谓的标准流: 就是标签按照规定好默认方式排列.例如：块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、for

文章目录CSS 的复合选择器什么是复合选择器后代选择器子选择器并集选择器伪类选择器链接伪类选择器:focus 伪类选择器复合选择器总结CSS的元素显示模式什么是元素显示模式块元素行内元素行内块元素元素显示模式总结元素显示模式转换CSS的背景背景颜色背景图片背景平铺背景图片位置背景图像固定（背景附着）背景复合写法背景色半透明背景总结附1：Emmet 语法快速生成HTML结构语法快速生成CSS样式语法快速格式化代码附2：如何使单行文字垂直居中单行文字垂直居中的原理CSS 的复合选择器什么是复合选择器在 C

文章目录CSS简介HTML的局限性CSS-网页的美容师CSS语法规范CSS代码风格样式格式书写样式大小写空格规范CSS基础选择器CSS选择器的作用选择器分类标签选择器类选择器类选择器-多类名id 选择器通配符选择器基础选择器总结CSS字体属性字体系列字体大小字体粗细文字样式字体复合属性字体属性总结CSS文本样式文本颜色对齐文本装饰文本文本缩进行间距文本属性总结CSS的引入方式CSS 的三种样式表内部样式表行内样式表外部样式表CSS 引入方式总结CSS简介HTML的局限性说起 HTML，这其实是个非常单

文章目录CSS 的三大特性层叠性继承性优先级CSS的注释CSS盒子模型看透网页布局的本质盒子模型（Box Model）组成边框（border）表格的细线边框边框会影响盒子实际大小内边距（padding）外边距（margin）外边距典型应用外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷清除内外边距CSS 的三大特性CSS 有三个非常重要的三个特性：层叠性继承性优先性层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。