随笔分类 -  CSS

关于 CSS 的一些小 tips
摘要：1.锚伪类 在支持 css 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。用来表示链接不同状态的伪类就是锚伪类。 1 2 3 4 a:link {color: green;} /* 未访问的链接 */ a:visited {colo 阅读全文

posted @ 2019-09-17 15:05 半分可爱与温柔啊 阅读(92) 评论(0) 推荐(0)

display：table的用法(让块里的多行文字垂直居中)
摘要：https://www.jianshu.com/p/3022bfed0226 https://www.cnblogs.com/chen-cong/p/8076442.html 阅读全文

posted @ 2019-09-13 15:20 半分可爱与温柔啊 阅读(425) 评论(0) 推荐(0)

css 之 sticky footers 布局
摘要：关于：Sticky footer布局 我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流撑开始终显示在页面的最下方。 阅读全文

posted @ 2019-09-11 20:00 半分可爱与温柔啊 阅读(233) 评论(0) 推荐(0)

CSS3 filter（滤镜）属性
摘要：今天遇到了一个之前没接触过的css3属性 https://www.cnblogs.com/moqiutao/p/4843437.html 阅读全文

posted @ 2019-09-11 19:23 半分可爱与温柔啊 阅读(157) 评论(0) 推荐(0)

css变量
摘要：定义： .penguin { --penguin-skin: gray; } 使用： .penguin-top { background: var(--penguin-skin,, black);//当你的变量有问题的时候，它会设置你的背景颜色为黑色 } 你创建的变量，不但可以在你声明变量的元素里面 阅读全文

posted @ 2019-09-08 15:49 半分可爱与温柔啊 阅读(343) 评论(0) 推荐(0)

关于 em 和 rem
摘要：原文链接：http://caibaojian.com/rem-vs-em.html 当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。· 例如，根元素(html)的字体大小 16px，10rem 将等同于 160px， 阅读全文

posted @ 2019-09-08 15:11 半分可爱与温柔啊 阅读(202) 评论(0) 推荐(0)

行内元素默认间距问题
摘要：行内/行内块元素之间的默认边距是大概5px 行内块元素之间，浏览器也会有一个默认的间距，或者是别的元素类型直接转换过来的行内块元素，浏览器都会有默认的间距。 通过 * { margin:0;padding:0; } 是不能取消其固有的边距的 解决方法： 1.将所有的行内/行内块元素直接设置浮动，但是 阅读全文

posted @ 2019-08-01 08:24 半分可爱与温柔啊 阅读(832) 评论(0) 推荐(0)

图片闪光效果的两种方法
摘要：目前想到两个方式： 通过在里层多增加一个i标签模拟实现 二：通过伪类方式模拟，减少i标签。高级浏览器识别 阅读全文

posted @ 2019-07-30 16:43 半分可爱与温柔啊 阅读(859) 评论(0) 推荐(0)

使用CSS3线性渐变实现图片闪光划过效果
摘要：使用CSS3线性渐变实现图片闪光划过效果 2018-12-30CSS36087View0 使用CSS3线性渐变实现图片闪光划过效果 2018-12-30CSS36087View0 在百度音乐 http://music.baidu.com/ 看到这么一个图片效果，当鼠标移上去的时候，会有一道闪光在图片 阅读全文

posted @ 2019-07-30 16:37 半分可爱与温柔啊 阅读(383) 评论(0) 推荐(0)

li添加浮动，鼠标经过a会有边框显示，导致li抖动
摘要：<ul class="city"> <li><a href="#">南昌市</a></li> <li><a href="#">景德镇市</a></li> <li><a href="#">萍乡市</a></li> <li><a href="#">九江市</a></li> <li>< 阅读全文

posted @ 2019-07-28 21:28 半分可爱与温柔啊 阅读(837) 评论(0) 推荐(0)

如何使a标签内只显示固定的字数，未显示的字用....表示
摘要：a { } 阅读全文

posted @ 2019-07-28 20:44 半分可爱与温柔啊 阅读(1143) 评论(0) 推荐(0)

多个span标签并列排放，但高度不一致的问题
摘要：解决方法： 在span标签的样式里添加：vertical-align:middle; 阅读全文

posted @ 2019-07-28 20:25 半分可爱与温柔啊 阅读(1113) 评论(0) 推荐(0)

元素添加margin:0 auto;却不生效
摘要：好久没有敲代码，今天敲代码的时候偶然发现，咦，怎么给元素添加了margin:0 auto却不居中对齐呢？ 发现原来只有块级元素添加margin:0 auto有效果，行内元素和行内块元素添加margin:0 auto均不起效果。 想要让行内元素居中： 方法一：将行内元素的margin四个值或是父元素的 阅读全文

posted @ 2019-07-21 21:25 半分可爱与温柔啊 阅读(3670) 评论(0) 推荐(2)

overflow:hidden;（小tips）
摘要：代表隐藏滚动条，包括横向滚动条与竖向滚动条。 当给父容器设置了特定高度的情况下(特别注意)，子容器超出父容器高度，会进行隐藏。 阅读全文

posted @ 2019-07-21 19:02 半分可爱与温柔啊 阅读(165) 评论(0) 推荐(0)

text-align=center 作用于哪些元素？
摘要：（1）.text-align不会作用于块级元素。 （2）.text-align作用于文本。 （3）.text-align作用于行内元素。 （4）.text-align作用于图片。 阅读全文

posted @ 2019-07-20 14:01 半分可爱与温柔啊 阅读(2319) 评论(0) 推荐(0)

基线对齐
摘要：行内元素图片默认和父元素的基线对齐，所以图片和父元素之间会有缝隙解决方法：1.设置为块元素 display:block; / display:inline-block;2.可以将文本的字体大小设置为03.vertical-align:bottom 阅读全文

posted @ 2019-07-20 10:57 半分可爱与温柔啊 阅读(529) 评论(0) 推荐(0)

css选择器 first-child与first-of-type 的区别
摘要：总结： :first-child 匹配的是某父元素的第一个子元素，就是结构上的第一个子元素。 :first-of-type 匹配的是某父元素该类型的第一个，类型就是冒号前面匹配到的东西，比如 span:first-of-type，就是指父元素里所有span元素中的第一个。 同样类型的选择器 :las 阅读全文

posted @ 2019-07-20 10:20 半分可爱与温柔啊 阅读(479) 评论(0) 推荐(0)

导航