css属性就是要用的多用的熟 知道的多 就像一本工具书 除了基础原理 剩下的就是知识面了
极力推荐MDN用过的人都说好~
页面适配笔记本等自带缩放的场景
let t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5if (t != 1) {// 如果进行了缩放，也就是不是1let c = document.querySelector('body')c.style.zoom = -0.62 * t + 1.55; // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。}
CSS权重
全局 < 标签选择器 < class选择器 < ID选择器 < 行内样式 < !important
伪类
伪类用于定义元素的特殊状态。
/* 未访问的链接 */a:link {color: #FF0000;}/* 已访问的链接 */a:visited {color: #00FF00;}/* 鼠标悬停链接 */a:hover {color: #FF00FF;}/* 已选择的链接 */a:active {color: #0000FF;}/*伪类与指定的元素匹配：该元素是另一个元素的第一个子元素*/p:first-child {color: blue;}/*伪类与指定的元素匹配：选择作为其父的第二个子元素。*/p:nth-child(2){color: blue;}................
伪元素
伪元素在元素前后插入内容，并设置所插入内容的样式：。
::after p::after 在每个<p>元素之后插入内容。
::before p::before 在每个<p>元素之前插入内容。
::first-letter p::first-letter 选择每个<p>元素的首字母。
::first-line p::first-line 选择每个<p>元素的首行。
::selection p::selection 选择用户选择的元素部分。
参考
常用CSS
*{margin0;padding:0;}vertical-align定义行内元素的基线baseline | top | text-top | middle | bottom | text-bottom |在使用canvas等标签时，默认baseline基线对齐需要手动设置对齐方式时使用。DIV自动换行word-break:break-all;只对英文起作用，以字母作为换行依据word-wrap:break-word; 只对英文起作用，以单词作为换行依据white-space:pre-wrap; 只对中文起作用，强制换行white-space:nowrap; 强制不换行，都起作用white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）缩放：-webkit-transform: scale(0.78);单行超出文本显示省略号overflow：hidden;text-overflow:ellipsis;多行超出文本显示省略号overflow: hidden;/* text-overflow: ellipsis; */display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;去除图片底边3像素问题vertical-align:middle;//css基线设置 顶线中线基线底线 基线在英文之下中文之上 是文本和图片对齐的主因div内容水平垂直居中：//line-height单行居中或 vertical-align设置多行居中——仅用于行内或表格元素text-align:center; //或使用flex布局圆角：border-top-(left/right)-radiusborder-bottom-(left/right)-radius / border-radius:15px(可设置四个值);字体加粗：font-weight:bold;阴影：box-shadow: 3px 3px 3px #eaeaea;修改图标大小：font-size:28px;悬浮外边框：border(会占据空间影响布局 可先设置透明边框)不影响内部布局的悬浮外边框:outline(但会不贴合圆角) 神器! 让浏览器首选执行这个语句。因为css有继承的样式，加上!importanrt可以覆盖父级的样式。!important鼠标遮罩层 鼠标在设置了改样式的DOM元素上面无法点击且显示禁止样式cursor: not-allowed鼠标遮罩层 设置不影响下方元素点击事件pointer-events:none//不响应点击事件 由下层元素响应粘性布局，多用于滚动后固定的头部样式，相对视窗固定定位的进阶版position:sticky;top:0px;-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数./zh-CN/docs/Web/CSS/-webkit-line-clampoverflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;表格列间距调整<table cellspacing="1">元素超长时不换行，横向扩展white-space: nowrap;//与浮动相冲突自定义滚动条样式：/amylis_chen/p/11995324.html样式案例：::-webkit-scrollbar {width: 4px; /*滚动条宽度*/height: 10px; /*滚动条高度*/}/*定义滑块 内阴影+圆角*/::-webkit-scrollbar-thumb {border-radius: 10px;/*滚动条的圆角*/box-shadow: inset 0 0 5px #aaa;/*滚动条的内阴影*/background: rgba(0,0,0,0.2);/*滚动条的背景颜色*/}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #aaa; /*滚动条的内阴影*/border-radius: 0;/*滚动条的圆角*/background: rgba(0,0,0,0.1);/*滚动条的背景颜色*/}将鼠标光标替换为图片或其他样式cursor:pointer;//鼠标悬浮变手cursor: wait;//鼠标悬浮变等待cursor:url("img/123.png"),auto;页面初始化*{margin: 0;padding: 0;text-decoration: none;//去除全局文本下划线list-style: none;//去除全局默认表格样式box-sizing: border-box;//定义了 user agent 应该如何计算一个元素的总宽度和总高度。font-family: "Poppins",sans-serif;}html,body{display: grid;height: 100%;width: 100%;place-items: center;//是网格布局align-items和flex布局justify-items属性的简写background-color:#e4eaea;}
理解浮动：
浮动即字面意思，让元素相对其他元素悬浮起来
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程()</title></head><body><div class="div1"><div class="div2"></div></div></body><style>.div1{width:500px;border:1px solid #000;}.div2{float:left;width:400px;height:300px;background-color:red;}</style></html>
div2浮动前
div2浮动后
flex 弹性布局
通过给父盒子(flex container)添加display:flex来控制子元素(flex item)位置和排列方式
为盒模型提供最大的灵活性任何容器皆可指定为flex布局与grid浮动布局有冲突 flex中子元素浮动属性将失效当子元素宽度和超过父元素宽度 不会向浮动那样另起一行展示 而会等比例缩放子元素保证其全部展示
flex核心思想是，子元素如何分配父元素剩余空间，剩余空间＝父元素宽-子元素宽。当子元素宽全部为0时，剩余空间就算父元素宽
Flex练习网站1
Flex练习网站2
flex 父元素常见属性
flex-direction:设置主轴方向
flex分为两个方向，默认x轴水平向右，y轴垂直向下
flex-direction:row 默认从左到右flex-direction:row-reverse 从右到左flex-direction:column 从上到下flex-direction:column-reverse 从下到上
flex-wrap 设置子元素是否换行
flex-wrap: wrap换行flex-wrap: nowrap 不换行
flex-flow 上两者的复合属性
flex-flow: column wrap换行
justify-content设置主轴上的子元素排列方式
justify-content :flex-start 默认值 沿主轴方向justify-content :flex-end 沿主轴方向的尾部开始justify-content :center 沿主轴居中对齐justify-content :space-around 平分剩余空间justify-content :space-between 先两边贴边再平分剩余
align-items设置侧轴上的子元素排列方式(单行)
align-items :flex-start 默认从上到下align-items :flex-end 从下到上align-items :center 垂直居中align-items :stretch拉伸（与子元素高度值有冲突）
align-content设置侧轴上的子元素排列方式(多行)
align-content：:flex-start 默认从上到下align-content :flex-end 从下到上align-content:center 垂直居中align-content:stretch 拉伸align-content:space-around 平分剩余空间align-content:space-between 先两边贴边再平分剩余
flex 子元素常见属性
flex定义子项目所占剩余空间的份数.item { flex:number /*默认0*/ }order定义项目排列顺序
.item { order:number /*数值越小越靠前 允许负数 默认0*/ }align-self子项自己在侧轴的排列方式
span:nth-child(2){ align-self:flex-end /*属性和align-items一样*/ }
案例
三个等分盒子水平垂直居中
<template><div><span>1</span><span>2</span><span>3</span></div></template><style scoped>div{width: 50%;height: 300px;background-color: pink;display: flex;flex-flow: row nowrap;justify-content: space-around ;align-items: center;}div span{width: 150px;height: 100px;/* margin: 10px auto; 尽量不要再flex中涉及盒模型属性*/ background-color: gray;}
媒体查询
可以针对不同的屏幕尺寸设置不同的样式，常用于设计响应式的页面
//语法@media mediatype and|not|only (media feature) {CSS-Code;}//实例 媒体类型小于或等于指定的宽度时，样式生效@media screen and (max-width:480px){.ads {display:none;}}
媒体类型-mediatype ： screen 用于电脑屏幕，平板电脑，智能手机等。。。其他不常用
媒体特性-media feature
JS事件控制css
VEU中利用@mouseover=“mouseOver” @mouseleave=“mouseLeave” 绑定事件
<div id="demo"><div @mouseover="mouseOver" @mouseleave="mouseLeave" :style="active">Hover over me!</div></div>var demo = new Vue({el: '#demo',data: {active: ''},methods: {mouseOver: function(){this.active = 'background-color: #cccccc';},mouseLeave: function () {this.active = '';},}});
传统方式 Jquery获取DOM后.hover方法移入移出时改变样式
<!DOCTYPE html><html lang="en"><head><script src="/libs/jquery/2.1.4/jquery.min.js"></script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>ul li {list-style: none;}ul {overflow: hidden;}.scheme-content ul li {width: 248px;height: 303px;float: left;margin-right: 20px;border: 1px solid rgba(229, 229, 229, 1);opacity: .86;position: relative;text-align: center;}.scheme-content img {width: 100%;}.chat_log {position: absolute;background: #000000;opacity: .3;}</style></head><body><div class="scheme-content"><ul><li class="newbie-zone" toId="1"><div class="chat_log"></div><img src="./img/newbie_zone.png" alt=""><p>新手专区</p><p>新手卖家入门必备<br>店铺运营基础学习</p></li><li class="growth-stage" toId="2"><div class="chat_log"></div><img src="./img/growth_stage.png" alt=""><p>成长阶段</p><p>新手卖家入门必备<br>店铺运营基础学习</p></li><li class="lifting-stage" toId="3"><div class="chat_log"></div><img src="./img/lifting_stage.png" alt=""><p>提升阶段</p><p> 店铺处罚&数据一目了然<br>运营&升级&买家诉求深度了解</p></li></ul></div></body><script src="./jquery.min.js"></script><!-- <script src="./hover.js"></script> --><script>$(".scheme-content ul li").hover(function () {var $width = $(this).find('img').width();var $height = $(this).find('img').height();console.log($width, $height)$(this).find('.chat_log').width($width);$(this).find('.chat_log').height($height);$(this).find('.chat_log').css('opacity', 0.3);$(this).css('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0.18)');}, function () {$(this).find('.chat_log').width(0);$(this).find('.chat_log').height(0);$(this).find('.chat_log').css('opacity', 1);$(this).css('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0)');});</script></html>
VUE对象语法
<style lang="scss" scoped> .active{border: 5px solid gray;}</style>普通写法：<div class="active"></div><div class="active text-danger"></div>对象语法传对象以动态地切换 class： active这个class值存在与否取决于isActive<div :class="{ active: isActive }"></div>在对象中传入更多字段来动态切换多个 class；若isActive、hasError都为true；class 列表将变为 "active text-danger"<div :class="{ active: isActive, 'text-danger': hasError }"></div>同理可得 对象内可传入更多个class，还可以改写未计算属性让标签更简洁数组语法需要与data绑定，总感觉这步很多余 多了一层也不易于维护 日常开发对象语法足矣 不推介数组语法/v2/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95
Gride布局
常用CSS与Flex布局 媒体查询 JS事件控制css VUE对象语法 Gride布局(待补全) CSS权重 页面适配笔记本缩放
