/* <!--1. 盒子阴影 --> */
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
box-shadow: 10px 10px 5px #888888;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
rgba() // background: rgba(255,0,0,0.6); //背景透明
R：红色值。正整数 （0~25
G：绿色值。正整数 （0~255）
B：蓝色值。正整数（0~255）
A：透明度。取值0~1之间
/* <!--2. CSS属性书写顺序(重点) --> */
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
/* <!--3, 引入CSS样式 --> */
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> //行内式（内联样式） 书写方便，权重高
<style type="text/CSS">
选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2;} //内嵌样式 部分结构和样式相分离
</style>
<link rel="stylesheet" type="text/css" href="css文件路径"> //外链式 完全实现结构和样式相分离
/*4, CSS选择器 */
.class h3{color:red;font-size:16px;} //后代选择器
.class>h3{color:red;font-size:14px;} //子元素选择器
div+p{background-color:yellow;} //相邻兄弟选择器 选择紧接在另一元素后的元素，且二者有相同父元素。1个
div~p{background-color:yellow;} //后续兄弟选择器 选取所有指定元素之后的相邻兄弟元素。多个
.one, p , #test {color: #F00;} //并集选择器 集体声明
p.one 选择的是： 类名为 .one 的 段落标签 //交集选择器 既有标签一的特点，也有标签二的特点
a:hover /* 鼠标移动到链接上 */ //链接伪类选择器
/*5, css3 属性选择器 */
属性选择器的权重是 10
E[att] 选择具有att属性的E元素 //button[disabled] 既是button 又有 disabled 这个属性的元素
E[att="val"] 选择具有att属性且属性值等于val的E元素 //input[type="search"] 属性等于值
E[att^="val"] 匹配具有att属性、且值以val开头的E元素 //div[class^="icon"] {color: red;}
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素 // div[class$="icon"] 以某个值结尾的
E[att*="val"] 匹配具有att属性、且值中含有val的E元素 //div[class*="icon"] 可以在任意位置的
/*6, css3 伪类选择器 */
E:first-child 匹配父元素中的第一个子元素 // ul li:first-child{}
E:last-child 匹配父元素中最后一个元素 // ul li:last-child
E:nth-child(n) 匹配父元素中的第n个子元素 // ul li:nth-child(2){} 选择父元素里面的第n个孩子，它不管里面的孩子是否同一种类型
E:first-of-type 指定类型E的第一个 // ul li:first-of-type
E:last-of-type 指定类型E的最后一个 // ul li:last-of-type
E:nth-of-type(n) 指定类型E的第n个 // ul li:nth-of-type(2) 选择父元素里边的 第n个同类型的孩子
E:nth-child(even) 匹配父元素中的偶数子元素 //ul li:nth-child(even){}
E:nth-child(odd) 匹配父元素中的奇数子元素
/*7, css3 伪元素选择器 */
1. E::before： 在E元素前插入一个元素
2. E::after： 在E元素后插入一个元素
因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
伪元素和标签选择器一样，权重为 1
伪元素只能给双标签加 不能给单标签加
伪元素里面必须写上属性 content:""
div::before {
content: "我";
display: inline-block;
width: 100px; height: 100px;
background-color: pink;
}
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after { /*小三角通过微元素来处理 ： 通过只显示两个方向的边框来控制显示三角*/
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s; /* transition：过渡，有动画过程 ；all代表所有变化属性都做动画*/
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
/*8, font字体 */
font-size:大小 font-family:"微软雅黑"; font-weight:字体粗细 400 等同于 normal，而 700 等同于 bold 加粗
font-style:字体风格 //italic 斜体 normal
/*9, CSS外观属性 */
color:文本颜色 //预定义的颜色值 red 十六进制 #FF0000 RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
text-align:文本水平对齐方式 left 默认 center right 设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
height:行间距 //一般情况下，行距比字号大7.8像素左右就可以了
line-height 等于 height 文字会垂直居中
text-indent:首行缩进 // text-indent: 2em; 或 20px
text-decoration 文本的装饰 // none取消下划线 underline下划线 也是我们链接自带的 line-through 定义穿过文本下的一条线 //overline文本上面一条线
text-transform 文本转换 所有字句变成大写或小写字母，或每个单词的首字母大写 //uppercase 字母大写 //lowercase字母转小写 //capitalize字母首字母大写
vertical-align 设置元素的垂直对齐
word-spacing 设置字或单词间距
letter-spacing 设置单个字符间距
text-shadow 设置文本阴影 //text-shadow: h-shadow v-shadow blur color; text-shadow: 2px 2px #ff0000;
注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。
/*10, 标签显示模式转换 display */
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
/*11, CSS 背景 */
background-color:颜色值; 默认的值是 transparent 透明的
background-image : none | url (url) //url(images/demo.png);
background-repeat : repeat | no-repeat | repeat-x | repeat-y //背景平铺
background-position: x坐标 y坐标 //背景位置
background-position : top | bottom | left | right | center 方位名词
background-attachment : scroll | fixed // 背景附着
scroll 背景图像是随对象内容滚动 fixed 背景图像固定
background: transparent url(image.jpg) repeat-y scroll center top //背景简写
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; //给不同的图片设置多个不同的属性
}
/*12, CSS 三大特性 */
CSS层叠性
CSS继承性: 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
CSS优先级: !important > style="" > ID > 类，伪类 > 标签 > 继承或者 *
数位之间没有进制，级别之间不可超越
div{color: pink!important;}
/*13, css 盒子模型 */
内容 + border + padding + margin
border : border-width || border-style || border-color //1px solid red; //none
padding: 盒子会变大 ,如盒子没有宽度不影响 padding:10px 5px 15px 20px; 上又下左 //padding-bottom
margin: 块级盒子水平居中 margin: 0 auto; //盒子必须指定了宽度（width）
清除元素的默认内外边距: * {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
外边距合并问题:
相邻块元素垂直外边距的合并**取两个值中的较大者** //也称外边距塌陷
解决方案：尽量给只给一个盒子添加margin值
嵌套块元素垂直外边距的合并（塌陷） 合并后的外边距为两者中的较大者
**解决方案：**
1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden
/*14, 去掉列表默认的样式 */
li { list-style: none; }
/* 倒圆角 */
border-radius:length;
圆角矩形设置4个角: border-top-left-radius:20px; border-top-right-radius:20px;
border-bottom-right-radius:20px; border-bottom-left-radius:20px;
如果4个角，数值相同: border-radius: 15px;
里面数值不同简写: border-radius: 左上角 右上角 右下角 左下角;
/*15, CSS 布局的三种机制 */
普通流: 块级元素会独占一行，从上向下顺序排列；行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
浮动: 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
定位: 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效,有层叠的概念
/* float */
选择器 { float: left/right; }
盒子浮起来了,标准流的盒子会跑到浮动盒子底下 ,不占有原来位置,和我们前面的行内块极其相似。元素之间没有空白缝隙
浮动元素与父盒子的关系: 子盒子的浮动参照父盒子对齐
浮动元素与兄弟盒子的关系: 如果前一个兄弟盒子是: 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
清除浮动: 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
父级overflow:hidden;
/* 设置版心 */
.w {
width: 1200px;
margin: auto;
}
/* position */
/* position 属性的五个值： */
将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
定位 = 定位模式 + 边偏移 img { position: 属性值; right:10px; top: 20px; }
相对定位(relative): 相对于自己原来在标准流中位置来移动的,原来在标准流的区域继续占有
绝对定位(absolute): 元素以带有定位的父级元素来移动位置 ,不占位置, 父元素没有定位，则以浏览器为准定位
结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。
固定定位(fixed) : 完全不占位置, 只认浏览器的可视窗口, `浏览器可视窗口 + 边偏移属性` 来设置元素的位置,不随滚动条滚动。
绝对定位的盒子居中:
div {left: 50%; top: 50%; margin: -50px -100px;} //让盒子向左向上移动自身宽度的一半。
堆叠顺序（z-index）:在使用定位布局时，可能会出现盒子重叠的情况, 后来者居上
div {z-index : 2} 正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上
只能应用于相对定位、绝对定位 和 固定定位的元素
定位改变display属性: 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
span {position: absolute; top: 200px; width: 300px; height: 300px; background-color: purple;}
注意：我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
/*16, CSS高级技巧 */
/* 元素的显示与隐藏 */
display: //设置或检索对象是否及如何显示。
display: none 隐藏对象 //隐藏之后，不占位置
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
visibility 可见性: //设置或检索是否显示对象。
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏 //占位
overflow 溢出: //检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
inherit 规定应该从父元素继承 overflow 属性的值。
auto 超出自动显示滚动条，不超出不显示滚动条
div{
width: 100px; height: 200px; background: lightblue;
overflow: visible; //超出部分的文字处理方式
}
/*17, CSS用户界面样式 */
鼠标样式cursor:
default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
轮廓线 outline:
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
是我们都不关心可以设置多少，我们平时都是去掉的。 outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
防止拖拽文本域resize:
<textarea style="resize: none;"></textarea>
/* vertical-align 垂直对齐: */
vertical-align : baseline |top |middle |bottom
它只针对于行内元素 或者 行内块元素, 特别是行内块元素，通常用来控制图片/表单与文字的对齐
去除图片底侧空白缝隙:
默认的图片会和文字基线对齐: 用vertical-align : middle对齐
给img 添加 display：block; 转换为块级元素就不会存在问题了。
/* 溢出的文字省略号显示: */
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow 文字溢出:
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*18, CSS精灵技术 */
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
css精灵技术主要针对于背景图片, 背景定位基本都是 负值。
- background-image、 - background-repeat - background-position属性进行背景定位
background: url(images/index.png) no-repeat -157px -107px;
/*19, 背景渐变 */
background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);
/* linear:线性，gradient： [ˈgreɪdiənt] 变化率，理解为渐变*/
- 背景渐变必须添加浏览器私有前缀
- 起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top
/* // 改变input框默认提示颜色 */
input::-webkit-input-placeholder {
color: #8DB2ED;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #8DB2ED;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #8DB2ED;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #8DB2ED;
}
/*20, <!-- 滚动条样式: --> */
/*滚动条*/
#playback-wrap .playback-list .playback-item::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px;
}
#playback-wrap .playback-list .playback-item::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
#playback-wrap .playback-list .playback-item::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
/* 好看的样式例子 */
/* 表格滚动条样式 */
.t-body::-webkit-scrollbar {
/*滚动条整体样式*/
width: 1px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
/*滚动条里面小方块*/
.t-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent);
}
/*滚动条里面轨道*/
.t-body::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 10px;
}
/* 21,CSS 链接 */
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）
a:link {color:#000000;} /* 未访问链接*/ //a标签
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF; text-decoration:underline;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
/* 22,CSS 列表 */
ul.a {list-style-type: circle;} //小圆点
ul.b {list-style-type: square;} //方形
ol.c {list-style-type: upper-roman;} //罗马数字
ol.d {list-style-type: lower-alpha;} //字母
/* 如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案 */
ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
/* 23,CSS 边框 */
/* 上->右->下->左 */
p.none {border-style:none;} //无边框
p.dotted {border-style:dotted;} //点线边框
p.dashed {border-style:dashed;} //虚线边框
p.solid {border-style:solid;} //实线边框
p.double {border-style:double;} //双边框 两个边框的宽度和 border-width 的值相同
p.groove {border-style:groove;} //凹槽边框 效果取决于边框的颜色值
p.ridge {border-style:ridge;} //垄状边框 效果取决于边框的颜色值
p.inset {border-style:inset;} //嵌入边框 效果取决于边框的颜色值
p.outset {border-style:outset;} //外凸边框 效果取决于边框的颜色值
p.hidden {border-style:hidden;} //隐藏边框
/* 24,清除浮动 */
.text_line{clear:both;}
/* 25,居中对齐 */
元素居中对齐
.center {
margin: auto;
width: 50%; //注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
border: 3px solid green;
padding: 10px;
}
图片居中对齐
img {
display: block;
margin: auto;
width: 40%;
}
/* 26.背景渐变 https://www.runoob.com/css3/css3-gradients.html*/
background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);
/* linear:线性，gradient： [ˈgreɪdiənt] 变化率，理解为渐变*/
- 背景渐变必须添加浏览器私有前缀
- 起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top
div {
width: 600px;
height: 200px;
/* 背景渐变必须添加浏览器私有前缀 */
/* background: -webkit-linear-gradient(left, red, blue); */
/* background: -webkit-linear-gradient(red, blue); */
background: -webkit-linear-gradient(top left, red, blue);
}
语法: background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow); //右
background-image: linear-gradient(to bottom right, red, yellow); //下
background-image: linear-gradient(-90deg, red, yellow); //角度
background-image: linear-gradient(red, yellow, green); //多颜色
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); //彩虹
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); //透明度
}
径向渐变: background-image: radial-gradient(shape size at position, start-color, ..., last-color);
/* 27,CSS3 创建多列 */
column-count 属性指定了需要分割的列数。
column-gap 属性指定了列与列间的间隙。
column-rule-style 属性指定了列与列间的边框样式：
column-rule-width 属性指定了两列的边框厚度:
column-rule-color 属性指定了两列的边框颜色：
column-width 属性指定了列的宽度。
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
