层叠样式表
1.应用
css嵌入到html头部的style标签内
css嵌入到元素style属性内
css单独写入到.css文件中，然后通过link引入到html
rel=stylesheet type=text/css
2.语法
注释： /*注释内容*/
选择器{
规则名：规则值；
}
3.选择器
（1）分类：
①核心选择器
id选择器 唯一，利用html元素的id属性 #one
class选择器 非唯一，利用html元素的class属性 .one
标签选择器 利用标签名进行选择 标签名
并且选择器 div.box{} 选中div元素，并且这个div的class为box
和选择器 div,.box{} 选中div元素和class为box元素
普遍选择器 *{} 选中所有元素
②层次选择器（多个选择器配合使用）
子选择器 通过父元素选择子元素 >
后代选择器 空格
兄弟选择器 当前元素之后的所有元素 ~
当前元素之后的下一个兄弟 +
③属性选择器（属性过滤器） 一般应用在表单元素
input[name] 具有name属性的input元素
input[name=”username”] 具有name属性并且属性值为username的input元素
input[name^=”u”] 具有name属性并且属性值以u作为开始的input元素
input[name$=”u”] 具有name属性并且属性值以u作为结尾的input元素
input[name*=”u”] 具有name属性并且属性值包含u的input元素
④伪类选择器（伪类过滤器）
：hover 光标悬浮
：visited 访问过的
：active 激活
：focus 聚焦
：nth-child(n) 第n个孩子阶段
：nth-child(2n+1) 1、3、5.....
：nth-child(even) 偶数
：nth-child(odd) 奇数
：first-child 第一个孩子
：last-child 最后一个孩子
⑤伪元素选择器
：：after ul.menu::after{} 在class为menu的ul元素最后追加一个子元素
：：before ul.menu::before{} 在class为menu的ul元素开始追加一个子元素
（2）优先级：
①权重
当多个选择器的不同规则作用于同一个元素
style 1000
id 100
class、伪类选择器 10
元素选择器、伪元素选择器 1
②顺序
当权重值相同时，后者覆盖前者
③特权 ！important
脱离了权重和规则
4.规则
（1）字体规则
可以被继承
font-family :字体 在浏览器所在pc上从字体栈顶到底寻找字体，当没有时，使用pc上默认字体
font-size:字体大小
font-weight：字体粗细程度 100~900、 bold（类似700） bolder（比继承的更粗一点）
font-style：是否是italic（斜体）
color : 字体颜色
line-height: 行高 使用em
长度相对单位:
px 像素
em 相对于当前元素的字号 若大小为12px 行高为2em 则行高为12*2=24px
rem 相对于根元素的字号 若html的字体大小是16px,行高是2rem，则行高是16*2=32px
font: 速写 font-style,font-weight,font-size/line-height,font-family
vertical-align: 行内元素在行内的垂直排列方式
Baseline 基线对齐 默认
bottom 图片和盒子底端对齐
top 图片和盒子顶端对齐
middle 图片和文字对齐 行内元素中间位置会和父元素文字基线上方二分之一处对齐
text-top 图片和文字顶端对齐
text-bottom 图片和文字底端对齐
基线位置的确定：通常找参照物：小写字母“x”，基线位置在x的最下方
display:line-block
网络字体（应用iconfont）
- 获取字体文件
- @font-face{
font-family: “李氏字体”;
src:url（“./lszi.woff”）；
}
.logo{
font-family: “李氏字体”;
font-size:12px;
}
- 引入iconfont.css文件
- 使用 <i class=”iconfont icon-fuwufankui></i>
（2）文本规则
可以被继承
text-align： center
whitespace: 容器内的文本是否会主动换行？ nowrap不换行
overflow: 容器内的内容超出部分如何处理？ hidden超出部分隐藏（注意：使用时，容器的内容大小要超过容器本身）
text-overflow： ellipsis超出部分用...显示
text-tranform: uppercase（大写）、lowercase（小写）、capitalize（首字母大写）
text-indent：缩进
text-decoration:none 使用这个属性将a标签的下划线去掉，并且使用color设置颜色，注意不要在父标签设置颜色，因为a标签特殊，不会显示父标签颜色
text-decoration-line:line-through
text-decoration-style
text-decoration-color
（3）盒子规则
border-radius 圆角半径
margin 外边距，（上右下左）、（上下、左右）、（上、左右、下），上下外边距会重叠
border 默认为0，速写 border-width、border-style、border-color
padding 内边距，（上右下左）、（上下、左右）、（上、左右、下），
width/height 宽高
background
background-color、background-image、background-repeat、background-size
background-position、background-clip、background-orign、
background-attachment
box-sizing（盒子模型）：
content-box 内容盒子（普通盒子）默认
盒子实际的宽度： 2borderwidth+2padding+width
盒子实际的高度： 2borderwidth+2padding+height
border-box 边框盒子（怪异盒子）
盒子实际的宽度width=2borderwidth+2padding+内容宽度
盒子实际的高度height=2borderwidth+2padding+内容高度
（4）列表规则
用于设置有序列表，无序列表，自定义列表的显示方式
list-style:none;
（5）其他规则
cursor：pointer
visibility:hidden 设置内容显示与隐藏，占据屏幕空间
opacity:0 设置透明度，取值在0~1,设置0时隐藏，占据屏幕空间
display:none 设置内容隐藏，不占据屏幕空间
block 将行内元素转换为块元素
inline 将块元素转换为行内元素
inline-block 行内块元素 特点：与其他行内元素共享一行空间，可以指定宽高
overflow： scroll、auto、hidden、
overflow-x overflow-y
outline-color、 outline-width、outline-style、outline-offset
5.布局
<1>浮动布局（x轴）
float：left、right
- 脱离文档流
- 块元素的宽度不再是100%，而是由内容决定
- 块元素不再支撑父元素
- 同一层次（兄弟元素）浮动元素会在一行排列，当浮动元素宽度总和大于父元素时，会发生换行
clear: left（不与左浮动元素在同一水平线上）、right、both
用于清理浮动
<2>伸缩盒布局（x、y轴）
伸缩盒容器 div.container、ul.container
父元素：
display：flex 强制让它的子元素沿着主轴方向显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致,宽度由内容决定，宽度默认拉伸100%
flex-direction: row（默认）表示主轴是x轴 column表示主轴是y轴
flex-wrap:nowrap 当子元素的长度加起来超过主轴上的父元素宽度时，默认不换行
align-items:center 伸缩盒容器中的子元素在交叉轴的展示
justify-content:space-between 伸缩盒容器中的子元素在主轴的展示
伸缩盒元素 div、li
子元素：
flex-basis: 主轴上的基础长度（基本工资）
flex-grow : 主轴上剩余空间分配的份数（分红）
flex-shrink: 主轴上亏损空间的分摊份数（亏损）
主轴 默认主轴x轴，伸缩盒中，伸缩盒元素沿着主轴来进行排列
交叉轴 与主轴垂直的轴
<3>定位布局（z轴） position: static（静态，非定位元素）默认
relative（相对，定位元素）
absolute（绝对，定位元素）
fixed（固定，定位元素）
sticky（粘滞，定位元素）
定位元素特点：
可以使用定位规则 top、right、bottom、left
①相对定位 不脱离文档流，相对于它原来位置移动
②绝对定位 脱离文档流，相对于距离它最近的父定位元素位置移动，如果所有父元素都不是定位元素，则相对于浏览器视口移动
注意：绝对定位元素应该嵌套在相对定位元素里面 ③固定定位 脱离文档流，相对于浏览器视口移动
④粘滞定位 不脱离文档流（没有达到阈值时）
脱离文档流（达到阈值时） ，此时相当于固定定位
<4>默认文档流（y轴）
块元素，独占一行空间，高度由内容决定，块元素默认从上往下排列
6.动画（animation）
（1）定义动画帧
①@keyframes 动画名{
from{ //开始帧
margin-left:0 }
to{ //结束帧
margin-left:800px
}
}
② @keyframes 动画名{
0%{ //开始帧
margin-left:0 }
20%{
}
....
100%{ //结束帧
margin-left:800px
}
}
（2）设定动画
animation-name:move; 动画名 必须写
animation-duration:2s; 持续时间 必须写
animation-timing-function:linear; 时间曲线函数
animation-fill-mode:forwards; 填充模式，动画结束后保留哪一帧规则
animation-iteration-count:4; infinite（无限循环） 动画迭代次数
animation-direction ：alternate from--->to--->from
normal from--->to,from--->to
reverse to--->from,to--->from
alternate-reverse to--->from--->to
动画执行方向
animation-play-state:paused 动画状态
animation-delay:1s; 延迟时间
7.动画库
- 引用动画库
<link rel=”stylesheet” href=” “>
- 使用
第一种：直接调用动画设定类
<div class=”box animation_animated animation_infinite
animation_bounce”></div>
第二种：引用关键帧
<style>
.bonce{
Animation:flash 10s linear infinite
}
</style>
<div class=”box bounce”></div>
- 过渡（transition）
过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变时实行缓缓改变，一般通过伪类来触发，一定发生在属性值改变的状态下。
transition-property 过渡属性，可多个
transition-delay 过渡延迟时间
transition-duration 过渡持续时间
transition-timing-function 过渡曲线函数
- 变形（transform）
①缩放：transform:scale(2)
②平移：tranform:translate(100px,100px)
③拉伸：transform:skew(80deg)
④旋转：transform:rotate(45deg)
10.媒体查询（响应式布局）
@media 判断媒体类型（屏幕类型）
@media screen and (min-width:1200px){
//样式规则css
}
当屏幕满足上述条件，就执行该代码块内部的css
书写顺序：
min-width 从小到大写
max-width 从大到小写
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
