共计 5069 个字符，预计需要花费 13 分钟才能阅读完成。
一、在 html 中如何引入 css
- 在 style 属性中间接填写 css 款式（行内款式、内联式）
- 填写到 <style></style> 标签中（内嵌式）
-
将 css 代码写入.css 文件，在 html 文件中引入该文件（内部款式），与内嵌式优先级相当。
- 链接式 <link> 属于 html 标签，加载 html 的同时加载.css 文件
- 导入式 @import 是 css 提供的，在 html 加载实现后再加载.css 文件
二、. 选择器
2.1 外围选择器
- 标签选择器
h1{}
- 类选择器
.class{}
- id 选择器
#id {}
- 组合选择器
div.one,div.two{}
- 并且选择器
ul.nav{}
- 广泛选择器
*{}
2.2 档次选择器
- 父子选择器：
.nav > li {}
- 后辈选择器
.nav li{}
- 下一个兄弟选择器：
div.b_first + div.b_second{}
- 之后所有兄弟选择器：
div.b_first ~ div.b_second{}
2.3 伪类选择器
- :first-child
- :last-child
- :nth-child（参数）
参数：数字、表达式（n+3，从 n = 0 开始）、关键字（odd、even）
- :hover
2.4 伪元素选择器
ul::after{
clear:"both";
content:"";
display:"block"
} 2.5 属性选择器
- [name] 抉择具备 name 属性的元素
- [name=username] 抉择具备 name 属性，并且属性值为 username 的元素
- [name^=u] 抉择具备 name 属性，并且属性值以 u 结尾的元素
- [name$=u] 抉择具备 name 属性，并且属性值以 u 结尾的元素
- [name*=u] 抉择具备 name 属性，并且属性值中蕴含 u 的元素
三、优先级
- 特权
!important
- 权值
1000 style 属性
100 #id
10 .class、伪类、属性
1 标签（元素）、伪元素
- 程序
四、盒子模型
(针对于块元素探讨盒子模型)
4.1 款式
- 外边距
margin-top、margin-right、margin-bottom、margin-left
margin:0 auto（盒子居中，前提是曾经设置 width 值）
- 内边距
padding(-top/-right/-bottom/-left)
-
边框
border(-top/-right/-bottom/-left)
borde（速写模式):
- border-width
- border-style :
soliddotteddasheddouble
- border-color
（上 下 左 右、上 右左 下、高低 右左)
- 宽：width
- 高：height
4.2 盒子类型
- 怪异盒子（边框盒子）（IE8）
box-sizing:border-box
盒子宽度为：width（padding+border+ 内容宽度）
盒子在浏览器中的宽度：width + margin-left + margin-right
- 传统盒子（内容盒子）（firefox）
box-sizing:content-box
盒子宽度为：padding+border+width（内容宽度）
盒子在浏览器中的宽度：padding + border + width + margin
六、布局
6.1 浮动布局
不齐全脱离文档流，不会遮挡文本
6.1.1 浮动元素的 css 款式
float:left\right
浮动元素 默认宽度为 0 ，且失去了对父元素的撑持作用，即已脱离文档流。在浮动流中，若多个同级别元素浮动元素已占满一行，则主动换行。
6.1.2 革除浮动
-
办法一
ul::after{ clear:"both"; content:""; display:"block" } - 办法二
给父级元素增加 overflow:hidden 属性
6.2 定位布局
position: static(默认)
- relative
绝对点：该元素所在文档流中的初始地位
是否脱离文档流：不脱离
最佳实际：个别不挪动，作为绝对点
- absolute
绝对点：间隔最近的父‘定位’元素。如果没有父定位元素，那就只能绝对于浏览器视口或者将某个父元素设置为定位元素
是否脱离文档流：脱离
- fixed
绝对点：浏览器视口，并且不会随着浏览器的滚动而滚动
是否脱离文档流：脱离
- sticky
绝对点：绝对定位和固定定位的联合，达到阈值之前时绝对定位，达到阈值之后是固定定位，阈值通过 left、top、right、bottom 来设定
当 position 的取值为 relative/absolute/fixed/sticky 这四个之一。咱们就认为以后这个元素为定位元素。定位布局能够应用定位属性，比方 left、right、top、bottom
6.3 伸缩盒布局
作用：与浮动布局的作用相似，用于将一个容器中多个子元素【块元素】在一行中多列排列，罕用于响应式布局(挪动端)
应用：
<ul>
<li></li>
<li></li>
<li></li>
</ul> - ul 容器：
display:flex 让容器成为伸缩盒容器
flex-direction：row 容器中子元素的排列形式，row- 沿 x 轴排列，column- 沿 y 轴排列，即设定主轴。（穿插轴与主轴垂直）
flex-wrap:wrap/nowrap 是否容许换行
jusitfy-content:space-around 元素周围留有空白
align-items:center flex 子项在容器中穿插轴上的对齐形式，center 为居中搁置
个别给容器增加宽高，子元素在容器中排列
- li 子元素
flex-basis 主轴中基准值
flex-grow 主轴中残余空间调配所占份数
flex-shrink 主轴中若有亏损，所占亏损份数
flex 速写
七、文本规定
针对盒子内容来进行润饰，具备可继承性。
- text-align:center/left/right；
- vertical-align:middle 调整行内元素的垂直排列形式
- line-height:32px；当文字行低等于父盒子高度时，即可达到垂直居中成果
- text-decoraction:
underline/light-through/overline/none
- text-decoraction-style:
solid/dotted/dashed
- text-indent 缩进
- text-transform:
lowercase/uppercase
-
overflow(overflow-x/-y):
- visible（默认）
- hidden (在父容器上设置该属性)
- scroll
八、字体规定
- font-family
- font-size
- font-weight
- font-style
- color
- font（速写）:font-style font-weight font-size/line-height font-family;
normal normal 12px/3em “ 微软雅黑 ”
-
网络字体(https://www.iconfont.cn/）:
1. 获取字体文件
2. 在 css 定义网络字体
3. 应用
- 3.1 基准款式
- 3.2 非凡款式
- 3.3 在 html 援用
九、实体
空格
< 小于
> 大于
十、其余规定
-
display:
- block
- inline
- inline-block :
<input>、<img>、<button>、<textarea>、<label>
- 列表规定
list-style :none
- 表格规定
boreder-collapse:collapse; 当 td 增加边框，加在 table 上能够合并隔壁的边框
- opacity: div 元素的透明度级别
十一、单位
- 相对单位
10px
-
绝对单位
- 1em，em 绝对于以后元素的字体大小
- 1rem，rem 绝对于 html 元素选择器中设定的字体大小
-
色彩
- 关键字 pink、red
- 十六进制 #ffffff #000
- 函数 rgb（，，）、rgba(, ,)
十二、背景规定
- background-color: 能够与背景图共存
-
background-image:
- url(‘ 图片地址 ’)
- linear-gradient (red, yellow, blue) 线性突变
- radial-gradient 径向突变
-
background-repeat:
- repeat（默认）/repeat-x/repeat-y
- no-repeat
-
background-clip: 背景裁切的形式
- content-box
- border-box 边框以下有背景图
- padding-box 边框以下没有背景图(默认值)
-
background-origin: 背景铺设的终点
- content-box
- border-box
- padding-box
-
background-size: 等比例设置
- cover 使背景图能够齐全笼罩背景区，有时会被适当裁剪
- contain 使背景图片能够齐全装入背景区，四周可能会有空白
- 固定值
-
background-position:
- center
- 固定值
backgroung（速写）：url() #ccc no-repeat center;
十三、bootstrap（栅格布局）
多页面程序(jquery + bootstrap)
单页面程序 教务零碎(vue vuex vueRouter elementui[组件库])
模块：
- 全局款式的重置
- 布局规定（栅格零碎）
- 款式（表格、列表 …）
-
组件
- 模态框
- 轮播图
应用：
- 援用 bootstrap.css[cdn]
- 应用
版本：
- bootstrap3 浮动
- bootstrap4 伸缩盒
十六、动画、过渡、变形
16.1 动画
16.1.1 关键帧定义
@keyframe 动画名称{0%{}
50%{ }
100%{}} 16.1.2 动画设定
- animation-name
- animation-duration
- animation-delay
- animation-timing-function:
linear/steps/ease/ease-in/…
-
animation-direction:
- reverse
- alternate
- alternate-reverse
-
animation-iteration-count:
- 4
- infinte
-
animation-fill-mode:
- forwards 动画实现后，放弃最初一个属性值
- backwards 再 animation-delay 属性指定的一段时间内，放弃初始状态
- both
16.2 动画库
-
关上网页的时候可能一开始有白屏
- 增强服务器
-
faster mini
- 图片压缩
- 图片合并（图标）
- cdn 减速
将库【iconfont 等】放到 cdn 服务器上
-
应用
-
获取 cdn 链接
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet"> -
应用 class
- 根底规定
animate_animated
- 非凡规定
animate_pulse
- 根底规定
-
16.3 过渡
（更加简略的动画，没有动画）
须要触发(:hover)
- transition-property 须要过渡的属性
- transition-duration 持续时间
-
transition-timing-function：工夫曲线函数
- linear
- steps()
- easy
- transition-delay 延迟时间
transition（速写）：property duration delay timing；
16.4 变形
- transform-orgin:
centertopleft
-
transform：
- scale(2) 整体放大
- rotateZ(默认)/Y/Z(45deg) 旋转
- skew(45deg) 歪斜
- translateX/Y(200px) 挪动
十七、响应式布局
17.1pc 端
- 相似于腾讯视频
容器的宽度随着屏幕的分辨率大小的扭转而扭转
- 相似于 mobile【纯响应式】（与 mobile 兼容）
齐全兼容挪动的设施
17.2mobile 端
手机型号不同，宽度不同
- 不要给容器【块元素】指定宽度，让他默认为 100%
- 子元素【列元素】宽度应用绝对单位，百分数
17.3 媒体查问技术
@media screen{
}
.products {
width: 990px;
margin: 0 auto;
}
.products > ul > li {
width: 19.5%;
height: 100px;
background-color: rebeccapurple;
}
@media screen and (min-width: 1300px) {
.prodmucts {width: 1200px;}
.products > ul > li {width: 16.5%;}
}
@media screen and (min-width: 1500px) {
.products {width: 1400px;}
.products > ul > li {width: 14%;}
} 