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的特性我们可以做出很多图形 :
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图片制作
-
精灵图的原理:通过只显示图片的很小一部分来展示的
-
通常使用背景:
-
设置对应元素的宽度和高度
-
设置精灵图作为背景图片
-
调整背景图片的位置来展示
-
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的宽度设置成和块级元素一样的宽度