随笔分类 -  css

vh，vw和%
摘要：取消textarea的文本框可放大缩小的效果：resize：none 设置图片作为边框：border-image：url(/i/border.png) 30 30 round; 注意：该css3样式ie不支持。 border-image-repeat：图像边框是否应平铺(repeated)、铺满(r 阅读全文
posted @ 2020-12-14 16:37 徐文芩 阅读(1052) 评论(0) 推荐(0)
html上传文件和图片
摘要：上传文件：<input type="file" id="file" /> 上传文件优化样式 Html： <p class="liuyanfile"> <label>上传文件</label> <a href="#" class="file">选择文件<input type="file" id="fil 阅读全文
posted @ 2020-12-14 16:33 徐文芩 阅读(3812) 评论(0) 推荐(0)
flex-grow带来的排版问题
摘要：图片变形问题 flex布局中，当一个元素定义了flex-grow，而其他元素没定义flex-grow时，可能会将其他元素挤压变形。这时给其他元素添加一下css样式： flex-shrink：0； 可以解决这个问题 省略号问题 在flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1， 阅读全文
posted @ 2020-11-25 15:59 徐文芩 阅读(371) 评论(0) 推荐(0)
css文本样式，空格
摘要：text-indent 首行缩进，只与元素第一行有关 eg.　text-indent：50px 首行缩进50像素 white-space 设置如何处理元素内的空白 eg.　white-space:pre-wrap 保留空格和回车 white-space:pre 空白会被浏览器保留，其行为方式类似 H 阅读全文
posted @ 2020-11-25 15:54 徐文芩 阅读(647) 评论(0) 推荐(0)
flex兼容写法
摘要：安卓和iOS浏览器都是webkit内核，包括变态UC浏览器，对flex支持并不好，但却都支持古老的display：webkit-box；所以在这种情况下，要使用box布局。所以移动端的一定要加浏览器前缀！！ .flex{ display:box; display: -webkit-box; disp 阅读全文
posted @ 2020-09-27 15:17 徐文芩 阅读(481) 评论(2) 推荐(0)
多行文字，最后一行省略号（适用于移动端）
摘要：.text{ overflow: hidden; word-wrap: break-word; /* 允许长单词换行到下一行 */ text-overflow: ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-l 阅读全文
posted @ 2020-09-27 15:16 徐文芩 阅读(192) 评论(0) 推荐(0)
checkbox样式修改
摘要：/*checkbox 整体大小 */ checkbox { width: 240rpx; height: 90rpx;} /*checkbox 选项框大小 */ checkbox .wx-checkbox-input { width: 50rpx; height: 50rpx;} /*checkbo 阅读全文
posted @ 2020-09-27 15:14 徐文芩 阅读(1139) 评论(0) 推荐(0)
响应式布局
摘要：/* pc width > 1200px */body { /* background-color: yellow; */ min-width: 1200px;}/* ipad pro */@media screen and (max-width: 1200px) { body { /* backg 阅读全文
posted @ 2020-09-27 15:12 徐文芩 阅读(122) 评论(0) 推荐(0)
css小技巧（清除滚动条）
摘要：calc()函数 用来计算css属性的值。 注意： +和-运算符在运算符和值之间需要一个空格。例如，它将被calc(50% -8px)解释为百分比，后跟负像素长度。只有在-到8px之间有空格时，才可以正确减法：calc(50% - 8px) 空格在乘法或除法中不起作用，但建议阅读时要注意。 css清 阅读全文
posted @ 2020-09-15 17:02 徐文芩 阅读(587) 评论(0) 推荐(0)