CSS
jnChen10
这个作者很懒,什么都没留下…
展开
-
CSS - 笔记
CSS3 filter(滤镜) 属性filter: grayscale,添加在html上可将整个页面置灰filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter :grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);...原创 2020-04-05 12:42:52 · 156 阅读 · 0 评论 -
CSS - Grid网格布局
参考博客:《CSS Grid 网格布局教程》使用场景网格布局使用场景:九宫格图片展示、日历布局、自定义键盘布局主要概念容器(最外成元素)容器可以是块级的,也可以是行级的display: grid // 块级display: inline-grid; // 行内元素容器主要定义网格布局有几行几列以产生多少个单元格(这些单元格成为项目),例如3行3列则产生9个单元格...原创 2019-12-19 14:38:04 · 302 阅读 · 0 评论 -
CSS - Sass
学习博客:Sass入门SassCSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间,且易于维护。引入合理的样式复用机制:变量、混入、选择器、继承、内置函数。安装// vue-cli2 中需要手动安装,vue-cli3 在初始化项目时可以选配安装npm install node-sass --save-devnpm install sass-loader@7.3...原创 2019-12-18 15:28:14 · 162 阅读 · 0 评论 -
CSS - 1px
在移动端开发时,设计图1px的边框显示在手机屏幕上时,1px会显的很粗,与设计图不相符,设置0.5px效果也没有变化解决方法:使用伪类,设置高度为1px,再缩小0.5倍通过transform: scaleY(0.5)对height: 1px进行缩0.5倍缩放.border1px { position: relative; border: none;}.border1px...原创 2019-01-20 13:07:15 · 417 阅读 · 0 评论 -
CSS - display: table居中
.outer { display: table; width: 100px; height: 100px; font-size: 0; background: lightblue;}.inner { display: table-cell; vertical-align: middle;}.icon { display: inline-block; ...原创 2019-12-17 22:56:46 · 533 阅读 · 0 评论 -
CSS - last-child
:last-child选中节点,该节点必须是父元素下的最后一个节点<div> <p class="line">aa</p> <p class="line">bb</p> <p class="line">cc</p> <p class="line">dd</p> // 会...原创 2019-08-20 16:40:22 · 1120 阅读 · 0 评论 -
CSS - 隐藏滚动条
参考博客:::-webkit-scrollbar、微信小程序隐藏滚动条::-webkit-scrollbar { width: 0; height: 0; color: transparent; }原创 2019-10-14 09:39:17 · 160 阅读 · 0 评论 -
CSS - 多行溢出省略号
参考文档/博客-webkit-line-clamp、display: box布局的详细介绍(图解)-webkit-line-clamp:限制在一个块元素显示的文本的行数。是一个不规范的属性,它没有出现在 CSS 规范草案中。为了实现限制行数,它需要组合其他外来的WebKit属性一起使用// 将对象作为弹性伸缩盒子模型显示display: -webkit-box;// 设置或检索伸...原创 2019-09-23 09:49:05 · 126 阅读 · 0 评论 -
CSS - reset.css
/*** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)* http://cssreset.com*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, ab...原创 2019-09-27 22:33:01 · 117 阅读 · 0 评论 -
CSS - line-height
参考博客:css行高line-height的一些深入理解及应用、深入理解CSS中的行高line-height,中文意思为“行高”,指的是文本中行与行基线之间的距离基线在哪运用?inline-block模型中,元素水平对齐方式的方式——基线对齐,每个元素都有自己的行高与基线,以哪个元素作为参考标准,答案是以行高最大的元素作为参考标准谁撑起了元素的高度?误区一:div的高度...原创 2019-09-08 18:18:35 · 208 阅读 · 0 评论 -
CSS - img自适应宽高
使用CSS3属性object-fit,参考博客CSS3object-fit属性假设一个img为宽200px,高150px,不对img属性做任何处理,图片会被拉伸,如下图所示为了不让图片被拉伸,可以居中显示在固定的宽高内(200px 150px),通常解决办法是写在一个div内,为div设置以下属性background: url('xxx') center center no-r...原创 2019-02-26 16:30:38 · 14895 阅读 · 1 评论 -
CSS - white-space word-break word-wrap
参考文档https://www.w3school.com.cn/cssref/pr_text_white-space.asphttps://www.cnblogs.com/dfyg-xiaoxiao/p/9640422.htmlwhite-space属性设置如何处理元素内的空白及换行。经常使用white-space: nowrap;控制文本不换行值 描述 nor...原创 2019-08-27 22:09:55 · 140 阅读 · 0 评论 -
CSS - sticky footer
sticky footer是一种布局解决方案,规定屏幕内容在占满一屏幕 / 未占不满一屏幕的情况下,footer出现的位置内容未超过一屏幕的高度时,footer至于屏幕最下方内容超过一屏幕的高度时,footer至于内容的下方两种常见的解决方案1.使用min-height、padding-bottom、margin-top* { margin: 0; padding...原创 2019-09-07 22:15:04 · 187 阅读 · 0 评论 -
CSS - flex
flex布局父元素设置了flex属性,子元素的float、clear、vertical-align无效父元素属性常用属性:justify-content、align-item、flex-wrap、flex-direction不常用属性:flex-flow (flex-direction与flex-wrap的简写)、align-content(多跟轴线的对齐方式)justi...原创 2019-09-05 22:00:05 · 104 阅读 · 0 评论