定位
- 元素position属性的默认值static静态定位
1.相对定位
- position:relative;
- 参考物:元素自己
- 是否脱离文档流:不脱离(元素的初始位置还占据空间)
- 偏移距离
top:100px;自己的顶部参考自己的顶部向下移动100px
bottom:100px;自己的底部参考自己的底部向上移动100px
left
right
- 用法:实现元素的位置的微调
2.绝对定位
- position:absolute;
- 参考物:外层具有position属性的元素,一层一层向上查找,如果都没找到最终参考浏览器空白文档区域做定位
- 是否脱离文档流:脱离
- 偏移距离
top 自己的顶部距离参考物顶部的距离
bottom 自己的底部距离参考物底部的距离
- 用法:元素相互叠加的位置、大banner图(1920px)、下拉菜单
2.1.层叠顺序
z-index:10;
数值越大越靠前,没有单位
注意:同级之间可以通过数值大小调整层叠顺序
该属性必须有position属性才能生效
3.固定定位
- position:fixed;
- 参考物:浏览器空白文档区域
- 是否脱离文档流:脱离
- 偏移距离
- 用法:狗皮膏药广告
4.粘性定位
- position:sticky;
- 参考物:浏览器空白文档区域
- 是否脱离文档流:不脱离
- 偏移距离 top:100px;
- 用法:吸顶效果
补充
1.cursor: ;鼠标样式
pointer小手
2.那些属性可以给负值
z-index
background-position
margin
text-indent
top
bottom
left
right
letter-spacing
定位实现元素居中
1.父元素尺寸未知,子元素尺寸已知
父{
position: relative;
}
子{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50%; /*向下移动父元素高度的一半*/
left: 50%; /*向右移动父元素宽度的一半*/
margin-top: -50px; /*向上移动自己高度的一半*/
margin-left: -50px; /*向左移动自己宽度的一半*/
}
2.父元素子元素尺寸都未知
注意:只适用于父元素尺寸大,子元素尺寸小
父{
position: relative;
}
子{
width: 30px;
height: 40px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
###Welcome to use MarkDown
定位的特殊用法:定位撑开元素尺寸
父元素{
width: 500px;
height: 500px;
border: 2px solid #000;
position: relative;
}
子元素{
background: red;
position: absolute;
top: 10px; 自己顶部距离父元素顶部10px
bottom: 20px; 自己底部距离父元素底部20px
left: 30px; 自己左侧距离父元素左侧30px
right: 40px; 自己右侧距离父元素右侧40px
}
宽高自适应
1.宽高默认值
width:auto;
height:auto;
2.最大最小宽高
min-width最小宽度
max-width最大宽度
min-height最小高度
max-height最大高度
body{
min-width: 1210px;
}
3.平分浏览器高度
html,body{
height:100%;
}
4.父元素高度塌陷
- 父元素固定高度
- 父元素添加overflow:hidden;
父元素可以计算子元素高度 - 原因是该属性触发了BFC
- 清除浮动clear:left / right / both ;
- 万能清除浮动法
父元素:after{
content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
元素的隐藏
display:none; 消失,空间不再占据
visibility:hidden; 元素可见性:隐藏,元素的空间还在
伪对象选择器
1.给第一个字符添加样式
.box:first-letter{}
2.给第一行添加样式
.box:first-line{}
3.添加第一个子元素
.wrap:before{
content: "";
display: block; 默认添加的元素为行内元素
width: 100px;
height: 100px;
background: green;
}
.para:before{
content: "小明说:"; 添加文字
content:"url(img/arrow.png)"; 添加图片
}
4.添加最后一个子元素
.wrap:after{
content: "";
display: block;
width: 100px;
height: 100px;
background: blue;
}
回顾
1.宽高默认值
width:auto;和100%不一样
height:auto;和不设置height是一样的
子height:inherit;继承
2.最大最小宽高
最小宽 min-width
最大宽 max-width
最大高 max-height
最小高 min-height
3.平分body的高度
html,body{height:100%}
4.高度塌陷
固定高度
overflow:hidden/auto/scroll;
因为父元素触发了BFC,子元素高度参与计算
清除浮动
clear:left/right/both;
万能清除浮动法
父元素:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
:before,:first-letter,:first-line
表单元素
1.单选按钮
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女
- 有相同的name,不同的value
- checked代表默认被选中,等同于checked="checked"
2.复选框
<input type="checkbox" name="job" value="bj"/>北京
- 有相同的name,不同的value
- checked代表默认被选中,等同于checked="checked"
3.下拉菜单
<select name="cities" size="5">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
</select>
- size 显示的条数
- selected 默认被选中,等同于selected="selected"
4.多行文本域
<textarea name="intro" rows="4" cols="40"></textarea>
- rows行数
- cols 一行包含的字符数
- 给textarea添加css(resize:none;)禁止用户更改元素尺寸
5.文件上传
<input type="file">
- 不同浏览器默认样式不同
6.表单字段集
<fieldset id="">
<legend>标题</legend>
<p>10086</p>
</fieldset>
7.关联文本
- 第一种方法
<label>
<input type="radio" name="gender" value="male"/>男
</label>
- 第二种方法
<input type="radio" name="gender" value="male" id="male"/>
<label for="male">男</label>
label的for属性关联控件的id属性
表格
1.表格行分组
表头thead、表主体tbody、表尾tfoot
2.表格标题
<caption></caption>
3.表格边框
th,td{
border: 1px solid #000;
}
4.合并表格(细线表格1px粗细)
table{border-collapse:collapse;}
5.单元格与单元格之间的间距
代替掉了table的cellspacing="10px"属性
table{border-spacing: 20px;}
6.无内容单元格显示、隐藏(前提是表格不能合并)
th,td{empty-cells:hide;}
7.固定表格布局
table{tbale-layout:fixed;}
- 前提table固定宽度,每一列固定宽度
- 默认是自动表格布局,值为auto
- 自动表格布局,表格最终的宽度是由内容决定的,所以最终确定尺寸前要遍历表格里所有的内容
8.表格标题位置
table{caption-side:top / bottom;}
面试题:一侧固定一侧自适应布局
1.浮动
2.固定定位
3.calc()计算尺寸方法
4.BFC方法
5.flex弹性盒
6.grid布局
BFC
独立的渲染区域,块级格式化上下文
1.BFC布局规则
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)
- 每个元素的margin box的左边, 与包含块border box的左边相接触
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时,浮动元素也参与计算
2.如何触发BFC
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
回顾
1.表单
行内元素中能设置宽高的元素:img,input,select,textarea
他们也是行内块
2.表格
表格行分组
thead表头、tbody表主体、tfoot表尾
- 边框
th,td{border:1px solid #666;}
- 边框合并
table{border-collapse:collapse;}
- 单元格间距
table{border-spacing:20px;}
- 固定表格布局
table-layout:fixed固定 / auto自动;
- 无内容单元格隐藏(前提是表格边框不能合并)
td{empty-cells:hide;}
- 表格标题位置
table{caption-side:top / bottom ;}
3.BFC
块级格式化上下文,是一个独立的渲染区域
- 浮动的子元素高度参与计算
- 子元素不会影响外层元素
- BFC区域不会与浮动元素重合
触发bfc
html
float不为none
position:absolute和fixed;
overflow:不为visible
display:inline-block,flex,inlin-flex
渐变
从一个颜色到另一个颜色有一个平滑的过渡过程
1.线性渐变
background:linear-gradient(方向,颜色1,颜色2,颜色3...)
方向:
to right 由左向右
to left 由右向左
15deg 渐变的方向与垂直方向的夹角为15度
2.径向渐变
background:radial-gradient(颜色1,颜色2...)
3.重复线性渐变
background:repeating-linear-gradient(方向,颜色1 0%,颜色2 20%,...)
4.重复径向渐变
background:repeating-radial-gradient(颜色1 0%,颜色2 20%,...);
过渡
- 元素从一个状态到另一个状态的平滑的变换过程
- 简写属性
transition:过渡的属性 过渡时间 速度效果 延迟时间;
- 添加位置
1.添加给:hover里是移入有过渡,移出没有过渡
2.添加给元素本身,移入移出都有过渡
- 速度效果的值
匀速过渡 linear
先慢后快 ease-in
先快后慢 ease-out
由慢变快后变慢 ease-in-out
默认值,慢速开始慢速结束 ease
- 多属性过渡效果
transition: width 1s linear,height 2s ease-in,background 1s linear .4s; 每个属性过渡效果不同
transition: all 1s linear; 每个属性过渡效果完全相同
- transition简写属性中每一个值对象的独立属性(了解)
transition-property:过渡的属性
transition-duration:过渡的持续时间
transition-timing-function:过渡的动画
transition-delay:延迟时间
浏览器前缀
-webkit- 谷歌google chrome 和 Safari
-moz- 火狐Mozilla Firefox
-o- 欧朋opera
-ms- IE浏览器
- 举例
-ms-transition: all 2s linear ;
background: -webkit-linear-gradient(90deg,#d6dfe9 0%,#fff 100%);
2d转换
1.位移
transform:translate(100px);
沿x轴移动,正值向右,负值向左
transform:translate(100px,200px);
第一个值代表x轴移动,第二个值代表y轴移动
transform:translateX(100px);
沿x轴移动
transform:translateY(100px);
沿y轴移动
2.旋转
transform:rotate(30deg);
正值代表顺时针旋转,负值代表逆时针旋转
2.1 转换中心
transform-origin:0px 0px; 设置坐标点
transform-origin:right top; 设置方向
transform-origin:50% 50%; 设置百分比
3.缩放
transform:scale(2);
一个值是水平垂直都缩放
transform:scale(2,0.5);
第一个值代表水平方向,第二个值代表垂直方向
transform:scaleX(2);
水平方向缩放
transform:scaleY(2);
垂直方向缩放
4.倾斜
transform:skew(30deg);
transform:skewX(30deg);
transform:skewY(30deg);
元素既位移又旋转
transform: translateX(200px) rotate(90deg);
位移和移动空格隔开
各种居中办法
1.文本和图片的水平居中
text-align:center;
2.单行文本的垂直居中
line-height:父元素高度;
3.背景图的居中
background-position:center center;
4.定位方法居中(2种方法)
5.translate方法实现元素水平垂直居中
.father{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/*这里的50%是子元素自己尺寸的一半*/
/*margin-top: -50px;
margin-left: -50px;*/
}
###Welcome to use MarkDown
回顾
1.渐变
线性渐变
background:linear-gradient(方向,颜色1,颜色2...)
径向渐变
background:radial-gradient(颜色1,颜色2...)
重复线性渐变
background:repeating-linear-gradient(方向,颜色1,颜色2...)
重复径向渐变
background:repeating-radial-gradient(颜色1,颜色2...)
2.过渡
transition:过渡属性 过渡时间 速度效果 延迟时间;
元素本身添加过渡,代表移入移出都有过渡
给:hover添加过渡,代表只有移入有过渡
多属性加不同过渡
transition:width 1s,height 2s;
多属性加相同过渡
transition:all 1s linear;
-webkit-transition:all 1s linear;
过渡属性transition-property:width;
过渡时间transition-duration:1s;
动画效果transition-timing-function:linear;
延迟时间transition-delay:0s;
3.2d转换
位移
transform:translate(100px);
transform:translate(100px,200px);
transform:translateX(100px);
transform:translateY(100px);
旋转
transform:rotate(30deg);
缩放
transform:scale(2);
transform:scale(2,0.5);
transform:scaleX(2);
transform:scaleY(2);
倾斜
transform:skewX(30deg);
transform:skewY(30deg);
转换中心:transform-origin
4.浏览器前缀
-webkit-:谷歌和Safari
-moz-:火狐
-o-:欧朋Opera
-ms-:IE
5.
background:linear-gradient(方向,颜色1,颜色2...);
background:-webkit-linear-gradient(方向,颜色1,颜色2...);
background:-moz-linear-gradient(方向,颜色1,颜色2...);
background:-o-linear-gradient(方向,颜色1,颜色2...);
background:-ms-linear-gradient(方向,颜色1,颜色2...);
3d转换
景深,模拟人眼距离物体的距离,有较明显的近大远小的效果
perspective:2000px; 给父元素添加
***子元素保留3d转换位置
transform-style:preserve-3d; 给父元素添加
元素背面不可见
backface-visibility: hidden;
1.位移
transform:translate3d(100px,200px,300px);
x,y,z三个轴的共同作业
transform:translateX(100px) translateY(200px) translateZ(300px);
transform:translateZ();
z轴方向的移动
2.旋转
transform:rotateX();
transform:rotateY();
transform:rotateZ();
transform:rotate3d(x,y,z,30deg);
x,y,z指的是矢量方向,最后一个值代表旋转角度
transform:rotate3d(1,0,0,30deg); x轴旋转
transform:rotate3d(0,1,0,30deg); y轴旋转
transform:rotate3d(0,0,1,30deg); z轴旋转
transform:rotate3d(1,1,0,30deg); 旋转
3.缩放
transform:scaleZ(2);
transform:scale3d(2,0.5,2);
动画
过渡必须有触发条件(点击、鼠标移入)、过渡只能在两个状态间执行
动画可以浏览器打开直接运行,也可以鼠标事件执行,动画可以执行多个不同状态
1.定义动画
@keyframes 动画名称{
0%或from{
background:red;
}
50%{
background:green;
}
100%或to{
background:blue;
}
}
0%指的是动画执行事件
2.执行动画
animation:动画名称 执行时间 速度效果 延迟时间 执行次数 是否反向执行;
执行次数:无限执行infinite
是否反向执行:反向执行alternate
3.暂停动画
animation-play-state:paused;
H5新增的语义标签
section元素 表示页面中的一个区块
article元素 文章内容
aside元素 侧边栏,辅助信息
header元素 页面头部
footer元素 页面底部
nav元素 页面导航
<nav>
<li></li>
<li></li>
</nav>
figure元素 表示一段独立的流内容,使用figcaption元素为其添加标题
main 代表页面的表示页面中的主要的内容
hgroup标题的一个分组
mark高亮文本
time时间
为什么要语义化
1.代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
2.有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
3.提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
4.便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
5.方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。
音频和视频
视频video
音频audio
controls属性:向用户显示控件,比如播放按钮。控件可能不一样
autoplay属性:自动播放。谷歌屏蔽了该功能
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在加载时显示的图像,直到用户点击播放按钮
<source></source>定义媒介资源,写在video里面
规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
<video>
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogg" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
</video>
video支持的格式:mp4.ogg.webm(每个浏览器兼容性不同)
audio支持的格式:mp3.ogg
H5新增的表单元素
<input type=""/>
Type=“email” 限制用户必须输入邮箱类型
Type=“url” 地址类型
Type=“range” 滑动条
Type=“number”数字类型
Type=“search” 搜索意义的表单
Type=“color” 颜色选择的表单
以下有兼容问题:
Type=“time” 时间类型
Type=“month” 月类型
Type=“week” 周类型
Type=“datetime-local” 选取本地时间
Type=“date” 日期
<output></output>接收两个控件计算的值
<form action="">
<input type="email" />
<input type="submit" value="提交"/>
</form>
H5新增的属性
1.list属性
<input type="url" list="url-lists"/>
<datalist id="url-lists">
<option value="http://www.baidu.com" label="百度"/>
<option value="http://www.google.com" label="谷歌" />
<option value="http://www.jd.com" label="京东" />
</datalist>
2.placeholder 提示文本
3.autofocus
页面中某一个控件自动获取焦点
4.required 必须填写
5.pattern 正则
<input type="text" pattern="[0-9][A-Z]{3}"/>
6.min,max,step
min最小值
max最大值
step步长
<input type="number" min="0" max="100" step="5"/>
7.multiple多选
8.novalidate取消验证
9.autocomplete自动完成
<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
回顾
1.H5新增的语义标签
section 区块
article 文章、内容
aside 侧边栏
nav 导航
<nav>
<li></li>
</nav>
header 头部
footer 底部
main 主体
hgroup 标题分组
figrue 独立的流内容
figcaption 流内容发标题
mark 高亮文本
time 时间
2.H5新增表单元素
<input type=""/>
email 邮箱
url 地址
number 数字
range 滑块
color 颜色
search 搜索意义的表单
date 日期
week 周
datetime-local 本地时间
time 时间
month 月
<output></output>
3.音频视频
视频video
音频audio
4.新增属性
placeholder 提示文本
list
require 必须
novalidate 取消验证
autofocus 自动获取焦点
autocomplete 自动完成
pattern 正则
min max step
multiple 多选
css3
渐进增强和优雅降级
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
css3选择器
一、层级选择器
E>F 子代选择器(非css3)
E+F 匹配紧邻元素E的后面的元素F(非css3)
相邻兄弟选择器
E~F 选择前面有E元素的每个F元素
二、属性选择器
1、E[attr]:只使用属性名,但没有确定任何属性值
2、E[attr="value"]:指定属性名和属性值(值完整)
3、E[attr~="value"]:指定属性名,并且具有属性值,
此属性值是一个词列表,并且以空格隔开,
其中词列表中包含了一个value词
4、E[attr^="value"]:属性值是以value开头的(一部分也可以)
5、E[attr$="value"]:属性值是以value结束的(一部分也可以)
6、E[attr*="value"]:属性值中包含了value(一部分也可以)
7、E[attr|="value"]:属性值是value或者以“value-”开头的值
(比如说zh-cn);
***4/5/6是css3新增的选择器
三、伪类选择器
1.结构性伪类选择器
X:first-child 匹配子集的第一个X元素(非css3)
X:last-child 匹配子集的最后一个X元素
X:only-child 匹配唯一的子元素
X:nth-child(n) 匹配索引值为n的子元素,索引值从1开始
X:nth-last-child(n) 从最后一个开始算索引
(前五个是不区分类型)
X:first-of-type 匹配同类型兄弟元素中的第一个X元素
X:last-of-type 匹配同类型兄弟元素中的最后一个X元素
X:only-of-type 匹配同类型中唯一元素X
X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X
X:nth-last-of-type(n) 匹配同类型中的倒数第n个兄弟元素X
(这五个是区分类型的)
X:root匹配文档的根元素
X:empty匹配没有任何子元素,也没有文本的元素X
.wrap>:nth-child(even){ 代表偶数
background: red;
}
.wrap>:nth-child(odd){ 代表奇数
background: yellow;
}
.wrap>:nth-child(3n){ 3的倍数
background: yellow;
}
2.目标伪类选择器
E:target 选择匹配E的所有元素,且匹配元素被相关URL指向
3.语言伪类选择器
E:lang(language) 指定了lang属性,而且其为language(非css3)
4.UI元素状态伪类选择器
E:enabled 匹配(form表单)中处于可用状态的E元素
E:disabled 匹配(form表单)中处于不可用状态的E元素
E:checked 匹配(form表单)中处于选中状态的E元素
E::selection 匹配E元素中被用户选中的部分
启用状态<input type="text" enabled/>
禁用状态<input type="text" disabled/>
<input type="text" disabled/>代表元素禁用
input:checked+span{ +相邻兄弟选择器
background: pink;
}
5.否定伪类选择器
E:not(s) (IE6-8浏览器不支持)
匹配所有不匹配简单选择符s的元素E
6.动态伪类选择器(非css3)
E:link 超链接并未被访问过
E:visited 超链接已被访问过
E:active 元素被激活
E:hover 鼠标停留在元素E上
E:focus 元素获取焦点
给元素设置轮廓outline: 1px solid blue;
给元素去掉轮廓outline: none;
盒子阴影
box-shadow:水平阴影位置 垂直阴影位置 模糊距离 [阴影尺寸] 颜色 [内阴影inset];
文本阴影
text-shadow:水平阴影位置 垂直阴影位置 模糊距离 颜色 ;
文本换行的相关属性
word-wrap
属性值:
normal只在允许的断字点换行(浏览器保持默认处理)
break-word允许长单词或 URL地址换行到下一行
word-break
属性值:
break-all直接进行单词内的断句
keep-all文本不会换行,只能在半角空格或连字符处换行
背景新增的属性
1.background-origin背景原点
padding-box 背景图像内填充的相对位置(默认值)
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
2.background-clip背景裁切
border-box 背景被裁剪到边框盒(默认值)
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
3.background-size背景尺寸
cover把背景图像扩展至足够大,完全覆盖背景区域
contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
具体数值/百分比
4.多背景属性
background:url(),url();
边框新增属性
1.border-image图片边框
border-image-source 路径
border-image-slice 图片边框向内偏移,不带单位px
border-image-repeat:平铺(repeat)/铺满(round)/拉伸(stretch)
border-image-outset 边框图像区域超出边框的量
简写形式 border-image:路径 偏移 平铺;
2.border-radius 圆角边框
border-radius:5px;
border-radius: 5px 10px 20px 50px;从左上角开始顺时针设置倒角
border-radius: 30px/15px;倒椭圆形
轮廓
outline-offset轮廓向外偏移
回顾
1.css3选择器
1.层级选择器
div~p{}
2.属性选择器
[class^="a"]
[class&="a"]
[class*="a"]
3.伪类
:last-child
:nth-child()
:nth-of-type()
:nth-last-child
:empty
:root
2.css3属性
边框阴影box-shadow
文本阴影text-shadow
2d转换
3d转换
过渡
动画
渐变
文本换行
边框倒角
图片边框
背景原点background-origin
背景裁切background-clip
背景尺寸background-size
多背景
多列
弹性盒
怪异盒子
盒模型:标准盒模型、怪异盒模型
触发怪异盒 box-sizing:border-box;
标准盒模型 box-sizing:content-box;默认值
怪异盒如何计算元素尺寸:
width和height是包含内容、内边距、边框尺寸的
标准盒如何计算元素尺寸:
width和height只是内容区域
移动端 *{box-sizing:border-box;}
弹性盒、flex布局
给父元素添加
1.display:flex/inline-flex;
flex将对象作为弹性伸缩盒显示
inline-flex将对象作为内联块弹性伸缩盒显示
2.flex-direction (主轴排列方向)
row 默认,横向一行排列
row-reverse 反转横向排列
column 纵向排列
column-reverse 反转纵向排列
3.justify-content(主轴对齐方式)
flex-start默认,顶端对齐
flex-end末端对齐
center居中对齐
space-between两端对齐,中间自动分配
space-around自动分配距离
*默认元素在主轴上容不下不会换行,会被压缩
4.align-items(侧轴对齐方式)
flex-start 侧轴起始边界
flex-end 侧轴结束边界
center 居中放置
baseline 基线对齐
stretch 默认值,项目被拉伸以适应容器
5.flex-wrap设置换行
nowrap 容器为单行,该情况下子项可能会溢出容器
wrap 容器为多行,子项内部会发生断行
wrap-reverse 反转排列
6.align-content(行与行之间对齐方式)
flex-start 没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐,中间自动分配
space-around 自动分配距离
stretch 默认值,项目被拉伸以适应容器
给子元素添加
1.align-self 灵活容器内被选中项目的对齐方式
--可重写灵活容器的align-items属性
auto 默认值,元素继承了它的父容器的align-items属性
stretch 元素被拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
2.order 排序优先级
数字越大越往后排,默认为0,支持负数
3.flex-grow 项目的放大比例
flex-grow:1;
同flex:1;--放大比例
4.flex-shrink 项目的缩小比例
flex-shrink:0;元素不缩小
5.flex-basis 项目的长度
6.flex为345的简写形式
默认值 flex:0 1 auto;