运营转前端 CSS学习篇-2

CSS-D7

107(理解)列表元素的介绍和开发模式分析

• 列表的实现方式

  • 方式一:用div元素

  • 方式二:用列表元素,使用元素语义化的方式实现

• 列表元素

  • 列表元素默认的CSS样式,用起来不方便

  • 列表元素有很多限制,ol/ul只能存放li,li再存放其他元素,默认样式等

  • 虽然可以通过重置解决,但是div更自由

• HTML提供的3组常用展示列表的元素

  • 有序列表:ol,li

  • 无序列表:ul,li

  • 定义列表:dl,dt,dd

108(掌握)常见的列表元素-ol-ul-dl使用

1有序列表

• ol(ordered list)

  • 有序列表,直接子元素只能是li

• li(list itrem)

  • 列表中的每一项

2无序列表

• ul(unordered list)

  • 无序列表,直接子元素只能是li

• li(list item)

  • 列表中的每一项

3定义列表

• dl(defintion list)

  定义列表:直接子元素只能是dt,dd

• dt(defintion term)

  列表中每一项的项目名

• dd(defintion description)

  • 列表中每一项的具体描述,对dt的描述,解释,补充

  • 一个dt后面一般紧跟一个或者多个dd

108.1(掌握)列表的练习-新闻列表-代码优化

• 选中第几个数字修改颜色

• 

• 修改图标(热,新)

  避免重复代码,而且容易修改

• 

109(掌握)案例的思路和继承属性的特性

• 总结

  • 先完成结构

  • 重置样式(body/a/ul)

  • 先整体,后局部

    • 顺序:从外往里,从上往下

  • 去除重复的代码(建css文件)

    • 将重复的逻辑放到一个单独的class中(.icon)

    • 不同的代码抽到不同的class(.new .hot)

110(理解)表格元素的认识和介绍

• 表格常见的元素

  • table:表格

  • tr(table row)表格中的行

  • td(table data)行中的单元格

111(掌握)table元素的使用-案例练习和重构

• 表格练习

  

  

• • border-collapse 用来决定表格的边框是分开还是合并

• 表格的其他元素

  • thead:表格的表头

  • tbody:表格的主体

  • tfoot:表格的页脚

  • caption:表格的标题

  • th:表格的表头单元格th

112(理解)table的单元格合并-跨行-跨列

• 单元格合并的2种情况

  • 跨列合并:使用cplspan

    在最左边的单元格写上colspan属性,并且省略掉合并的td

  • 跨行合并:使用rowspan

    在最上面的单元格写上rowspan属性,并且省略掉后面tr中的td

• 进行跨行或跨列时

  • 1.确定“谁”需要跨行或者跨列

  • 2.确定是跨“行”还是跨“列”

  • 3.跨几行或者几列

113(理解)table的单元格合并练习-结构伪类

• 做一个12行6列的表格:tr*12>td{英语} *6

• 属性选择器

• 

• 并集选择器

• 

114(掌握)表单元素-input元素的基本使用

• 常见的表单元素

  • form表单

    一般情况下,其他表单相关元素都是它的后代元素

  • input

    单行文本输入框,单选框,复选框,按钮等元素

  • textarea 多行文本框

  • select,option 下拉选择框

  • button 按钮

  • lable 表单元素的标题

• 行内非替换元素和替换元素

  • 不可替换元素 HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）

  • 替换元素 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

115(了解)input是否是可替换元素的理解

• input的type为text的时候,可以设置宽高,是行内替换元素的特性

116(掌握)input模拟button和button使用

• 表单按钮

  • 表单可以实现按钮效果

    • 普通按钮(type=button):使用value属性设置按钮文字

    • 重置按钮(type=reset):重置它所属form的所有表单元素(包括input,textarea,select)

    • 提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input,textarea,select)

  • 可以通过按钮实现同样效果，,即<input type="reset" value="重置按钮">和<button type="reset"> 重置按钮< / buttom>的效果是一样的.

  • 

117(掌握)lable-input-radio-check

• label元素一般跟input配合使用,用来表示input的标题

• label可以跟某个input绑定,点击label就可以激活对应的input变成选中

• 

• radio的使用(单选框)

  • 可以把type类型设置为radio变成单选框

    • name值相同的radio才具备单选功能

    • 

• checkbox的使用

  • 可以把type类型设置成checkbox变成多选框

    • 属于同一类型的checkbox,name值要保持一致,且后面还要添加value值

      

118(掌握)textarea-select-option

1.textarea

• textarea的常用属性(cols和rows主要是为了设置宽度和高度)

  • cols:列数

  • rows:行数

• 缩放的css设置

  • 禁止缩放：resize: none;

  • 水平缩放：resize: horizontal;

  • 垂直缩放：resize: vertical;

  • 水平垂直缩放：resize: both;

2.select和option

• option是select的子元素，一个option代表一个选项

• select常用属性

  • multiple：可以多选

  • size：显示多少项

• option常用属性

  • selected：默认被选中

  

118.1(掌握)form元素的使用和模拟百度

• form常见的属性

  • form通常作为表单元素的父元素

    • form可以将整个表单作为一个整体来进行操作,比如对整个表单进行重置;对整个表单的数据进行提交

  • form常见的属性有

    • action:用于提交表单数据的请求url

    • method:请求方法(get和post),默认是get

      get和post区别:get容易泄露数据,post会对提交的数据进行加密

    • target:在什么地方打开url,,空白页打开(_blank)...

119(了解)Emmet常见的语法

• Emmet是一个能大幅度提高前端开发效率的工具

• VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按tab/enter键就会自动声场相应的代码

• !和html:5可以快速生成完整结构的html5代码

121(掌握)结构伪类-nth-child

1 :nth-child()

• :nth-child(1)

  • 父元素中的第1个子元素

• :nth-child(2n)

  • n代表任意正整数和0

  • 是父元素中的第偶数个子元素(第2,4,6,8...个)

  • 和:nth-child同义

• :nth-child(2n+1)

  • n代表任意正整数和0

  • 是父元素中的第奇数个子元素

  • 和:nth-child同义

• :nth-child(-n+2)

  • 代表前2个子元素

2:nth-last-child()

• :nth-last -child() 从最后一个子元素开始往前计数

  • :nth-last-child (1) ，代表倒数第一个子元素

  • :nth-last-child(-n + 2) ，代表最后 2个子元素

122(理解)结构伪类-nth-of-type

• :nth-child()和:nth-of-type()的区别

  • :nth-of-type()计数时只计算同种类型的元素

123(理解)结构和否定伪类-roo-empty

• :root,根元素,就是HTML元素

• :empty:代表里面完全空白的元素

• :not()否定伪类

  

125(掌握)border实现图形和旋转

• border:可以实现给盒子增加边框,亦可以实现一些形状

  • 比如三角形

  • 

• border或者 CSS的特性我们可以做出很多图形 :

  https://css-tricks.com/the-shapes-of-css/#top-of-site

126(理解)网络字体-网络字体的使用流程和原理

• web fonts的工作原理

  • fonts获取到想要的字体

  • 在CSS中使用字体html/css/JavaScript/img/fonts

  • 将所有资源一起部署到服务器

• 工作原理-开发者角度

• 

• 工作原理-用户角度

  

127(掌握)网络字体-网络字体的使用过程

• 第一步:下载一个字体

  • 字体天下:中文字体免费下载和在线预览-字体天下

  • 默认下载的事ttf文件

• 第二步:使用字体

  • 将字体放到对应的目录中

  • 通过@font-face来引入字体,并设置格式

    • @font-face用来加载一个自定义的字体

  • 使用字体

128(理解)网络字体-网络字体的兼容性写法

• web fonts的兼容性写法

  

129(掌握)字体图标-字体图片的原理和使用流程

• 字体图标:字体可以设计成各种各样的形状,也可以设计成图标的样子,这就叫做字体图标

• 字体图标的好处

  • 方法不会失真

  • 可以任意切换颜色

  • 用到很多个图标是,文件相对图片较小

• 字体图标的使用

  • 登录阿里icons:iconfont-阿里巴巴矢量图标库

  • 下载代码,拷贝到项目中

• 字体图标的使用步骤

  • 第一步 : 通过 lin引入 iconfont.css 文件

  • 第二步 : 使用字体图标

• 使用字体图标常见的两种方式

  • 方式一:通过对应字体图标的Unicode来显示代码

    

  • 方式二:利用已经编写好的class,直接使用

    

130(掌握)精灵图-认识精灵图和获取过程

• CSS Sprite:

  • 一种CSS图像合成技术,把各种小图片合并到一张图片上,然后利用CSS的背景定位来显示对应的图片部分

  • CSS雪碧,CSS精灵图

• 使用CSS Sprite的好处

  • 减少网页的http请求数量,加快网页相应速度,减轻服务器压力

  • 减小图片总大小

  • 解决图片命名困扰,只针对一张集合的图片命名

• Sprite图片制作

  • PS

  • CSS Sprites Generator Tool | Toptal®

• 精灵图的原理:通过只显示图片的很小一部分来展示的

• 通常使用背景:

  • 设置对应元素的宽度和高度

  • 设置精灵图作为背景图片

  • 调整背景图片的位置来展示

• 如何获取精灵图的位置Sprite Cow - Generate CSS for sprite sheets

132(掌握)光标显示cursor-pointer

• cursor可以设置鼠标指针(光标)在元素上面时的显示样式

• cursor常见的设值有

  • auto：浏览器根据上下文决定指针的显示样式 ,比如根据文本和非文本切换指针样式

  • default ：由操作系统决定，一般就是个小箭头

  • pointer:一只小手,鼠标指针挪动到链接上面就是这个样式

  • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式

  • none ：没有任何指针显示在元素上面

133(掌握)布局-元素定位-标准流的理解

• 标准流(normal flow):默认情况下,元素是按照标准流排布

  • 从左到右,从上到下顺序摆好

  • 默认情况下,互相之间不存在层叠现象

• 标准流中可以用margin和padding对元素进行定位

  • 缺点:设置一个元素的margin或者padding,通常会影响到标准流中年其他元素的定位效果

  • 不便于实现元素层叠的效果

• 可以通过position属性来单独的对某个元素进行定位

134(掌握)布局-元素定位-position属性介绍

• 元素定位:允许从正常的文档流布局中取出元素,并使它们具有不同的行为

  • 比如放在另一个元素的上面

  • 比如始终保持在浏览器视窗内的同一位置

• 利用position可以对元素进行定位,常用取值有5个

  • 默认值:static:静态定位

  • 使用下面的值,可以让元素变成定位元素

    • relative:相对定位

    • absolute:绝对定位

    • fixed:固定定位

    • sticky:粘性定位

• 静态定位-static

  • 元素按照normal flow布局

  • left,right,top,bottom没有任何作用

135(掌握)布局-元素定位-相对定位的使用

• 元素按照normal flow布局

• 可以通过left,right,top,bottom进行定位

  • 定位参照对象是元素自己原来的位置

• 相对定位的应用场景

  • 在不影响其他元素位置的前提下,对当前元素位置进行微调

136(了解)布局-元素定位-梦幻西游案例

• 让梦幻西游的图片居中的办法

  • 背景居中(VS-HTML-css-15-4)

  • 

  • 相对定位(VS-HTML-css-15-5)

    

137(掌握)布局-元素定位-固定定位的使用

• 固定定位-fixed

  • 元素脱离normal fiow(脱离标准流,脱标)

• 可以通过left,right,top,bottom进行定位

  • 定位参照对象是视口

  • 当画布滚动时,固定不动

• 画布和视口

  • 视口

    • 文档的可视区域

    • 红框展示区域

    • 

  • 画布

    • 用于渲染文档的区域

    • 文档内容超出视口范围,可以通过滚动查看

    • 黑框展示区域

      

• 画布和视口宽高对比

  • 画布>=视口

140(掌握)布局-绝对定位-绝对定位的参考对象

• 绝对定位-元素脱离normal-flow(脱离标准流,拖标)

• 可以通过left,right,bottom,top进行定位

  • 定位参照对象是最邻近的定位祖先元素

  • 如果找不到这样的祖先元素,参照对象是视口

• 定位元素

  • position的值不为static的元素

  • position的值为relative,absolute,fixed的元素

141(掌握)布局-绝对定位-增强案例

• 子绝父相

  如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案是

  • 父元素设置position:relation(让父元素成为定位元素,但是父元素不脱离标准流)

  • 子元素设置position:absolute

  • 简称"子绝父相"

142(掌握)布局-position设置fixed或absolute元素的特点一

• 可以随意设置宽高

• 宽高默认由内容决定

• 不再受标准流的约束

  • 不再严格按照从上到下,从左到右排布

  • 不再严格区分块级(block),行内级(inline),行内块级(inline-block)的很多特性都会消失

• 不再给父元素汇报宽高数据

• 脱标元素内部默认还是按照标准流布局

143(掌握)布局-position设置fixed或absolute元素的特点二

• 绝对定位元素（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,magin:0

• 如果希望绝对定位元素在定位参照对象中居中显示,可以给绝对定位元素设置以下属性

  • left:0,right:0,top:0,bottom:0,magin:auto

  • 还得设置具体的宽高值(宽高小于定位参照对象的宽高)

144(掌握)值设置auto的效果总结

• auto:交给浏览器自己处理

• width:auto

  • 行内非替换元素:width:包裹内容

  • 块级元素:width:包含块的宽度

  • 绝对定位元素:width:包裹内容

145(掌握)布局-绝对定位练习-网易item

HTML-15-13元素定位-绝对定位的练习

148(掌握)布局-粘性定位-sticky的使用

• 粘性定位-sticky

  • 可以看做是相对定位和固定(绝对)定位的结合体

  • 它允许被定为的元素表现得像相对定位一样,直到它滚动到某个阈值点

  • 当达到这个阈值点时,就会变成固定(绝对)定位

  • 

• sticky:是相对于最近的滚动祖先包含滚动视口的

• position值对比

  

149(掌握)布局-定位元素的z-index设置

• z-index属性用来设置定位元素的层叠顺序(仅对定位元素有效)

  • 取值可以是正整数,负整数,0

• 比较原则

  • 如果是兄弟关系

    • z-index越大,层叠在越上面

    • z-index相等,写在后面的那个元素层叠在上面

  • 如果不是兄弟关系

    • 各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较

    • 而且这两个定位元素必须有设置z-index的具体数值

150(理解)布局-浮动-认识浮动

• float属性可以指定一个元素沿其容器的左侧或者右侧放置,允许文本和内联元素环绕它

  • float属性最初只用于在一段文本内浮动图像,实现文字环绕的效果

  • 早期的CSS标准中没有提供好的左右布局方案,因此在一段时间里它成为网页多列布局的最常用工具

• 绝对定位和浮动都会让元素脱离标准流,达到灵活布局的效果

• float的常用取值

  • none:不浮动,默认值

  • left:向左浮动

  • right:向右浮动

151(掌握)布局-浮动-浮动的常见规则

1浮动的规则一

• 元素一旦浮动后,脱离标准流

  • 朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止

  • 定位元素会层叠在浮动元素上面

  • 

2浮动的规则二

• 如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界

3浮动的规则三

• 浮动元素之间不能层叠

  • 如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)

  • 如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止

4浮动的规则四

• 浮动元素不能与行内级内容层叠,行内级内容会被浮动元素推出

  • 比如行内级元素,inline-block元素,块级元素的文字内容

  • 这个规则通常用来做图文环绕效果

  • 

5浮动的规则五

• 行内级元素,inline-block元素浮动后,其顶部将与所在行的顶部对齐

152(掌握)布局-浮动-行内元素的间隙处理

• 去除间隙的方法

  1.删除换行符(不推荐)

  2.将父级元素的font-size设置为0,然后再把子元素设置回来

  3.通过子元素(span)统一向一个方向浮动即可

  4.flex布局

  

153(掌握)布局-浮动-案例02-百度页码

HTML-CSS>16>06浮动的练习02

154(掌握)布局-浮动-案例03-京东商品布局01

HTML-CSS>16>07浮动的练习03

• 父级盒子的宽度=子盒子+margin-left+margin-right

 

154.1(掌握)布局-浮动布局-京东多列布局案例02

HTML-CSS>16>08浮动的练习04

154.2(掌握)布局-浮动布局-考拉多列布局方案一

HTML-CSS>16>09浮动的练习05-考拉多列布局方案1

• 设置考拉多列布局时,如何处理块中间的border问题

• 

 不足:box右侧的border还是会多出来,需要进行计算来调整

154.3(掌握)布局-浮动布局-考拉多列布局方案二

HTML-CSS>16>10浮动的练习05-考拉多列布局方案2

• 设置margin的负值

• 

155.1(掌握)布局-浮动布局-浮动的问题及清浮动

HTML-CSS>16>12浮动的问题-高度塌陷

• 浮动的问题-高度塌陷

  • 由于浮动元素脱离标准流,变成脱标元素,所以不再向父元素汇报高度

  • 解决父元素高度塌陷问题的过程,一般叫做清浮动(清理浮动,清除浮动)

  • 清浮动的目的

    • 让父元素计算总高度的时候,把浮动子元素的高度算进去

• 清除浮动-使用clear属性

  • clear属性

    • 可以指定一个元素是否必须移动(清除浮动后)到它之前的浮动元素下面

  • clear的常用取值:

    • left：要求元素的顶部低于之前生成的所有左浮动元素的底部

    • right: 要求元素的顶部低于之前生成的所有右浮动元素的底部

    • both：要求元素的顶部低于之前生成的所有浮动元素的底部

    • none：默认值，无特殊要求

• 清浮动的方法

  • 方法1: 给父元素设置固定高度

    • 扩展性不好（不推荐）

  • 方法2:在父元素最后增加一个空的块级子元素，并且让它设置clear: both

    • 会增加很多无意义的空标签，维护麻烦

  • 违反了结构与样式分离的原则（不推荐）

    

    

  • 方法3:给父元素添加一个伪元素(推荐)

    • 编写好后可以轻松实现清除浮动

    • 给父元素增加::after伪元素

      • 纯CSS样式解决，结构与样式分离（推荐）

        

156(理解)布局方案的总结和回顾

• 布局方案总结

  • normal flow(标准流) > 应用场景:垂直布局

  • absolute position(绝对定位) > 应用场景:层叠布局

  • float(浮动) > 应用场景:水平布局

157(理解)认识flex布局和flex布局的由来

• 认识flexbox(弹性盒子)

  • 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;

  • 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;

  • 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);

• flex布局是目前web开发中使用最多的布局方案：

  • flex 布局（Flexible 布局，弹性布局）;

  • 目前特别在移动端可以说已经完全普及;

  • 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;

• 为什么需要flex布局呢?

  • 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。

  • 但是这两种方法本身存在很大的局限性

    • 比如在父内容里面垂直居中一个块内容。

      • 之前的方法是把子元素设置成top为0,bottom为0,margin为0,auto,但是有多个子元素,且高度不同时,不好进行设置,

    • 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。

    • 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

158(掌握)flex布局-两个重要的概念-container-item

• 两个重要的概念

  • 开启了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 形式存在

159(掌握)flex布局-flex布局模型-主轴和交叉轴

• flex布局的模型

• flex相关的属性

160(掌握)flex布局-container-flex-direction

• flex-direction

  • flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

    • flex-direction 决定了 main axis 的方向，有 4 个取值

    • row（默认值）、row-reverse、column、column-reverse

  • 

161(掌握)flex布局-container-wrap

• flex-wrap决定了flex container是单行还是多行

  • nowrap（默认）：单行

  • wrap：多行

  • wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

• flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

  • 顺序任何, 并且都可以省略;

    

  

162(掌握)flex布局-container-justify-content

1 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 之间的距离

    

     

2 align-item

• 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：与基准线对齐

162(掌握)flex(布局)-container-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 之间的距离

164(了解)flex布局-item-order

• order 决定了 flex items 的排布顺序

  • 可以设置任意整数（正整数、负整数、0），值越小就越排在前面

  • 默认值是 0

  • 

165(了解)flex布局-item-align-self

• flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

  • auto（默认值）：遵从 flex container 的 align-items 设置

  • stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

166(掌握)flex布局-item-grow-shrink

1 item-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

2item-shrink

• flex-shrink 决定了 flex items 如何收缩(缩小)

  • 可以设置任意非负数字（正小数、正整数、0），默认值是 1

  • 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

• 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为

  • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

• flex items 收缩后的最终 size 不能小于 min-width\min-height**

167(掌握)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

168(掌握)flex布局-item-flex属性

• flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

• 单值语法: 值必须为以下其中之一:

  • 一个无单位数(<number>): 它会被当作<flex-grow>的值。

  • 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。

  • 关键字none，auto或initial.

• 双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。

  • 第二个值必须为以下之一：

    • 一个无单位数：它会被当作 <flex-shrink> 的值。

    • 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

• 三值语法:

  • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。

  • 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。

  • 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值

169(掌握)flex布局-flex布局的问题

htm-css>17>15flex布局常见问题

• 解决方案

• 后面添加<span>,添加span的个数是列数-2;在CSS中把span的宽度设置成和块级元素一样的宽度