.shaw { box-shadow: 0px 4px 6px #ccc; }
【1】CSS选择器
① 类选择器
1.后代选择
使用类选择器选择父类下面的所有后代。
#这里是父类与子类选择器 .wrapper-item .layui-form-label{ width: 25%; } <div class="wrapper-item"> <label for="name" class="layui-form-label"> <span class="we-red">*</span>姓名 </label> </div>
使用类选择器选择后代中某个标签元素
#父类与子标签 .myitem span{ padding: 5px 0px; } <div v-for="item in myscoreList" class="list-group-item myitem " > <span style="width: 10%">{{item.userName}}</span> <span style="width: 10%">{{item.courseName}}</span> <span style="width: 10%">{{item.score}}</span> <span style="width: 50%">{{item.appraise}}</span> <span style="width: 10%">{{item.createTime}}</span> <span style="width: 10%" class="mydel">删除</span> </div>
使用类选择器选择后代中多个标签
<!-- 选择class为input-group的后代div input--> .input-group div,input{ margin: 0 0.5rem; } <div class="input-group"> <label>选择平台：</label> <div> <input type="checkbox" class="form-check-input check-box" name="platform" value="天猫" title="天猫"/>天猫 </div> <div> <input type="checkbox" class="form-check-input" name="platform" value="京东" title="京东"/>京东 </div> <div> <input type="checkbox" class="form-check-input" name="platform" value="拼多多" title="拼多多"/>拼多多 </div> </div>
2.类与元素结合
选择元素class属性中包含某个class的元素
label.wrapper-item { width: 25%; } <label for="name" class="layui-form-label"> <span class="we-red">*</span>姓名 </label>
定义带有某个class属性的a标签的hover状态
a.duihuan:hover{ opacity: 0.8; color: white; } <a v-if="userId!=''" class="duihuan">我要兑换</a>
【2】那些定位
① position
position有3个属性是我们平常用的最多的，即fixed，absolute，relative。定位基本遵循“子绝父相” ，子元素绝对定位，父元素相对定位。
① absolute
绝对定位，是相当于父元素（或者父父元素）的定位，不遵循文档流；也不占据空间。后来者居上，后边的元素会被顶到它使用绝对定位之前的位置。
② relative
相对定位，是相当于定位之前自身的位置，遵循文档流，定位之前的区域不会被顶替，还在原来占据着位置。定位之后的区域，不占据任何位置
③ fixed
固定定位，顾名思义，会固定在某一个位置，是相对于浏览器窗口的定位。不遵循文档流。用的最多的是APP等软件搜索框固定在最头上、最顶部，网页两端的广告固定。
什么是文档流？
文档流是从代码中，块级元素按照从上到下、行内元素从左到右顺序执行代码的流程。
④ 浮动Float
- 相当于绝对定位，脱离文档流/
- 浮动的属性常用包括left、right
- 相对定位可以和浮动一起用，绝对定位和浮动一起使用会把浮动效果删除。
【3】@media
CSS中@规则是由@符号开始的，例如@import，@page等。@media就是其中的一个规则。
@media可以让你根据不同的屏幕大小而使用不同的样式，这可以使得不需要js代码就能实现响应式布局。
不过@media只能用于较新的浏览器，对于老式的IE，不支持。
@media的语法比较简单，一眼就能看懂。
@media mediatype and|not|only (media feature) { CSS-Code; }
实例一：当屏幕高度大于900时，设置某个div高度
@media only screen and (min-height:900px) { .banner { height: 800px; } }
【3】段落文本
① 多行截取
如限制两行，多余备份截取用...替代：
.multi-line { font-size: 16px; height: 44px; width:400px; display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */ -webkit-line-clamp: 2; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */ overflow: hidden;/* 超出的文本隐藏 */ text-overflow: ellipsis; /* 溢出用省略号显示 */ } .multi-line { min-height: 2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; overflow: hidden; }
② 单行截取
// 单行截取 .single-line { width:400px; overflow:hidden; /*超过部分不显示*/ text-overflow:ellipsis; /*超过部分用点点表示*/ white-space:nowrap;/*不换行*/ }
white-space: nowrap; 规定段落中的文本不进行换行：
text-overflow: ellipsis;显示省略符号来代表被修剪的文本。
③ 文字换行
<div style="width=100px;word-break:break-all; word-wrap:break-word;white-space:pre-wrap;"> 这里是文字内容 </div>
white-space
这个属性声明建立布局过程中如何处理元素中的空白符。
- pre-wrap表示：保留空白符序列，但是正常地进行换行。
- 默认值normal表示：空白会被浏览器忽略。
自动换行 word-break:break-all和word-wrap:break-word
一般这两个属性都会加上 height-auto;white-space:normal;
共同点：word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
不同点：
word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
【4】动画
① jQuery scrollTop() 方法
返回 <div> 元素的垂直滚动条位置：
$("button").click(function(){ alert($("div").scrollTop()); });
定义和用法
scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
提示：当滚动条位于最顶部时，位置是 0。
当用于返回位置时：该方法返回第一个匹配元素的滚动条的垂直位置。
当用于设置位置时：该方法设置所有匹配元素的滚动条的垂直位置。
语法
//返回垂直滚动条位置： $(selector).scrollTop() //设置垂直滚动条位置： $(selector).scrollTop(position)
② CSS transition 属性
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } div:hover {width:300px;}
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。
③ CSS transform缩放
div.product-image{ overflow: hidden; margin-bottom: 40px; } div.product-image img{ transition: all 0.6s; height: 100px; width: 200px; } div.product-image img:hover{ transform: scale(1.2); } <div th:if="${goods!=null}" class="product-image"> <img th:src="${'/file/fileDown?saveName='+goods.goodsPic1}" > <span style="font-size: 20px;">[[${goods.name}]]</span> <span>价格：<span>[[${goods.price}]]</span></span> <a class="purchase">购买</a> </div>
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。
跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩放倍数。
当x或y取值为0~1之间时，元素进行缩小；当x或y取值大于1时，元素进行放大
④ animation实现消息左右滚动
.messageBox p{ overflow:hidden; animation-name: HMove; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes HMove{ from {transform:translateX(0px);} to {transform:translateX(100px);} } //鼠标悬停事件，使动画停止 .messageBox p:hover{ cursor: pointer; animation-play-state:paused; color: #1E9FFF; } <div class="messageBox"> <p>您有一条新消息，点击查看</p> </div>
效果如下图箭头所示，会左右滚动。
【5】修改标签样式
① input
修改placeholder样式：
input::-webkit-input-placeholder { color: #aab2bd; font-size: 12px; }
设置文字居中：
input{ text-align: center; }
② 边框/盒子阴影
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
语法：
box-shadow: h-shadow v-shadow blur spread color inset
| 值 | 描述 |
| h-shadow | 必需。水平阴影的位置。允许负值 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影 |
.dianyingjjdiv{ box-shadow: 1px 1px 5px 3px #eeeeee; padding:15px; }
在Chrome上解析如下：
显式效果如下：
③ 渐变背景色
background: linear-gradient(to right, rgb(17, 112, 210), rgb(8, 179, 68)), rgb(17, 112, 210);
【6】宽高自适应
① vw和vh
width: 1vw; 等于 可视窗口 宽度的1% height: 1vh; 等于 可视窗口 高度的1%
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
例如 ：设置div元素的高度为当前窗口高度-100px
div{ height: calc(100vh - 100px); }
② 子左右dIV自动等高
如下所示，父div有两个子div，在保证左右排列的前提下想要使其自动等高。
<div class="wrap "> <div></div> <div></div> </div>
这里推荐使用css3盒模型 display:box
不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。
.wrap { display: -webkit-box; overflow: hidden; width: 100%; margin: 10px auto; }
其中with以及子div的排列样式根据需要自己调整。
【7】flex布局
① 两端对齐
比如 要求ul下的li每行四个，中间间隔但是需要两段对齐，如下图所示：
这是除了基本的flex布局外，还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。
.hl_list{ width: 100%; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; } .ul_list .hl_list li{ width: 25%; padding: 0 10px; } .ul_list .hl_list li:nth-of-type(4n+1){ padding-left: 0; } .ul_list .hl_list li:nth-of-type(4n+4){ padding-right: 0; }
② 单行截取多余的
display: flex; flex-wrap: nowrap; overflow-x: hidden;
flex-wrap: nowrap;规定item不换行。
overflow-x: hidden;规定X轴的超出隐藏
③ 子元素宽度不变
父元素设置flex布局，需要保证某个子元素宽度不变，可以为子元素设置属性如下：
flex-shrink: 0
子元素不设置 flex-shrink: 0 时子元素会随父元素宽度自动等分总宽度，子元素设置的宽度会自动失效
