小咸鱼|大梦想

摘要： 精灵图 1. 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术 2. 精灵图（sprites）的使用 精灵技术主要针对背景图片。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为sprites精灵图或者雪碧图 移动背景图片位置，使用back 阅读全文

摘要： 元素的显示与隐藏 1. 本质：让一个元素在页面中隐藏或显示出来 2. display：显示隐藏 用于设置一个元素应如何显示 display：none；隐藏对象 display：block；隐藏对象 【注意】 display隐藏元素后，不在占有原来的位置 3. visibility：显示隐藏 visi 阅读全文

摘要： 定位 1. 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置 2. 定位模式 定位模式决定了元素的定位方式，它通过css的position属性来设置，其值可以分为四个： | 值 | 阅读全文

摘要： 浏览器执行JS 1. 浏览器分成两部分：渲染引擎和JS引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit JS引擎：俗称JS解析器。用来读取网页中的JS代码，对其处理后运行，比如chrome浏览器的V8 【注意】 浏览器本身并不会执行JS代码 阅读全文

摘要： CSS浮动 1. 传统网页布局的三种方式 网页布局的本质——用来CSS来摆放盒子。把盒子摆放在相应的位置 CSS提供了三种传统的布局方式： 普通流（标准流） 所谓的标准流，就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、fo 阅读全文

摘要： 圆角边框 1. border radius属性用于设置元素的外边框圆角 ~~~ border radius:length; ~~~ radius半径（圆半径）原理：圆与边框的交际形成圆角效果。 圆的做法 首先，做一个正方形的div 其次，让border radius的值等于div宽度的一般，或者等于 阅读全文

摘要： 文字折叠效果 1. 效果展示 2. 实现过程 ~~~html H e l l o W o r l d ~~~ 填充内容 CSS布局 ~~~css { margin：0px； padding：0px; } body{ background color:aquamarine; width:100%; h 阅读全文

摘要： 盒子模型 1. 页面布局的三大核心，盒子模型，浮动和定位 2. 网页布局过程 先准备好相关网页元素，网页元素基本都是盒子Box 利用CSS设置好盒子样式，然后放到相应位置 往盒子里面装内容 3. 盒子模型的组成 所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是 一个盛装内容的 阅读全文

摘要： CSS的三大特性 1. 层叠性 相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突样式。层叠性主要解决样式冲突问题 层叠性原则 样式冲突，遵循的原则是就近原则，哪个样式里结构近，就执行那个样式 样式不冲突，不会层叠 2. 继承性 CSS中的继承性：子标签会继承父标签的某些样式，如文 阅读全文

摘要： css背景 1. 背景颜色 banckground clor属性定义元素的背景颜色 ~~~ background color：颜色值； ~~~ 一般情况下元素的背景颜色默认值是transparent（透明的） 2. 背景图片 background image属性描述了元素的背景图像。实际开发常见于L 阅读全文