随笔分类 -  前端-CSS

制作压盖效果
摘要：有时候给元素设置边框的时候，如果两个元素相邻，那么他们之间的边框就宽了一倍。 情景模拟： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>未压盖效果</title> <style> div { float: 阅读全文
posted @ 2018-06-29 16:59 刘呆哗 阅读(303) 评论(0) 推荐(0)
让ul中浮动的最后一个li元素不在被挤下来
摘要：记不清自己有多少次写浮动的 li 时最后一个 li 标签被挤掉下一行。导致的原因很简单，就是父盒子给的宽度太小了，今天偷来空总结总结处理办法。 情景模拟： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></ 阅读全文
posted @ 2018-06-29 15:36 刘呆哗 阅读(3728) 评论(0) 推荐(0)
css精灵
摘要：css精灵是一种css图像合并技术，该方法是将小图像和背景图像合并到一张图上，然后利用css定位来显示需要显示的图像。优点就是减少来http请求。常用于制作一些小的装饰。 设置完背景图background-image属性之后，将background-repeat属性设置为no-repeat不重复。如 阅读全文
posted @ 2018-06-24 14:08 刘呆哗 阅读(257) 评论(0) 推荐(0)
元素水平居中
摘要：对于元素水平居中要分情况分析《文中父盒子代表可被继承的盒子，不针对父，也可能为祖先》： 在标准流中： 一、行内元素水平居中： 1.行内元素水平居中，并不是在自己的css里设置text-align:center;而是在父盒子里设置。 2.父盒子要有一定的宽度，对于没有宽度的盒子来说，让其内部的行内元素 阅读全文
posted @ 2018-06-24 13:44 刘呆哗 阅读(246) 评论(0) 推荐(0)