随笔分类 - CSS
摘要：当图片的父容器设置的flex:1来撑满容器时，子元素如果切换图片会导致溢出父容器。将父容器设置为flex:auto; height:0; 为什么要添加height:0, 添加 height: 0 是为了确保父容器的高度为 0，然后使用 flex: auto 将父容器的高度撑开
阅读全文
摘要：flex 布局下，使用flex：xx 的子项无限撑大容器 祖先容器使用flex布局，父容器使用flex：xx的时候，此时如果父容器下的子项使用宽高100%，子项将会无限撑大容器。 解决办法： 祖先容器使用flex定位时，当发生嵌套时，必须得给flex：xx 的父容器设置position:relati
阅读全文
摘要：动态DOM节点的classList属性 为 div元素动态添加 class: element.classList 定义和用法 classList 属性返回元素的类名，作为 DOMTokenList 对象。 该属性用于在元素中添加，移除及切换 CSS 类。 classList 属性是只读的，但你可以使
阅读全文
摘要：定义一个抖动的类apply-shake @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70%
阅读全文
摘要：帮助理解弹性盒各个的属性的小游戏。 http://flexboxfroggy.com/ 弹性盒 一、开启弹性盒模型 display:flex; display:inline-flex; 弹性盒和内联弹性盒的区别，弹性盒高度会被子元素撑开，弹性盒宽度100%占据整行。内联弹性盒高度和宽度均由子元素宽高
阅读全文
摘要：场景： 遍历请求来的数据，使用弹性盒布局，左右各一份并且换行，并且使用justify-content:space-around。 拉到最后一个显示的数据，发现最后一个图片理应另起一行显示在左边，但是发现图片孤零零的被置于中间，严重影响美观。 原因： 因为奇数个数据在使用弹性盒排列时，必然会出现有尾巴
阅读全文
摘要：总结 | 属性display | 块元素block | 行内元素inline | 行内块元素inline-block | none | | | | | | | | 是否换行 | × | √ | √ | | | 父元素未定宽高 | 子元素填充宽高 | 宽度随内容增加 | 宽度随内容增加 | 不渲染，脱
阅读全文
摘要：1.正常html里，一个标签无法同时写两个 class，只有位置靠前的第一个class类名生效 我们只能用将不同类名写入标签的class属性并用空格隔开 2.vue允许 ★静态类名staticClass + 动态类名dynamicClass 这里类名加不加单引号，要看你绑定时是否为字符串。如果是字符
阅读全文
摘要：双飞翼布局，左右两边，中间自适应拉伸。 父盒子 display: flex; justify-content: space-between; 中间搜索框 width:100% 也可以直接父盒子给弹性盒，中间搜索框直接flex:1;即可完成布局 flex: 为三个属性的缩写 flex-grow, fl
阅读全文
摘要：由于需要动态展示‘我喜欢贾静雯’字样（单行），我们不知道文本具体的长度。 故需要在样式里裁剪这段文本 调整样式 .recommentdSrroll .scrollItem text { font-size: 26rpx; /* 单行文本 */ white-space: nowrap; /* 溢出隐藏
阅读全文
摘要：1.Vue模板中style的scoped属性的作用：加上scoped后只作用于当前的组件有用（样式） 对于某一个组件，如果style添加上scoped属性，给当前子组件的结构都接天上一个data-v-xxxx自定义属性 会发现vue是通过属性选择器，给需要添加的元素添加上样式 h3[data-v-3
阅读全文
