CSS 层叠样式表

## CSS 层叠样式表（表现层） ##
为了解决内容与表现分离的问题。

css的引入方式：

1.浏览器缺省设置。
2.内联样式。 如＜p style=”xx”＞＜/p＞
3.内部样式表。写在＜head＞标签内
4.外部样式表。＜link rel=”stylesheet” href=”xxx.css”＞
优先级：就近原则。
注释：/…/
css样式：由选择器和声明组成。
声明：由属性和属性值组成。
例：p { color : red ; }

css选择器：

元素选择器。
ID选择器“唯一” ———- 如：id = “box” => #box {xx:xx;}
类选择器———————– 如：class = “cl” => .cl {xx:xx;}
通配选择器：—————- *{ } （表示选中所有的元素）
后代选择器：—————–选1（空格）选2 { }
子代选择器：—————–选1 > 选2 { }
相邻选择器：—————–选1 + 选2 { } （仅选中后面第一个兄弟元素）
兄弟选择器：—————–选1 ~ 选2 { } （选中后面所有的兄弟）
伪类选择器：
——:first-child { }
——:last-child { }
——:nth-child(n) { }
————数字：表示选中第n个子元素
————odd： 奇数项
————even：偶数项
———— 5n+5: 5的倍数项
群组选择器： 多个选择器共用一组样式用“，”隔开
选择器优先级：!important > ID > 元素 >类

鼠标事件：

:link————– 未访问
:visited———-已访问
:hover———–鼠标在上
:active———–点击时

颜色的表示：

1.英文单词
2.十六进制数字———–（#000000-#ffffff）
3.三原色——————– rgb(0-255,0-255,0-255）
4.带透明度的颜色——— rgba(0-255,0-255,0-255,0-1)
opacity : 0.5 ;————–透明度（0-1之间）

背景图片：

background-img:url( );—————- 图片地址
background-repeat:xxx;—————是否平铺
——- repeat; ——————-// 平铺
——–no-repeat;—————-// 不平铺
——–repeat-x; —————- // 横向平铺
——–repeat-y; —————–// 纵向平铺
background-size:xx;——————–尺寸
——-值：100%; 100%,100%; 50px 100px; 50px auto;
—— cover;——————— // 图片真实大小
——-contain;—————— // 等比例缩放至一侧与容器一致
background-attachment:xxx;——–背景图片是否随页面滚动
——-fixed;——————— // 固定，不滚动
——-scroll;———————// 随页面滚动
——- local;——————– // 相对于元素内容滚动
background-position:xx xx; ———背景图片的位置
——-xx:center left right top 数值 百分比

字体样式：

font-style:normal;—————-样式
——–normal;————// 正常
——–italic/obligue—-// 斜体
font-weight:normal;————-字体粗细
——–normal;———- // 正常 200
——- bold; ———— // 粗体 400
——- bolder;———- // 特粗 900
——- lighter;———- // 细 100
font-family:xx;———————字体设置（楷体、宋体、微软雅黑、仿宋…）
font-size:xx; ————————字体大小（pc端使用px、移动端使用rem）

文本样式

text-indent:2em;——————-首行缩进2个汉字长度（2px…）
text-overflow:xxx;——————文本超出容器处理
———clip;————–// 裁剪
———ellipsis;——— //显示省略号
white-space:nowrap;————-不自动换行
overflow:xxx;————————内容超出范围时处理
ovarflow-x:xxx;
overflow-y:xxx;
———hidden;———// 隐藏
———scroll;————//显示滚动条
———auto;————-//自动处理（有无滚动条）

text-align:xxx;————————文本对齐方式
———left;—————// 左对齐
———right;————-// 右对齐
———center;———–// 居中对齐
———justify;————// 两端对齐

text-transform:xxx;—————–设置字体大小
———none;————-// 无转换
———capitalize;——-// 首字母大写
———uppercase;——// 全部转成大写
———lowercase;——-// 全部转成小写

text-decoration:xxx;—————设置文本装饰线
———none;————-// 无效果
———underline;——-// 下划线
———overline;———// 上划线
———line-through;—// 贯穿线

text-shadow:xxx;——————-设置阴影及模糊效果
———5px 5px 5px red——–代表：x偏移量、y偏移量、模糊度、颜色

letter-spacing:xxx;——————设置文本字体间隔
———normal;———-// 默认
———10px;————-// 具体值

word-spacing:5px;——————单词间隔

verticl-align:xxx;———————-设置文本内容对齐方式
———top;—————// 顶部对齐
———bottom;———// 底部对齐
———middle;———-// 居中对齐

direction:xxx;————————–设置文本流方式
———ltr;—————–// 从左到右
———rtl;—————–// 从右到左

line-height:xxpx;———————-设置行高

列表样式

liststyle:xxx;—————————–设置列表的样式
list-style-image:url();—————–将图片作为列表项的标记
list-style-position:xxx;—————-列表标记位置
——–outside;———–// 放在文本之外，环绕文本不根据标记对齐
——–inside;————-// 放在文本之内，环绕文本根据标记对齐
list-style-type:xxx;———————列表标记样式
——–none;————–// 无标记
——–disc;—————// 实心圆
——–circle;————-// 空心圆
——–spuare;———–// 实心方块

内容样式

context:”xxx”;————————设置一个元素的内容
伪元素、伪选择器：
xx:after { }———————————在元素之后
xx:before { }——————————在元素之前

表格样式

table,tr,td {
border-collapse:collapse;————–去掉间隙
border-spacing:5px;———————设置间隙（不能同时使用）
}

鼠标光标样式

cursor:xxx;———————————设置鼠标光标样式
——–default;———–// 正常选择
——–help;————–// 帮助
——–wait;————–// 忙
——–crosshair;——-// 精确选择，十字光标
——–text;————–// 文本选择
——–pointer;———// 手型
——–move;————// 移动
——–s-resize;———// 垂直调整
——–w-resize;———// 水平调整
——–se-resize;——–// 对角线调整1
——–ne-resize;——–// 对角线调整2

css盒模型

zoom:xx;———————————–（数字/百分比）定义缩放
box-sizing:xxx;—————————容器尺寸规则
——–border-box;——// 含内边距，含边框
——–content-box;—–// 无内边距，无边框
outline:xxx;——————————–元素外边框
——–outline-none;————–// 无
outline-width:20px;——————– 设置外边框宽度
outline-style:xxx;————————设置外边框样式
——–solid;—————// 实线
——–dashed;———–// 虚线
——–dotted;————// 点线
——–double;————// 双线
……
outline-color:xxx;————————外边框颜色
outline-offset:xxx;———————–外边框偏移
margin————————————-外边距
border————————————–边框
padding————————————内边距
border-radius:xx;————————圆角效果（尺寸/百分比）

// css内定义的width和height指的是内边距以内的内容范围
顺序：top、right、bottom、left
例：
padding:5px;————————// 表示上下左右的内边距都为5px
padding:5px 3px;——————// 表示上下为5px ,左右为3px
padding:5px 3px 2px;————// 表示上为5px，左右为3px，下为2px
padding:5px 3px 2px 1px;——// 表示上，右，下，左，分别为……
合写：border:width style color;
例：border:1px solid red;
分写：border-top:xxx;

元素显示类型

display:xxx;——————————–元素显示类型
——none;————-// 不显示，隐藏且不显示位置
——block;————-// 块元素，独占一行
——inline;————-// 行元素，并排显示，不能设置宽高
——inline-block;—-// 行内块级元素，并排显示，可设置宽高
visibility:xx;——————————–设置元素是否可见
——hidden;———–// 隐藏但显示位置
——visible;————// 可见

浮动/定位布局

css布局模型

流动模型（默认）
1. 块状元素—–从上到下排列
2. 行内元素—–从左到右排列

浮动模型（行内块级元素）

float:xxx;———————————–浮动
——none;————-// 无浮动
——left;—————-// 浮动靠左
——right;————–//浮动靠右
浮动元素脱离文本，父元素不被撑开，背景不显示。
必要时清除浮动对兄弟元素的影响
clear:xx;————————————清除浮动
——both;————–// 左右两侧浮动清除
——left;—————// 左侧…
——right;————–// 右侧…
——none;————-// 不清除浮动
——inherit;————// 继承父元素的值
清除浮动常用方式：
使用css的:after伪元素清除浮动。
给浮动元素的父元素使用。
首先给其父元素增加class属性class=”cl”

.cl:after {
    content:'.';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

定位

position:xxx;—————————–定位
——static;————–// 默认布局（不设置）
——fixed;————–// 固定定位
——relative;———-// 相对定位
——absolute;———// 绝对定位
设置位置：（必须在设置了定位之后才能使用）
left:xx;
right:xx;
top:xx;
bottom:xx;
// 其值可以是具体尺寸，也可以是百分比（相对于父元素）
注意：
1.固定定位：相对于浏览器窗口的定位，不随页面滚动而滚动。
2.相对定位：参照自身原本所在的位置，不影响周围元素。
3.绝对定位：参照离它最近的已设置定位的祖先元素，脱离本体，影响周围元素的位置。

层叠顺序

z-index:n;——————————–层叠顺序（数字）
// 值越大越考上，必须先设置定位

行内元素的布局

vartical-alihn:xxx;———————-行内元素对齐方式
// 定义行内元素的基线相对于其所在行的基线
——top;—————// 顶部对齐
——baseline;———// 底部对齐
——text-top;———// 与文本顶端对齐
——middle;———-// 与父元素中部对齐
——text-bottom;—// 与父元素底部对齐
——bottom;———// 元素顶端与行内最低元素顶端对齐
——super;————// 垂直对齐文本上标
——sub;—————// 垂直对齐文本下标

动画/过渡效果

一般过渡

transition-property:xxx;——————-参与过渡的属性
// width,henght,……(all)
transition-duration:3s;———————过渡的时间
transition-timing-function:xx;————过渡曲线
——linear;————-// 线性过渡
——ease;—————// 平滑过渡
——ease-in;———–// 由慢变快
——ease-out;———// 由快变慢
——ease-in-out;——// 慢>快>慢
——cubic-bezier(x,x,x,x)——// 4个[0-1]的数值，贝兹曲线
简写：
transition:all,1s,ease;
例：

.box {
   width:100px;
   height:100px;
   transition:all,1s,ease;
}
.box:hover {
   width:300px;
   height:200px;
}

css动画

animation:名字、时间、速度、延时、重复次数、反向；
animation-name:xxx;—————————–动画名称
animation-duraturn:3s;————————–动画时间
animation-time-function:ease-in;————动画曲线（ease/ease-in/ease-in-out）
animation-delay:3s;——————————-动画延时时间
animation-iteration-count:infinite;————循环（无限、数字）
animation-direction:xxx;————————-是否反向交替（normal：默认正常、alerante：反向交替）

@keyframes name {
from / 0% { }
to / 100% { }
}

颜色渐变

线性渐变
background:linear-gradient(方向，颜色1，颜色2，……);
方向：默认 由上到下
to left————————–从右到左
to right bottom————-从左上到右下
45deg————————顺时针计算（0在12点方向）
重复效果：
background:repeating-linear-gradient(方向，颜色1，颜色2，……，所占比(百分比)）

径向渐变
background:radial-gradient(
中心点(可略，两个参数)，
形状（circle圆形，ellipse椭圆默认） 尺寸大小（closest-side，farthest-side，closest-corner，farthest-corner），
颜色1，颜色2，……);
重复效果同上……

二D变换：

transform:xxx;———————————-2D变换（元素位置空间不变）
——translate(x,x,x);—————-// 平移
——translateX(xx);—————–// x轴平移
——translateY(xx);—————–// y轴平移
——translateZ(xx);—————–// z轴平移
// 其值可以是具体的尺寸，也可以是百分比（自身的百分之几）
——rotate(x,x,x);——————-// 旋转（单位deg(度)，turn(圈) ）如：10deg
transform-origin:center;———————设置旋转中心
// 其值表示的是相对于其自身左上角的坐标，一般写两个值：center，left，right，具体尺寸
——scale( );————————–// 缩放（数字）一般有两个值，表示：宽度和高度分别变为原来的多少倍

三D变换：

父元素设置：
transform-style:float 2D;
transform-style:preserve 3D;
景深设置：
perspective:xxpx;——————————-放在父元素或本身上都可以
transform:translateZ(50px);——————z轴平移
transform:rotateX(xxdeg);——————–x轴旋转
scaleX(2);——————————————缩放
skewX(10deg);———————————–倾斜
transform-origin:xx;—————————-旋转中心（center,left,right,top,bottom,xxpx）

Flex弹性布局

首先给父元素添加属性：display:flex;
块级元素：flex;
行内元素：inline-flex;
Flex布局之后，子元素的float，clear和vertical-align将失效。
采用Flex布局的元素称为Flex容器。
容器默认存在两个轴：
水平的主轴：main axis
垂直的交叉轴：cross axis
主轴：开始 main start，结束 main end
交叉轴：开始 cross start，结束 cross end
子项目默认沿主轴方向排列
单个项目占据主轴空间叫 main size
占据交叉轴空间叫 cross size

属性用于父元素

1.定义主轴的方向，即项目的排列方向：
flex-direction:xxx;
row;—————————-// 主轴在水平方向，起点在左端（默认）
row-reverse;—————–// 水平方向，起点在右端
column;———————–// 垂直方向，起点在上沿
column-reverse;————// 垂直方向，起点在下沿

2.定义一条轴线排不下，如何换行
flex-wrap:xxx;
nowrap;———————-// 不换行
wrap;————————–// 换行，第一行在上方
wrap-reverse;—————// 换行，第一行在下方

3.flex-direction 和 flex-wrap 简写：
flex-flow:xxx xxx;

4.定义项目在主轴上的对齐方式、
justify-content:xxx;
flex-start;———————// 左对齐（默认）
flex-end;———————-// 右对齐
center;————————-// 居中对齐
space-between;————-// 两端对齐，中间间隔平均分配
space-around;—————// 每个项目两端间隔相等

5.定义项目在交叉轴上的对齐方式
align-items:xxx;
flex-start;———————// 起点对齐（默认），顶部对齐
flex-end;———————-// 终点对齐
center;————————-// 居中对齐
baseline;———————-// 项目的第一行文字基线对齐
streth;————————–// （默认）如果项目未设置高度或设置为auto，将占满整个容器的高度

6.定义了多根轴线的对齐方式
如果项目只有一根轴线则不起作用
align-content;xxx;
flex-start;———————// 与交叉轴起点对齐
flkex-end;———————// 与交叉轴终点对齐
center;————————-// 与交叉轴中点对齐
space-between;————-// 与交叉轴两端对齐，轴线之间间隔平均分配
space-around;—————// 每根轴线两侧间隔相等
streth;————————–// （默认）轴线占满整个交叉轴

属性用于子元素

1.定义子元素的顺序，值越小越靠前。
order:xxx;———————// 0,1,2,3…（默认 0）

2.定义项目的放大比例 （默认 0）
即如果存在剩余空间也不放大。
flex-grow:xxx;—————-// 1,2,3…

3.定义缩小比例 （默认 1）
即如果空间不足，该项目将缩小。
flex-shrink:xxx;—————// 1,2,3…

4.定义在分配多余空间之前，项目占据的主轴空间 （默认 auto）
flex-basis:xxx;—————-// 如 100px；

5.简写（flex-grow / flex-shrink / flex-basis）
flex:xxx xxx xxx;

6.align-self 允许单个项目与其他项目有不一样的对齐方式
可覆盖 align-items 属性（默认 auto）