1、CSS
中文名：层叠样式表（级联样式表）
作用：给页面的HTML标签设置样式。
2、CSS的链接方式内嵌式、外联式、行内式
内嵌式：<style></style>
外联式：<link rel="stylesheet" href="路径地址">
行内式：<div style="color: blue;"></div>
3、CSS选择器
标签选择器
类选择器,也叫class选择器。
id选择器：id是唯一的，只能使用一次
通配符选择器
群组选择器
4、CSS字体
字体大小：font-size
字体粗细: font-weight
字体倾斜：font-style:italic
5、字体系列
字体转换：font-family:楷体，宋体；
无衬线字体、有衬线字体、等宽字体
字体的综合写法：font:倾斜 粗细 大小 系列；顺序不能变动。
6、首行缩进
text-indent:px像素 em一个字的大小，推荐使用后者。
7、文本居中
text-align:左left 右right 居中center
8、文本修饰符
下划线 text-decoration:underline
清除下划线 text-decoration:none
删除线
text-decoration:line-through
上划线 text-decoration:overline
9、盒子的居中方式
margin:0 auto
10、行高
line-height:一种写px，另一种写倍数。
行高可以实现单行文字垂直居中
11、复合选择器 （基本选择器的升级版）
后代选择器 选择器1 选择器2{}
子代选择器 选择器1>选择器2{}
并集选择器 选择器1，选择器2{}
交集选择器 标签.类名
hover伪类选择器 鼠标悬停在元素上的状态 标签名：hover
12、emmet语法（快捷键）
m0+p0 快速生成宽和高
.box 快速生成class名为box的div
a*10 快速生成10个a标签
p[一个段落 ] 快速生成一个带文字的段落
13、背景
背景色：background-color: ;
背景图 background-image: ;
背景平铺 background-repeat: ;
背景位置 background-position: ;
简写方式 background：颜色 图片 平铺 位置;
14、元素转换
block块元素：独占一行，可以设置宽高，div、p、h。
inline行内元素：不独占一行，不可以设置宽高，a、span、b、u、i。
inline-block行内块元素：不独占一行，可以设置宽高，input、button、textarea。
display元素转换
(块元素居中，给自己加margin:0 auto; 行内元素、行内块元素居中，给父级添加text-align:center;)
15、CSS的三大特性
继承性：子承父业
层叠性：叠加覆盖
优先性：就近原则和权重高低
16、绝对定位
position-absolute 绝对定位
会脱离文档流
当没有父元素或者父元素没有定位，参照物是浏览器的第一屏。
有父元素且父元素有定位，参照物是父元素。
17、固定定位
position-fixed 固定定位
会脱离文档流
参照物是浏览器的窗口
18、相对定位
position-relative 相对定位
不脱离文档流
参照物是自己的初始位置。
19、CSS的优先性(权重)
标签选择器权重为1
类名选择器权重为10
ID选择器权重为100
行内选择器权重为1000
!important 无穷大
20、盒子模型
盒子的组成结构是内容+内边距+边框+外边距.
box-sizing：content-box（标准盒模型），border-box（怪异盒模型）；
21、内边距
padding: 上px 右px 下px 左px ;
22、外边距
margin: 上px 右px 下px 左px ;
23、盒子内减
box-sizing: border-box;
当盒子宽高被内边距或者边框影响时,添加内减会自动减去.
24、结构伪类选择器
选中第一个 first-child{}
选中最后一个 last-child{}
选中任意一个 nth-child(){}
反方向选中任意一个 nth-last-child(){}
25、结构伪选择器类选择器的公式用法
偶数 2n
奇数 2n+1
nth-child(n){} 会直接找到元素内的所有子标签排序
nth-fo-type(n){} 会找到元素内的相同子标签排序
26、伪元素
before在内容的前面
after在内容的后面
伪元素可以添加样式,是个行内元素,伪元素必须要写content属性不然不生效.
27、标准流(又称文档流)
是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素.简单理解就是标签(元素)按照默认的方式进行显示.
28、浮动
左浮动 float: left;
右浮动 float: right;
29、平面位移
transform: translate(100%);
正值往右,负值往左
30、平面旋转
transform: rotate(360deg);
顺时针旋转
旋转原点转换
transform-origin: right bottom;
除方位名词外还可以加具体数值.
31、渐变
background: linear-gradient( pink,green);
默认渐变方向是从上到下
可以通过方位名词改变渐变方向
32、空间转换
简写
transform: translate3d(100px, 100px, 200px);
分写
transform: translateX(100px)
transform: translateY(100px)
transform: translateZ(100px)
33、空间旋转
transform: translateX(360deg)
transform: translateY(360deg)
transform: translateZ(360deg)
34、空间缩放
transform: scale3d(1,1,1);
35、动画
实现动画
animation: jin 4s linear 0s infinite alternate;
定义动画
@keyframes jin {
from{
width: 300p
}
to {
width: 900p
}
}
36、主轴变换
- 默认主轴为X轴
flex-direction:row
- 切换主轴为Y轴
flex-direction: column;
- x轴反向排列
flex-direction: row-reverse;
- Y轴反向排列
flex-direction: column-reverse;
37、主轴对齐
- 默认从正到反方向排列
justify-content: flex-start;
- 反方向排列
justify-content: flex-end;
- 居中排列
justify-content: center;
- 2比1的比例排列,中间占2,两边占1
justify-content: space-around;
- 两侧靠边,中间自适应排列
justify-content: space-between;
- 1比1的比列排列,两边和中间距离一致
justify-content: space-evenl
38、侧轴对齐
- 从上对齐
align-items: flex-start;
- 从下对齐
align-items: flex-end;
- 居中对齐
align-items: center;
- 满比例对齐
align-items: stretch;
39、侧线对齐
/* 上*/
align-self: flex-start
/* 中*/
align-self: center
/* 下*/
align-self: flex-end
40、伸缩比
flex:1;
两边盒子给固定宽度,中间使用flex伸缩比,使宽度自适应.数值是0-1之间
41、换行
flex-wrap:wrap
42、多行排列
align-content: space-between;
属性值和主轴对齐方式一样.
43、em和rem的区别
两个都是相对单位
em 值的大小取决于父元素的字体大小
rem 值的大小取决于html的字体大小
44、媒体查询
@media (width:375px) {
检测设备屏幕宽度在375px时发生变化
html{
将屏幕大小分为十等分,当html字体大小发生变化时,rem的值也会随着变化
font-size: 37.5px;
}
}
媒体查询主要就是检测不同设备屏幕,但设备种类较多,每一个都写媒体查询不现实.便捷方式可以用js来实现这一功能.
45、flexible
用js来检测设备屏幕,在body内最下面用 来引入flexible js文件.
46、rem的计算方式
rem=(设计稿上的值 / 37.5px的标准值)
47、less(预处理器,css的升级版)
下载less插件,后缀名.less生成less文件.
less语法和css有所不同.后代选择器和伪类选择器.后代选择器在less中可以直接嵌套.&表示当前标签.
less中可以实现加减乘除.
可以设置变量.
引入其他less文件进行关联@import url(./base.less);
禁止导出文件,在首行添加 // out:false
48、min和max
max-最大值
min-最小值
这两个值老是犯迷糊,每次运用的时候脑子都转不过来.
max是最大,min是最小.每次用的时候我都得想一会,提醒自己把两个反过来用.最大就是数值不能超过这个值,最小就是数值不能小于这个值.
假如要做一个媒体查询,当屏幕小于768px以下时屏幕发生变化.(数值在768px以下就是不能超过768px,那最大值就是768,就用max.)
@media (max-width:768px)
当屏幕大于992px时屏幕发生变化.(数值在992px以上,那就是不能低于992px,最小值就是992,就用min.)
@media (min-width:992px )
49、缩小隐藏
@media (max-width:600px)
用媒体查询,当屏幕缩小到600px时,三个并列的盒子中,将第一个隐藏.
@media (max-width:600px) {
.box .noe1:nth-child(1){
display: none;
}
50、外链式链接媒体查询
pc端 1200px以上
pad端 992px以下
手机端 768px以下
pc端和pad以及手机端的代码分开写,引用外链式css样式时,在link标签后加入媒体查询.
<link rel="stylesheet" href="./css" media="(max-width:992px)">
51、响应式原理
响应式原理,就是通过媒体检测屏幕的大小,改变盒子的大小
@media (max-width:992px)
@media (max-width:768px)
制定两个媒体查询,当屏幕大小在992px以下时,并列的盒子大小变成50%
当屏幕大小在768px以下时,并列的盒子大小变成100%
52、栅格系统
栅格系统将网页分为12份.
col-lg-3 电脑端时盒子占3份
col-sm-6 平板端时盒子占6份
col-xs-12 手机端时盒子占12份
container 固定宽度 row 行 column 列
lg代表大屏幕>=1200px,md代表中等屏幕>=992px，sm代表小屏幕>=768px, xs代表超小屏幕<768px.
第一步先引入css,.
之后在div类名里加入栅格系统,当在电脑端显示时,每个盒子只占12份中的3份,在平板端显示时占12份中的6份,在手机端显示时,占12份.达到自动缩小适配的效果.
53、位偏移
col-lg-offset-3
栅格系统将屏幕大小分为12份,利用col-lg-offset属性,加上数值,可以将盒子进行移动.数值为1,那就是移动12份之一,数值为2,那就是移动12份之二.
