csyldjy的博客

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

1 定位1.1 为什么需要定位1. 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。1.2 定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。定位 = 定位模式 + 边偏移 。 1.2.1 定位模式定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：值 语义 stat

1 浮动（float）1.1 传统页面布局的三种方式页面布局的本质——用css来摆放盒子。css提供了三种传统布局方式（盒子如何进行排列顺序）：普通流 浮动 定位实际开发中，往往一个页面会同时用到这三种布局方式。（移动端会学习到新的布局方式）1.2 普通流（标准流、文档流）普通流：标签按规定好默认方式排列。是最基本的布局方式。1、块级元素独占一行、从上到下顺序排列常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table2、行内元素从左到右顺序排列

1 css三大特性css有非常重要的三大特性：层叠性、继承性、优先级。1.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）；另一个冲突样式。层叠性主要解决样式冲突问题。......

1 Emmet语法Emmet语法的前身是Zen coding，它使用缩写，来提高HTML / CSS的编写速度，Vscode内部已经集成该语法。快速生成HTML结构语法 快速生成CSS样式语法1.1 快速生成HTML结构语法生成标签直接输入标签名按tab键即可，然后tab键，就可以生成<div></div>。 如果想要生成多个相同标签，加上*就可以了。比如 div*3，就可以快速生成3个div。【不要加空格，不然不起效果】 如果有父子级关系的标签，可以用>。

1 css简介1.1 html局限性HTML只关注内容语义（丑、臃肿繁琐）→骨架1.2 CSS-网页的美容师css是层叠样式表（cascading style sheets）的简称。有时称之为CSS样式表或级联样式表。css也是一种标记语言。css主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式（美化）。总结1、HTML主要做结构，显示元素内容2、css美化HTML，布局页面3、css