m0_62774164的博客

1.字体图标的产生字体图标使用场景：主要用于显示网页中使用，常用的一些小图标。精灵图是由许多优点的，但是缺点明显。1.图片文件还是比较大的。2.图片本身放大缩小会失真。3.一旦图片制作完毕要想更换非常复杂此时，有一种技术的出现很好解决了哟上问题，就是字体图标iconfont。字体图标展示的是图标，本质属于字体。2.字体图标的优点1.轻量级：一个图标新字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、

1.1为什么需要精灵图有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。1.2精灵图（sprites）的使用使用精灵图核心：1.精灵技术主要针对于背景图片使用，就是报多个小背景图片正和岛一张大图片中。2.这个大图片也称sprites精灵图或雪碧图。3.移动背景图片位置，此时可以使用background-position.4.移动的距离就

定位1.1为什么需要定位1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。2、当我们滚动窗口的时候，盒子是固定屏幕某个位置的。（以上用标准流和浮动比较难做，需要定位来实现）所以：1、浮动可以让多个块级盒子一行没有间隙排列显示，经常用于横向排列盒子。2、定位则是可以让盒子自由的在某个盒子内移动位置，或者固定屏幕中某个位置，并且可压住其他盒子。1.2定位的组成定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。== 定位=定位模式+边偏移==定位模式：用

4.1常见的图片格式：1、jpg图像格式：产品类图片经常使用2、gift图像格式：实际经常用于一些图片小动画效果3、png图像格式：想要切成背景透明的图片4、PSD图像格式：对于前端人员来说最大的优点，可以直接从上面复制文字，获得图片，还可以测量大小和距离。PS的切图方式：图层切图、切片切图、PS插件切图等。4.2 图层切图最简单的切图方式：右击图层——快速导出为PNG但很多情况下，需要合并图层再导出：1、选中需要的图层，图层菜单——合并图层（ctrl+e）2、右击——快速导出为PN

浮动（float）1)传统网页布局的本质——用css来摆放盒子。把盒子摆放到相应位置，CSS提供了三种传统布局方式（简单说就是盒子如何进行排列顺序）： 普通流（标准流） 浮动 定位标准流（普通流/文档流）所谓标准流：就是标签按照规定好默认方式排列1.块级元素会独占一行，从上向下顺序排列。~常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行。~常用元素：span、a、i、em等以

1. 圆角边框2.盒子阴影3.文字阴影tips:去掉li前面的项目符号（小圆点）语法：list-style：none；圆角边框（重点）在css3中，新增了圆角边框的样式,这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。语法：border-radius:lengthradius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果1）参数值可以为数值或百分比的形式2）如果正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写50%3

1.css的三大特性2.css的注释css的三大特性css有三个非常重要特性：层叠性、继承性、优先级1、层叠性相同选择器给设置相同的样式，此时一个样式会覆盖（层叠)另一个冲突的样式。层叠性主要是解决样式冲突的问题。层叠性原则：1）样式冲突，遵循就近原则，离哪个样式结构近，就执行哪个样式。2）样式不冲突，不会层叠。 <style> div{ color:red ; } div{ col

目录：1、Emmet语法2、css复合选择器3、元素的几种显示模式4、元素显示模式的互相转换代码 5、背景图片的设置方式Emmet语法（一）语法tab生成骨架 标签+tab=标签名 生成多个标签 *n n个标签 父子级标签 e.g ul>li 兄弟关系 +5、类名或id的名字(.demo/e.g. .nav#bannerp.onespan.grayul>li#two6、生成的div有顺序的，...

HTML 标题<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>HTML 段落<p>This is a paragraph.</p><p>This is another paragraph.</p>HTML 链接<a href="http://..