摘要：
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。 官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 语法： vertical-align : baseline | top | middle | bo 阅读全文
摘要：
###什么是界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 ###鼠标样式 cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 li {cursor: pointer; } ###轮廓线 阅读全文
摘要：
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。 通常的做法： 给一个div设置长宽为0，设置边框大小，颜色 div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid tra 阅读全文
摘要：
###伪类（MDN） 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。 常用的伪类： ####:hover :first :first-child :nth-child ###伪类（MDN） 伪元素是一个附加至选择器末的关键 阅读全文
摘要：
###字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 精灵图是有诸多优点的，但是缺点很明显。 图片文件还是比较大的。 图片本身放大和缩小会失真。 一旦图片制作完毕想要更换非常复杂。 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。 字体图标可以为前端工程师 阅读全文
摘要：
###为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites 阅读全文
摘要：
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 display 显示隐藏 visibility 显示隐藏 overflow 溢出显示隐藏 ###display 属性 display 属性用于设置一个元素应如何显示。 ① displ 阅读全文
摘要：
###盒子阴影 (MDN) CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 语法： box-shadow: h-shadow v-shadow blur spread color inset; 注意： 默认的是外阴影(outset), 但是不可以写这个单词,否则 阅读全文
摘要：
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50 阅读全文