随笔分类 - css
摘要：1、W3C标准盒子模型 w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分 2、IE盒子模型 IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content
阅读全文
摘要：基础属性：（只能做到超出一行部分省略号显示） width: 200px; //宽度 overflow: hidden; //超出文本隐藏 white-space: nowrap; //不换行，只显示一行 text-overflow: ellipsis; //超出部分省略号显示 CSS3属性：（可做到
阅读全文
摘要：原文链接：https://blog.csdn.net/qq_43156398/article/details/102785370 PS：此方法需使用到less或者scss的@变量来支持 以设计图 1920 宽度为例：css中存在一种叫vw的单位，是针对浏览器宽度为基础的百分比单位，与%的区别在于，子
阅读全文
摘要：原文链接：https://www.jianshu.com/p/4850a7b22228 一.根据不同的分辨率，加载不同的CSS样式文件 这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。 可能你会感觉针对一个页
阅读全文
摘要：https://www.jianshu.com/p/39d214c73cea
阅读全文
摘要：强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地： word-wrap语法： word-wrap: normal(
阅读全文
摘要：关于box-shadow的基本用法参阅CSS3 box-shadow一章节。 此属性用来设置元素的阴影效果，语法结构如下: 下面通过代码实例介绍一下blur（模糊半径）和spread（扩展半径）参数的作用。 一.模糊半径: blur参数规定模糊半径；W3C文档并没有具体规定使用哪种方式实现模糊功能。
阅读全文
摘要：CSS允许根据链接的当前状态对它们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过 ，等等。可以通过一系列伪类实现这一特性。 a:link 设置从未被激活或指向，当前也没有被激活或指向的链接的外观。 1 a:link {color: red;} 新的、未访问的链接显示为红色。
阅读全文
摘要：最近在做微信项目的时候遇到一个奇怪的问题： 常购清单的商品多了以后往上滑没有任何反应，不能滑动。但商城首页又可以往上滑。而且ios没有这个问题，安卓才有这个问题。 起初我以为是因为这2个页面调用接口循环加载出商品的方法不同导致的。商城首页的商品部分是用laytpl模板写的；常购清单商品部分是拼的字符
阅读全文
摘要：在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值，这个时候我们就可以为该元素设置 box-sizing:border-box;。 我不希望每次都重写一遍，而是希望他是继承而来的，那么我们可以使用如下代码： 这样的好处在于他不会覆盖其他组
阅读全文
摘要：-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box
阅读全文
摘要：常见class关键词 布局类：header, footer, container, main, content, aside, page, section 包裹类：wrap, inner 区块类：region, block, box 结构类：hd, bd, ft, top, bottom, left
阅读全文
摘要：BFC是什么？ BFC（Block Formatting Context）中文直译就是‘块级格式上下文’，它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 通俗点说，BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸
阅读全文
摘要：MDN 对 BFC 的描述： 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 往下接着看看： 下列方式会创建块格式化上下文： 根元素或包含根元素的元素 浮动元素
阅读全文
摘要：简述 对于CSS的学习来说，布局和定位可以说使最关键的一部分，也是最基础的部分，布局和定位方面在学习的时候应该要系统，要自己总结一遍，如果只是草草的过一遍，就直接开始做demo，会遇到很多坑，反而得不偿失。因此我写下这篇博客，读者如果发现问题，望不吝赐教。 一 盒模型 在讲布局和定位之前，先总结一下
阅读全文
摘要：输入框景背景透明： 鼠标划过输入框，输入框背景色变色： 输入字时输入框边框闪烁(边框为小方型)： 输入字时输入框边框闪烁(边框为虚线)： 自动横向廷伸的输入框： 自动向下廷伸的文本框： 80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试 只有下划线的文本框： 软件序列号式的输入框： —————...
阅读全文
摘要：常见斑马loading 常见斑马loading 上图是我们常见的loading进度条，以前都是用一张背景图片平铺的。其实如果抛去兼容性因素，我们可以用零图片纯样式来实现。 一，首先，我们先为容器定义一个纯蓝色背景： box{ padding: 0px; color: rgb(51, 51, 51);
阅读全文
摘要：先脑补两组场景。 场景一： 同事们每天中午都会外出吃饭。通常情况下都会先问，去哪儿吃啊？不知道啊？下楼再说吧。到了楼下好不容易有个人站出来说，既然没人说我可就说了啊，咱们去吃香草香草吧。没人反对就去，如果有人反对的话，我听大家的。嗯，此人非常在意别人的看法，懂得退让与妥协。 场景二： 部门A在楼下讨
阅读全文
摘要：text-overflow 全兼容 text-overflow 这个CSS属性用于设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。比起在后台用程序截断文本再附上省略标记的做法，用CSS来处理文本溢出显然更温和(unobtrusive)一些。所以它已经被定义在 CSS 3 规范中，但目前
阅读全文
摘要：平常编写代码，更改一个元素样式的时候，自己都是用 之类的代码进行设置，这样的话如果更改样式很多的时候，就要写很多代码。 使用Javascript批量修改样式的方法： cssText 的使用: 注意：cssText会清除之前元素含有的样式所以得使用 但是再注意：在IE中的最后一个分号会被删除 其他使用
阅读全文