随笔分类 - css
摘要：目录： 一、选择器的扩展 1. 属性选择器 2. 伪类选择器 3. 伪元素选择器 二、盒子模型的增强 1. box-sizing属性 2. 边框圆角（border-radius） 3. 盒阴影（box-shadow） 三、过渡和动画效果 1. 过渡效果 2. 动画效果 四、响应式布局 1. 媒体查询
阅读全文
摘要：global.css /* 全局样式表 */html, body, #app { height: 100%; margin: 0; padding: 0;} 2.reset.css /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric
阅读全文
摘要：1、安装node-sass、sass-loader 简化内容，具体版本等注意事项在下面。（node官网：GitHub - sass/node-sass: :rainbow: Node.js bindings to libsass） //默认安装最新版本 npm install node-sass -
阅读全文
摘要：.container{ min-height: 100vh; background-image: linear-gradient(90deg, rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(180
阅读全文
摘要：全民悲伤的日子，页面置灰的代码。 <style type="text/css"> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
阅读全文
摘要：介绍： object-fit属性指定元素的内容应该如何去适应指定容器的高度和宽度。 一般用于img和video标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 参数： .fill { object-fit:fill; } .contain{ object-fit:contai
阅读全文
摘要：方法一：短小精干，不用设置css;（推荐使用） <label for="fileInput"> <i class="iconfont icon-photo" aria-hidden="true"></i> </label> <input v-show="false" type="file" id="
阅读全文
摘要：方法1：计算滚动条宽度并隐藏起来 <div class="outer-container"> <div class="inner-container"> ...... </div> </div> .outer-container{ width: 360px; height: 200px; posit
阅读全文
摘要：1.vue同个css文件 <div :class="isMobile ? 'backgroudImgMobile' : 'backgroudImgPc'"> data() { return { isMobile: false }; }, mounted() { this.getScreen(); }
阅读全文
摘要：<div class="content"> <div class="item-left"></div> <div class="item-center"></div> <div class="item-right"></div> </div> .content { display: flex; al
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div高度占满整个屏幕</title> <style type="text/css"> .main { padding: 0; margin: 0; posit
阅读全文
摘要：这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢
阅读全文
摘要：① display：none ② visibility:hidden 两种写法的区别： 第一种display:none; 不仅可以让盒子隐藏还可以让盒子消失，这样隐藏的盒子就不会占位置。 第二种visibility:hidden; 只有隐藏，但盒子的位置还在，盒子并没有消失。
阅读全文
摘要：overflow: hidden; //超出的内容进行隐藏 white-space: nowrap; //设置内容不换行 text-overflow: ellipsis; //设置超出内容为省略号
阅读全文
