1、图片比例
object-fit
设置图片比例大小
栗子:如果图片本身的大小是400*500,需要强制设置图片的大小是300*300
fill 强制图片按照300*300显示
none 按照图片本身大小500*400显示
cover 图片显示等比显示,可能有部分内容显示不全
contain 图片等比显示,图片完整显示,但是有空白
scale-down 跟contain效果差不多
2、图片边框
border-image:路径 内偏移 平铺方式;
border-image-source 设置图片边框的路径
border-image-slice 设置图片边框向内偏移
border-image-repeat 设置图片平铺方式
stretch 拉伸 (默认值)
repeat 平铺
round 铺满
border-image-outset 设置图片往外偏移(值设置倍数,可以设置多个值)
3、盒模型的计算方式
标准盒子和怪异盒子组成结构都一样,就是盒子大小的计算方式不同
box-sizing:
border-box 转换成怪异盒
content-box 标准盒子(默认按照标准盒计算)
标准盒子:
总宽度:width+左右的padding+左右的border
怪异盒子:
总宽度:width(包含padding+border)
4、弹性盒:flex布局
父元素控制子元素按照主轴反向进行排列
display:flax
弹性盒可以设置单独内容水平垂直居中
父元素:display:flex
子元素:margin:auto
弹性盒子的子元素也称为灵活元素,灵活元素的类型是内联也可以设置宽高
父元素设置属性
1、设置主轴方向
flex-direction
x轴(水平左边是顶端,右边是低端)
row 默认 x轴的顶端显示排列
row-reverse x轴的底端显示排列
y轴(垂直上边是顶端,下边是低端)
column y轴的顶端显示排列
column-reverse y轴的底端显示排列
2、设置灵活元素是否换行
flex-wrap
nowrap 默认 挤压宽高不换行
wrap 自动换行
wrap-reverse 换行内容反向显示
简写 主轴和换行的简写
3、flex-flow:row nowrap
主轴对齐方式
4、justify-content
flex-start 主轴顶端对齐
flex-end 主轴底端对齐
center 主轴居中
space-between 两端对齐,中间自动平分
space-around 盒子左右的距离相等
space-evenly 所有的距离自动平分
侧轴对齐方式
5、align-items
flex-start 主轴顶端对齐
flex-end 主轴底端对齐
center 主轴居中
stretch 默认值,如果y轴是侧轴,不设置高,拉伸高
如果X轴是侧轴,不设置宽,拉伸宽度
baseline 内容对齐,一般情况下flex-start一样
设置多行内容的侧轴
6、align-content:
flex-start 侧轴顶端对齐,取消行间距
flex-end 侧轴底端对齐,取消行间距
center 侧轴居中,取消行间距
space-between 行间距两端对齐,中间间距平分
space-around 行间就两遍距离平分
space-evenly 所有行间距平分
子元素设置的属性
设置内容的排列顺序
order
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
单独灵活元素的侧轴
align-self
flex-start 单独灵活元素的侧轴顶端对齐
flex-end 单独灵活元素的侧轴底端对齐
center 单独灵活元素的侧轴居中
stretch 高度拉伸
baseline 跟flex-start一样
auto 跟父元素align-items的值一样
栗子:
父元素宽500px 超出值100
3个盒子 收缩
100 1
200 2
300 3
加权值:盒子本身的宽度*收缩的选项进行相加
100*1+200*2+300*3=1400
收缩值
(盒子本身的宽度*收缩的选项/加权值)*超出值
第一个盒子的收缩值: 100*1/1400px*100
盒子本身大小-收缩值
父元素宽400px 超出值200px
200 0
200 1
200 2
加权值:盒子本身的宽度*收缩的选项进行相加
200*0+200*1+200*2=600
收缩值 200/600*200