css面试复习

font-style font-variant font-weight font-size/line-height font-family
◼ 规则:
 font-style、font-variant、font-weight可以随意调换顺序也可以省略
 /line-height可以省略如果不省略必须跟在font-size后面
 font-size、font-family不可以调换顺序不可以省略

css常见选择器

通用选择器

简单选择器

元素选择器

类选择器

id选择器

属性选择器

拥有某一属性或者属性等于某个值

后代选择器

直接子代必须加" > "

兄弟选择器

选择器组-交集/并集选择器

伪类

伪类是选择器的一种它用于选择处于特定状态的元素,如hover

动态伪类

◼ 使用举例
 a:link 未访问的链接
 a:visited 已访问的链接
 a:hover 鼠标挪动到链接上(重要)
 a:active 激活的链接鼠标在链接上长按住未松开
◼ 使用注意
 :hover必须放在:link和:visited后面才能完全生效
 :active必须放在:hover后面才能完全生效
◼ 除了a元素:hover、:active也能用在其他元素上

:focus指当前拥有输入焦点的元素能接收键盘输入
 如文本输入框一聚焦后背景就会变红色
◼ 因为链接a元素可以被键盘的Tab键选中聚焦所以:focus也适用于a元素
◼ 动态伪类编写顺序建议为
 :link、:visited、:focus、:hover、:active
◼ 直接给a元素设置样式相当于给a元素的所有动态伪类都设置了
 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

伪元素

常用的伪元素有
 :first-line、::first-line针对首行文本设置属性
 :first-letter、::first-letter针对首字母设置属性
 :before、::before
 :after、::after

为了区分伪元素和伪类建议伪元素使用2个冒号比如::first-line

伪元素::before与::after

用来在一个元素之前或者之后插入内容,需要content属性写插入的内容

css属性继承

常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;

继承过来的是计算值不是设置值

css属性的层叠

那么多个样式属性覆盖上去, 哪一个会生效呢?
 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
 判断二: 先后顺序, 权重相同时, 后面设置的生效;

按照经验为了方便比较CSS属性的优先级可以给CSS属性所处的环境定义一个权值权重
 !important10000
 内联样式1000
 id选择器100
 类选择器、属性选择器、伪类10
 元素选择器、伪元素1
 通配符0

块级元素与行内级元素

CSS中有个display属性能修改元素的显示类型有4个常用值
 block让元素显示为块级元素
 inline让元素显示为行内级元素
 inline-block让元素同时具备行内级、块级元素的特征
 none隐藏元素
 flex

块级元素独占一行

dib可以随意设置宽高+与其他行内级元素一行显示

行内级元素不可以随意设置宽高,宽高由内容决定

行内级元素一般只能包括行内级元素,不能包括block或者dib

元素隐藏方法

◼方法一: display设置为none
 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
◼ 方法二: visibility设置为hidden
 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
 默认为visible, 元素是可见的;
◼ 方法三: rgba设置颜色, 将a的值设置为0
 rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
◼ 方法四: opacity设置透明度, 设置为0
 设置整个元素的透明度, 会影响所有的子元素

overflow属性

 visible溢出的内容照样可见
 hidden溢出的内容直接裁剪
 scroll溢出的内容被裁剪但可以通过滚动机制查看,会一直显示滚动条区域滚动条区域占用的空间属于width、height
 auto自动根据内容是否溢出来决定是否提供

行内级非替换元素

对于行内级非替换元素来说, 设置宽高是无效的

替换元素(replaced elements)
- 元素本身没有实际内容浏览器根据元素的类型和属性来决定元素的具体显示内容
- 比如img、input、iframe、video、embed、canvas、audio、object等
非替换元素(non-replaced elements)
- 和替换元素相反元素本身是有实际内容的浏览器会直接将其内容显示出来而不需要根据元素类型和属性来判断到底显示什么内容
- 比如div、p等
- ◼ 以下属性对行内级非替换元素不起作用
   width、height、margin-top、margin-bottom
  ◼ 以下属性对行内级非替换元素的效果比较特殊
   padding-top、padding-bottom、上下方向的border

css盒子模型

另外我们还可以设置如下属性:
 min-width最小宽度无论内容多少宽度都大于或等于min-width
 max-width最大宽度无论内容多少宽度都小于或等于max-width
 移动端适配时, 可以设置最大宽度和最小宽度;
◼ 下面两个属性不常用:
 min-height最小高度无论内容多少高度都大于或等于min-height
 max-height最大高度无论内容多少高度都小于或等于max-heigh

padding

padding单独编写是一个缩写属性

padding-top、padding-right、padding-bottom、padding-left的简写属性
 padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

padding并非必须是四个值, 也可以有其他值;

border

边框相对于content/padding/margin来说特殊一些:
 边框具备宽度width;
 边框具备样式style;
 边框具备颜色color;

◼ 边框宽度

border-top-width、border-right-width、border-bottom-width、border-left-width
 border-width是上面4个属性的简写属性
◼ 边框颜色
 border-top-color、border-right-color、border-bottom-color、border-left-color
 border-color是上面4个属性的简写属性
◼ 边框样式
 border-top-style、border-right-style、border-bottom-style、border-left-style
 border-style是上面4个属性的简写属性

◼ 边框颜色、宽度、样式的编写顺序

border-radius(是上下左右四个的缩写属性)常见的值:
 数值: 通常用来设置小的圆角, 比如6px;
 百分比: 通常用来设置一定的弧度或者圆形;

如果一个元素是正方形, 设置border-radius大于或等于50%时就会变成一个圆.

margin

margin通常用于元素与元素之间的间距

上下margin的传递???

◼ margin-top传递
 如果块级元素的顶部线和父元素的顶部线重叠那么这个块级元素的margin-top值会传递给父元素
◼ margin-bottom传递
 如果块级元素的底部线和父元素的底部线重写并且父元素的高度是auto那么这个块级元素的margin-bottom值会传递给父元素
◼ 如何防止出现传递问题
 给父元素设置padding-top\padding-bottom
 给父元素设置border
 触发BFC: 设置overflow为auto
◼ 建议
 margin一般是用来设置兄弟元素之间的间距
 padding一般是用来设置父子元素之间的间距

上下margin的折叠???

◼ 垂直方向上相邻的2个marginmargin-top、margin-bottom有可能会合并为1个margin这种现象叫做collapse折叠
◼ 水平方向上的marginmargin-left、margin-right永远不会collapse
◼ 折叠后最终值的计算规则
 两个值进行比较取较大的值
◼ 如何防止margin collapse
 只设置其中一个元素的margin

外轮廓(略

盒子阴影(略

文字阴影(略

box-sizing

◼ box-sizing用来设置盒子模型中宽高的行为
◼ content-box
 padding、border都布置在width、height外边
◼ border-box
 padding、border都布置在width、height里边

元素的水平居中方案

◼ 在一些需求中需要元素在父元素中水平居中显示父元素一般都是块级元素、inline-block
◼ 行内级元素(包括inline-block元素)
 水平居中在父元素中设置text-align: center
◼ 块级元素
 水平居中margin: 0 auto

css设置背景

background-image

◼ background-image用于设置元素的背景图片
 会盖在(不是覆盖)background-color的上面
◼ 如果设置了多张图片
 设置的第一张图片将显示在最上面其他图片按顺序层叠在下面
◼ 注意如果设置了背景图片后元素没有具体的宽高背景图片是不会显示出来的

background-repeat

◼ background-repeat用于设置背景图片是否要平铺
◼ 常见的设值有
         repeat平铺
         no-repeat不平铺
         repeat-x只在水平方向平铺
         repeat-y只在垂直平方向平铺

background-size

◼ background-size用于设置背景图片的大小
         auto默认值, 以背景图本身大小显示
         cover缩放背景图以完全覆盖铺满元素,可能背景图片部分看不见
         contain缩放背景图宽度或者高度铺满元素但是图片保持宽高比
         <percentage>百分比相对于背景区background positioning area
         length具体的大小比如100px

background-position

◼ background-position用于设置背景图片在水平、垂直方向上的具体位置
 可以设置具体的数值比如 20px 30px;
 水平方向还可以设值left、center、right
 垂直方向还可以设值top、center、bottom
 如果只设置了1个方向另一个方向默认是center

background-attachment

◼ background-attachment决定背景图像的位置是在视口内固定或者随着包含它的区块滚动。
◼ 可以设置以下3个值
 scroll此关键属性值表示背景相对于元素本身固定而不是随着它的内容滚动
 local此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制背景将会随着元素的内容滚动.
 fixed此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制背景也不会随着元素的内容滚动。

background

◼ background是一系列背景相关属性的简写属性
◼ 常用格式是
◼ background-size可以省略如果不省略/background-size必须紧跟在background-position的后面
◼ 其他属性也都可以省略而且顺序任意

HTML高级元素-列表/表格/表单

列表

◼ HTML提供了3组常用的用来展示列表的元素
 有序列表ol、li
 无序列表ul、li
 定义列表dl、dt、dd
列表的实现方式

◼ dldefinition list
 定义列表直接子元素只能是dt、dd
◼ dtdefinition term
 term是项的意思, 列表中每一项的项目名
◼ dddefinition description
 列表中每一项的具体描述是对 dt 的描述、解释、补充
 一个dt后面一般紧跟着1个或者多个dd

表格

◼ 编写表格最常见的是下面的元素:
◼ table
 表格
◼ tr(table row)
 表格中的行
◼ td(table data)
 行中的单元格

 border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
 table { border-collapse: collapse; }
 合并单元格的边框

◼ thead
 表格的表头
◼ tbody
 表格的主体
◼ tfoot
 表格的页脚
◼ caption
 表格的标题
◼ th
 表格的表头单元格

◼ 单元格合并分成两种情况:
 跨列合并: 使用colspan
✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
 跨行合并: 使用rowspan
✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;

表单

◼ form
 表单, 一般情况下其他表单相关元素都是它的后代元素
◼ input
 单行文本输入框、单选框、复选框、按钮等元素
◼ textarea
 多行文本框
◼ select、option
 下拉选择框
◼ button
 按钮
◼ label
 表单元素的标题

常见的表单元素

◼ 表单元素使用最多的是input元素
◼ input元素有如下常见的属性:
◼ typeinput的类型
 text文本输入框明文输入
 password文本输入框密文输入
 radio单选框
 checkbox复选框
 button按钮
 reset重置
 submit提交表单数据给服务器
 file文件上传
input元素的使用
◼ readonly只读
◼ disabled禁用
◼ checked默认被选中
 只有当type为radio或checkbox时可用
◼ autofocus当页面加载时自动聚焦
◼ name名字
 在提交数据给服务器时可用于区分数据类型
◼ value取值

常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
◼ 布尔属性可以没有属性值写上属性名就代表使用这个属性
 如果要给布尔属性设值值就是属性名本身

◼ label元素一般跟input配合使用用来表示input的标题
◼ labe可以跟某个input绑定点击label就可以激活对应的input变成选中

◼ textarea的常用属性:
 cols列数
 rows行数
◼ 缩放的CSS设置
 禁止缩放resize: none;
 水平缩放resize: horizontal;
 垂直缩放resize: vertical;
 水平垂直缩放resize: both;

◼ option是select的子元素一个option代表一个选项
◼ select常用属性
 multiple可以多选
 size显示多少项
◼ option常用属性
 selected默认被选中

◼ form通常作为表单元素的父元素:
 form可以将整个表单作为一个整体来进行操作;
 比如对整个表单进行重置;
 比如对整个表单的数据进行提交;
◼ form常见的属性如下:
◼ action
 用于提交表单数据的请求URL
◼ method
 请求方法get和post默认是get
◼ target
 在什么地方打开URL参考a元素的target

结构伪类-nth-child

nth-child

◼ :nth-child(1)
 是父元素中的第1个子元素
◼ :nth-child(2n)
 n代表任意正整数和0
 是父元素中的第偶数个子元素第2、4、6、8......个
 跟:nth-child(even)同义
◼ :nth-child(2n + 1)
 n代表任意正整数和0
 是父元素中的第奇数个子元素第1、3、5、7......个
 跟:nth-child(odd)同义
◼ nth-child(-n + 2)
 代表前2个子元素

nth-last-child

◼ :nth-last-child()的语法跟:nth-child()类似不同点是:nth-last-child()从最后一个子元素开始往前计数
 :nth-last-child(1)代表倒数第一个子元素
 :nth-last-child(-n + 2)代表最后2个子元素
◼ :nth-of-type()用法跟:nth-child()类似
 不同点是:nth-of-type()计数时只计算同种类型的元素
◼ :nth-last-of-type()用法跟:nth-of-type()类似
 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

◼ 其他常见的伪类(了解):
 :first-child等同于:nth-child(1)
 :last-child等同于:nth-last-child(1)
 :first-of-type等同于:nth-of-type(1)
 :last-of-type等同于:nth-last-of-type(1)
 :only-child是父元素中唯一的子元素
 :only-of-type是父元素中唯一的这种类型的子元素
◼ 下面的伪类偶尔会使用:
 :root根元素就是HTML元素
 :empty代表里面完全空白的元素

否定伪类

◼ :not()的格式是:not(x)
 x是一个简单选择器
 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类除否定伪类
◼ :not(x)表示除x以外的元素

边框形状

web font

◼ 注意: @font-face 用于加载一个自定义的字体;
使用Web Fonts

◼ TrueType字体拓展名是 .ttf
 OpenType/TrueType字体拓展名是 .ttf、.otf
建立在TrueType字体之上
 Embedded OpenType字体拓展名是 .eot
OpenType字体的压缩版
 SVG字体拓展名是 .svg、 .svgz
 WOFF表示Web Open Font Format web开放字体
拓展名是 .woff建立在TrueType字体之上

字体图标

◼ 思考字体可以设计成各式各样的形状那么能不能把字体直接设计成图标的样子呢
 当然可以这个就叫做字体图标。
◼ 字体图标的好处
 放大不会失真
 可以任意切换颜色
 用到很多个图标时文件相对图片较小
◼ 字体图标的使用
 登录阿里iconshttps://www.iconfont.cn/
 下载代码并且拷贝到项目中
◼ 将字体文件和默认的css文件导入到项目中

◼ 字体图标的使用步骤:
◼ 第一步: 通过link引入iconfont.css文件
◼ 第二步: 使用字体图标
◼ 使用字体图标常见的有两种方式:
 方式一: 通过对应字体图标的Unicode来显示代码;
 方式二: 利用已经编写好的class, 直接使用即可;

精灵图

◼ 什么是CSS Sprite
 是一种CSS图像合成技术将各种小图片合并到一张图片上然后利用CSS的背景定位来显示对应的图片部分
 有人翻译为CSS雪碧、CSS精灵
◼ 使用CSS Sprite的好处
         减少网页的http请求数量加快网页响应速度减轻服务器压力
         减小图片总大小
         解决了图片命名的困扰只需要针对一张集合的图片命名
◼ Sprite图片制作雪碧图、精灵图
 方法1Photoshop, 设计人员提供
 方法2https://www.toptal.com/developers/css/sprite-generator

◼ 如何获取精灵图的位置
 http://www.spritecow.com/

cursor

cursor可以设置鼠标指针光标在元素上面时的显示样式
◼ cursor常见的设值有
 auto浏览器根据上下文决定指针的显示样式比如根据文本和非文本切换指针样式
 default由操作系统决定一般就是一个小箭头
 pointer一只小手鼠标指针挪动到链接上面默认就是这个样式
 text一条竖线鼠标指针挪动到文本输入框上面默认就是这个样式
 none没有任何指针显示在元素上面

css元素position定位

标准流

默认情况下元素都是按照normal flow标准流、常规流、正常流、文档流【document flow】进行排布
 从左到右、从上到下按顺序摆放好
 默认情况下互相之间不存在层叠现象

margin-padding进行位置调整

1.静态2.相对3.固定4.绝对5.粘性

1-2不脱标准流

在标准流中可以使用margin、padding对元素进行定位
 其中margin还可以设置负数
◼ 比较明显的缺点是
 设置一个元素的margin或者padding通常会影响到标准流中其他元素的定位效果
 不便于实现元素层叠的效果
◼ 如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
 我们可以通过position属性来进行设置;

静态定位

◼ position属性的默认值
 元素按照normal flow布局
 left 、right、top、bottom没有任何作用

相对定位-relative

◼ 元素按照normal flow布局
◼ 可以通过left、right、top、bottom进行定位
 定位参照对象是元素自己原来的位置
◼ left、right、top、bottom用来设置元素的具体位置对元素的作用如下图所示
◼ 相对定位的应用场景
 在不影响其他元素位置的前提下对当前元素位置进行微调

固定定位

◼ 元素脱离normal flow脱离标准流、脱标
◼ 可以通过left、right、top、bottom进行定位
◼ 定位参照对象是视口viewport
◼ 当画布滚动时固定不动

绝对定位

◼ 元素脱离normal flow脱离标准流、脱标
◼ 可以通过left、right、top、bottom进行定位
 定位参照对象是最邻近的定位祖先元素
 如果找不到这样的祖先元素参照对象是视口
◼ 定位元素positioned element
 position值不为static的元素
 也就是position值为relative、absolute、fixed的元素

子绝父相
◼ 在绝大数情况下子元素的绝对定位都是相对于父元素进行定位
◼ 如果希望子元素相对于父元素进行定位又不希望父元素脱标常用解决方案是
 父元素设置position: relative让父元素成为定位元素而且父元素不脱离标准流
 子元素设置position: absolute
 简称为“子绝父相”

把position设置为绝对/固定元素的特点

◼ 可以随意设置宽高
◼ 宽高默认由内容决定
◼ 不再受标准流的约束
 不再严格按照从上到下、从左到右排布
 不再严格区分块级(block)、行内级(inline)行内块级(inline-block)的很多特性都会消失
◼ 不再给父元素汇报宽高数据
◼ 脱标元素内部默认还是按照标准流布局

◼ 绝对定位元素absolutely positioned element
 position值为absolute或者fixed的元素
◼ 对于绝对定位元素来说
 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
◼ 如果希望绝对定位元素的宽高和定位参照对象一样可以给绝对定位元素设置以下属性????
 left: 0、right: 0、top: 0、bottom: 0、margin:0
◼ 如果希望绝对定位元素在定位参照对象中居中显示可以给绝对定位元素设置以下属性
 left: 0、right: 0、top: 0、bottom: 0、margin: auto
 另外还得设置具体的宽高值宽高小于定位参照对象的宽高)

粘性定位

◼ 另外还有一个定位的值是position: sticky比起其他定位值要新一些.
 sticky是一个大家期待已久的属性;
 可以看做是相对定位和固定(绝对)定位的结合体;
 它允许被定位的元素表现得像相对定位一样直到它滚动到某个阈值点;
 当达到这个阈值点时, 就会变成固定(绝对)定位;
◼ sticky是相对于最近的滚动祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport )

css浮动

◼ 绝对定位、浮动都会让元素脱离标准流以达到灵活布局的

可以通过float属性让元素产生浮动效果float的常用取值
 none不浮动默认值
 left向左浮动
 right向右浮动

浮动规则

元素一旦浮动后, 脱离标准流
 朝着向左或向右方向移动直到自己的边界紧贴着包含块一般是父元素或者其他浮动元素的边界为止
 定位元素会层叠在浮动元素上面

◼ 如果元素是向左右浮动浮动元素的左右边界不能超出包含块的左右边界
浮动规则二

规则五: 浮动元素之间不能层叠
 如果一个元素浮动另一个浮动元素已经在那个位置了后浮动的元素将紧贴着前一个浮动元素左浮找左浮右浮找右浮
 如果水平方向剩余的空间不够显示浮动元素浮动元素将向下移动直到有充足的空间为止
浮动规则三

浮动元素不能与行内级内容层叠行内级内容将会被浮动元素推出
 比如行内级元素、inline-block元素、块级元素的文字内容
浮动规则四

浮动的问题-高度塌陷

◼ 由于浮动元素脱离了标准流变成了脱标元素所以不再向父元素汇报高度
 父元素计算总高度时就不会计算浮动子元素的高度导致了高度坍塌的问题
◼ 解决父元素高度坍塌问题的过程一般叫做清浮动清理浮动、清除浮动
◼ 清浮动的目的是
 让父元素计算总高度的时候把浮动子元素的高度算进去
◼ 如何清除浮动呢? 使用clear属性

◼ clear属性是做什么的呢?
 clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
◼ clear的常用取值
 left要求元素的顶部低于之前生成的所有左浮动元素的底部
 right要求元素的顶部低于之前生成的所有右浮动元素的底部
 both要求元素的顶部低于之前生成的所有浮动元素的底部
 none默认值无特殊要求
◼ 那么我们可以利用这个特性来清除

清除浮动的方法

◼ 事实上我们有很多方法可以清除浮动
◼ 方法一: 给父元素设置固定高度
 扩展性不好不推荐
◼ 方法二: 在父元素最后增加一个空的块级子元素并且让它设置clear: both
 会增加很多无意义的空标签维护麻烦
 违反了结构与样式分离的原则不推荐
◼ 方法三: 给父元素添加一个伪元素
 推荐;
 编写好后可以轻松实现清除浮动;

flex布局

◼ Flexbox翻译为弹性盒子:
 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
◼ flex布局是目前web开发中使用最多的布局方案
 flex 布局Flexible 布局弹性布局;
 目前特别在移动端可以说已经完全普及;
 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
◼ 为什么需要flex布局呢?
 长久以来CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;

◼ flexbox在使用时, 我们最担心的是它的兼容性问题:
 我们可以在caniuse上查询到具体的兼容性

◼ 两个重要的概念
 开启了 flex 布局的元素叫 flex container
 flex container 里面的直接子元素叫做 flex item
◼ 当flex container中的子元素变成了flex item时, 具备一下特点:
 flex item的布局将受flex container属性的设置来进行控制和布局;
 flex item不再严格区分块级元素和行内级元素;
 flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;
◼ 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
 flex flex container 以 block-level 形式存在
 inline-flex flex container 以 inline-level 形式存在

flex-direction

◼ flex-wrap 决定了 flex container 是单行还是多行
 nowrap默认单行
 wrap多行
 wrap-reverse多行对比 wrapcross start 与 cross end 相反

flex-wrap

◼ flex-wrap 决定了 flex container 是单行还是多行
 nowrap默认单行
 wrap多行
 wrap-reverse多行对比 wrapcross start 与 cross end 相反

flex-flow

◼ flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
 顺序任何, 并且都可以省略;

justify-content

◼ justify-content 决定了 flex items 在 main axis 上的对齐方式
 flex-start默认值与 main start 对齐
 flex-end与 main end 对齐
 center居中对齐
 space-between
✓ flex items 之间的距离相等
✓ 与 main start、main end两端对齐
 space-around
✓ flex items 之间的距离相等
✓ flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
 space-evenly
✓ flex items 之间的距离相等
✓ flex items 与 main start、main end 之间的距离等于 flex items 之间的距离

align-items

align-items 决定了 flex items 在 cross axis 上的对齐方式
 normal在弹性布局中效果和stretch一样
 stretch当 flex items 在 cross axis 方向的 size 为 auto 时会
自动拉伸至填充 flex container
 flex-start与 cross start 对齐
 flex-end与 cross end 对齐
 center居中对齐
 baseline与基准线对齐

align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式用法与 justify-content 类似
 stretch默认值与 align-items 的 stretch 类似
 flex-start与 cross start 对齐
 flex-end与 cross end 对齐
 center居中对齐
 space-between
✓ flex items 之间的距离相等
✓ 与 cross start、cross end两端对齐
 space-around
✓ flex items 之间的距离相等
✓ flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
 space-evenly
✓ flex items 之间的距离相等
✓ flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离

flex-item属性 - align-self

flex-item属性 - flex-grow

◼ flex-grow 决定了 flex items 如何扩展(拉伸/成长)
 可以设置任意非负数字正小数、正整数、0默认值是 0
 当 flex container 在 main axis 方向上有剩余 size 时flex-grow 属性才会有效
◼ 如果所有 flex items 的 flex-grow 总和 sum 超过 1每个 flex item 扩展的 size 为
 flex container 的剩余 size * flex-grow / sum
◼ flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-item属性 - flex-shrink

◼ flex-shrink 决定了 flex items 如何收缩(缩小)
 可以设置任意非负数字正小数、正整数、0默认值是 1
 当 flex items 在 main axis 方向上超过了 flex container 的 sizeflex-shrink 属性才会有效
◼ 如果所有 flex items 的 flex-shrink 总和超过 1每个 flex item 收缩的 size为
 flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
◼ flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-item属性 -flex-basis

◼ flex-basis 用来设置 flex items 在 main axis 方向上的 base size
 auto默认值、具体的宽度数值100px
◼ 决定 flex items 最终 base size 的因素从优先级高到低
 max-width\max-height\min-width\min-height
 flex-basis
 width\height
 内容本身的 size

flex-item属性 -flex

◼ flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个2个或3个值。
◼ 单值语法: 值必须为以下其中之一:
 一个无单位数(<number>): 它会被当作<flex-grow>的值。
 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
 关键字noneauto或initial.
◼ 双值语法: 第一个值必须为一个无单位数并且它会被当作 <flex-grow> 的值。
 第二个值必须为以下之一
✓ 一个无单位数它会被当作 <flex-shrink> 的值。
✓ 一个有效的宽度值: 它会被当作 <flex-basis> 的值。
◼ 三值语法:
 第一个值必须为一个无单位数并且它会被当作 <flex-grow> 的值。
 第二个值必须为一个无单位数并且它会被当作 <flex-shrink> 的值。
 第三个值必须为一个有效的宽度值并且它会被当作 <flex-basis> 的值。

vertical-align

◼ 官方文档的翻译vertical-align会影响行内块级元素在一个行盒中垂直方向的位置
◼ 思考一个div没有设置高度的时候会不会有高度
 没有内容没有高度
 有内容内容撑起来高度
◼ 但是内容撑起来高度的本质是什么呢
 内容有行高line-height撑起来了div的高度
◼ 行高为什么可以撑起div的高度
 这是因为line boxes的存在并且line-boxes有一个特性包裹每行的inline level
 而其中的文字是有行高的必须将整个行高包裹进去才算包裹这个line-level
◼ 那么进一步思考
 如果这个div中有图片文字inline-block甚至他们设置了margin这些属性呢

◼ 现在对于不同的取值就非常容易理解了
 baseline(默认值)基线对齐你得先明白什么是基线
 top把行内级盒子的顶部跟line boxes顶部对齐
 middle行内级盒子的中心点与父盒基线加上x-height一半的线对齐
 bottom把行内级盒子的底部跟line box底部对齐
 <percentage>把行内级盒子提升或者下降一段距离距离相对于line-height计算\元素高度 0%意味着同baseline一
样
 <length>把行内级盒子提升或者下降一段距离0cm意味着同baseline一样
◼ 解决图片下边缘的间隙方法:
 方法一: 设置成top/middle/bottom
 方法二: 将图片设置为block元素

transform

◼ CSS transform属性允许你旋转缩放倾斜或平移给定元素。
◼ Transform是形变的意思transformer就是变形金刚
◼ 常见的函数transform function有
 平移translate(x, y)
 缩放scale(x, y)
 旋转rotate(deg)
 倾斜skew(deg, deg)
◼ 通过上面的几个函数我们可以改变某个元素的形变

translate平移

◼ 平移translate(x, y)
◼ 值个数
 一个值时设置x轴上的位移
 二个值时设置x轴和y轴上的位移
◼ 值类型
 数字100px
 百分比参照元素本身 refer to the size of bounding box
位移 - translate

scale缩放

◼ 缩放scale(x, y)
◼ 值个数
 一个值时设置x轴上的缩放
 二个值时设置x轴和y轴上的缩放
◼ 值类型
 数字
✓ 1保持不变
✓ 2放大一倍
✓ 0.5缩小一半
 百分比不支持百分比

transform-origin

◼ transform-origin变形的原点
◼ 一个值
 设置x轴的原点
◼ 两个值
 设置x轴和y轴的原点
◼ 必须是<length><percentage>或 left, center, right, top, bottom关键字中的一个
 left, center, right, top, bottom关键字
 length从左上角开始计算
 百分比参考元素本身大小

旋转

◼ 旋转rotate(deg)
◼ 值个数
 一个值时表示旋转的角度
◼ 值类型
 deg旋转的角度
 正数为顺时针
 负数为逆时针
◼ 注意旋转的原点受transform-origin的影响

过渡动画 transition

◼ transition CSS 属性是 transition-propertytransition-durationtransition-timing-function 和 transition-delay 的
一个简写属性。
◼ transition-property指定应用过渡属性的名称
 可以写all表示所有可动画的属性
 属性是否支持动画查看文档
◼ transition-duration指定过渡动画所需的时间
 单位可以是秒s或毫秒ms
◼ transition-timing-function指定动画的变化曲线
 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
◼ transition-delay指定过渡动画执行之前的等待时间

animation

◼ CSS animation 属性是 animation-nameanimation-duration, animation-timing-functionanimation-delayanimation-
iteration-countanimation-directionanimation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
◼ animation-name指定执行哪一个关键帧动画
◼ animation-duration指定动画的持续时间
◼ animation-timing-function指定动画的变化曲线
◼ animation-delay指定延迟执行的时间
◼ animation-iteration-count指定动画执行的次数执行infinite表示无限动画
◼ animation-direction指定方向常用值normal和reverse
◼ animation-fill-mode执行动画最后保留哪一个值
 none回到没有执行动画的位置
 forwards动画最后一帧的位置
 backwards动画第一帧的位置
◼ animation-play-state指定动画运行或者暂停在JavaScript中使用用于暂停动画

white-space

text-overflow

◼ text-overflow通常用来设置文字溢出时的行为
 clip溢出的内容直接裁剪掉字符可能会显示不完整
 ellipsis溢出那行的结尾处用省略号表示
◼ text-overflow生效的前提是overflow不为visible
◼ 常见的是将white-space、text-overflow、overflow一起使用

css函数var

◼ CSS中可以自定义属性
 属性名需要以两个减号--开始;
 属性值则可以是任何有效的CSS值;
◼ 我们可以通过var函数来使用:
◼ 规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)
 所以推荐将自定义属性定义在html中也可以使用 :root 选择器;

css函数calc

◼ calc() 函数允许在声明 CSS 属性值时执行一些计算。
 计算支持加减乘除的运算
✓ + 和 - 运算符的两边必须要有空白字符。
 通常用来设置一些元素的尺寸或者位置

 -webkit-Safari、Chrome等

bfc

◼ 什么是FC呢
◼ FC的全称是Formatting Context元素在标准流里面都是属于一个FC的
◼ 块级元素的布局属于Block Formatting ContextBFC
 也就是block level box都是在BFC中布局的
◼ 行内级元素的布局属于Inline Formatting ContextIFC
 而inline level box都是在IFC中布局的

MDN上有整理出在哪些具体的情况下会创建BFC
 根元素<html>
 浮动元素元素的 float 不是 none
 绝对定位元素元素的 position 为 absolute 或 fixed
 行内块元素元素的 display 为 inline-block
 表格单元格元素的 display 为 table-cellHTML表格单元格默认为该值表格标题元素的 display 为 table-captionHTML表格标题默认为该值
 匿名表格单元格元素元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group分别是HTML table、
row、tbody、thead、tfoot 的默认属性或 inline-table
 overflow 计算值(Computed)不为 visible 的块元素
 弹性元素display 为 flex 或 inline-flex 元素的直接子元素
 网格元素display 为 grid 或 inline-grid 元素的直接子元素
 display 值为 flow-root 的元素

◼ 我们来看一下官方文档对BFC作用的描述
◼ 简单概况如下
 在BFC中box会在垂直方向上一个挨着一个的排布
 垂直方向的间距由margin属性决定
 在同一个BFC中相邻两个box之间的margin会折叠collapse
 在BFC中每个元素的左边缘是紧挨着包含块的左边缘的
◼ 那么这个东西有什么用呢
 解决margin的折叠问题
 解决浮动高度塌陷问题

bfc解决margin折叠

◼ 在同一个BFC中相邻两个box之间的margin会折叠collapse
 那么如果我们让两个box是不同的BFC呢那么就可以解决折叠问题。

bfc解决浮动高度塌陷

BFC可以解决浮动高度塌陷可以实现清除浮动的效果。

◼ 事实上BFC解决高度塌陷需要满足两个条件
 浮动元素的父元素触发BFC形成独立的块级格式化上下文Block Formatting Context
 浮动元素的父元素的高度是auto的

◼ BFC的高度是auto的情况下是如下方法计算高度的
 1.如果只有inline-level是行高的顶部和底部的距离
 2.如果有block-level是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
 3.如果有绝对定位元素将被忽略
 4.如果有浮动元素那么会增加高度以包括这些浮动元素的下边缘

媒体查询

◼ 媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。
◼ 你可以根据设备的类型比如屏幕设备、打印机设备或者特定的特性比如屏幕的宽度来修改你的页面。
◼ 媒体查询的使用方式主要有三种
 方式一通过@media和@import使用不同的CSS规则常用
 方式二使用media属性为<style>, <link>, <source>和其他HTML元素指定特定的媒体类型
 方式三使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态
◼ 比较常用的是通过@media来使用不同的CSS规则目前掌握这个即可

css的单位

绝对单位

◼ 绝对单位
 它们与其他任何东西都没有关系通常被认为总是相同的大小。
 这些值中的大多数在用于打印时比用于屏幕输出时更有用例如我们通常不会在屏幕上使用cm。
 惟一一个您经常使用的值就是px(像素)。

相对单位

◼ 相对长度单位
 相对长度单位相对于其他一些东西
 比如父元素的字体大小或者视图端口的大小
 使用相对单位的好处是经过一些仔细的规划您可以使文本或其他元素的大小与页面上的其他内容相对应

像素分类

dpr/ppi/dpi

css预处理器-less

◼ 常见的预处理器有哪些呢? 目前使用较多的是三种预处理器:
◼ Sass/Scss
 2007年诞生最早也是最成熟的CSS预处理器拥有ruby社区的支持是属于Haml一种模板系统的一部分;
 目前受LESS影响已经进化到了全面兼容CSS的SCSS;
◼ Less:
 2009年出现受SASS的影响较大但又使用CSS的语法让大部分开发者更容易上手;
 比起SASS来可编程功能不够不过优点是使用方式简单、便捷兼容CSS并且已经足够使用
 另外反过来也影响了SASS演变到了SCSS的时代
 著名的Twitter Bootstrap就是采用LESS做底层语言的也包括React的UI框架AntDesign。
◼ Stylus:
 2010年产生来自Node.js社区主要用来给Node项目进行CSS预处理支持;
 语法偏向于Python, 使用率相对于Sass/Less少很多

◼ 什么是Less呢? 我们来看一下官方的介绍:
 It's CSS, with just a little more.
◼ Less Leaner Style Sheets 的缩写是一门CSS 扩展语言, 并且兼容CSS。
 Less增加了很多相比于CSS更好用的特性;
 比如定义变量、混入、嵌套、计算等等
 Less最终需要被编译成CSS运行于浏览器中包括部署到服务器中

less语法

◼ Less语法一Less是兼容CSS的
 所以我们可以在Less文件中编写所有的CSS代码
 只是将css的扩展名改成了.less结尾而已

在一个大型的网页项目中我们CSS使用到的某几种属性值往往是特定的
 比如我们使用到的主题颜色值那么每次编写类似于#f3c258格式的语法
 一方面是记忆不太方便需要重新编写或者拷贝样式
 另一方面如果有一天主题颜色改变我们需要修改大量的代码
 所以我们可以将常见的颜色或者字体等定义为变量来使用
◼ 在Less中使用如下的格式来定义变量
Less语法二 – 变量Variables
@变量名: 变量值;

◼ 在Less中算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
 算术运算符在加、减或比较之前会进行单位换算计算的结果以最左侧操作数的单位类型为准
 如果单位换算无效或失去意义则忽略单位

◼ 在原来的CSS编写过程中多个选择器中可能会有大量相同的代码
 我们希望可以将这些代码进行抽取到一个独立的地方任何选择器都可以进行复用
 在less中提供了混入Mixins来帮助我们完成这样的操作
◼ 混合Mixin是一种将一组属性从一个规则集或混入到另一个规则集的方法。
◼ 注意混入在没有参数的情况下小括号可以省略但是不建议这样使用

移动端适配

◼ 移动互联网的快速发展让人们已经越来越习惯于使用手机来完成大部分日常的事务。
 前端我们已经学习了大量HTML、CSS的前端开发知识并且也进行了项目实战
 这些知识也同样适用于移动端开发但是如果想让一个页面真正适配于移动端我们最好多了解一些移动端的知识
◼ 移动端开发目前主要包括三类
 原生App开发iOS、Android、RN、uniapp、Flutter等
 小程序开发原生小程序、uniapp、Taro等
 Web页面移动端的Web页面可以使用浏览器或者webview浏览
◼ 因为目前移动端设备较多所以我们需要对其进行一些适配。
◼ 这里有两个概念
 自适应根据不同的设备屏幕大小来自动调整尺寸、大小
 响应式会随着屏幕的实时变动而自动调整是一种自适应

适配方案 – rem+动态html的font-size

◼ rem单位是相对于html元素的font-size来设置的那么如果我们需要在不同的屏幕下有不同的尺寸可以动态的修改html的
font-size尺寸。
◼ 比如如下案例
 1.设置一个盒子的宽度是2rem
 2.设置不同的屏幕上html的font-size不同

◼ 这样在开发中我们只需要考虑两个问题
 问题一针对不同的屏幕设置html不同的font-size
 问题二将原来要设置的尺寸转化成rem单位

rem与vw对比

◼ rem事实上是作为一种过渡的方案它利用的也是vw的思想。
 前面不管是我们自己编写的js还是flexible的源码
 都是将1rem等同于设计稿的1/10在利用1rem计算相对于整个屏幕的尺寸大小
 那么我们来思考1vw不是刚好等于屏幕的1/100吗
 而且相对于rem还更加有优势
◼ vw相比于rem的优势
 优势一不需要去计算html的font-size大小也不需要给html设置这样一个font-size
 优势二不会因为设置html的font-size大小而必须给body再设置一个font-size防止继承
 优势三因为不依赖font-size的尺寸所以不用担心某些原因html的font-size尺寸被篡改页面尺寸混乱
 优势四vw相比于rem更加语义化1vw刚才是1/100的viewport的大小;
 优势五可以具备rem之前所有的优点
◼ vw我们只面临一个问题将尺寸换算成vw的单位即可
◼ 所以目前相比于rem更加推荐大家使用vw但是理解rem依然很重要