1
------------恢复内容开始------------
box-sizing
box-sizing = content-box;(默认值)
css设置的宽度是容器内容的宽度(不包含边框或内边距),当改变border或padding的时候会搞乱布局。
box-sizing = border-box;(推荐清除默认样式时用)
css设置的宽度为容器整体的宽度(包括边框或内边距等内容),怎么操作都不会搞乱布局。
图标字体
阿里巴巴矢量图标库:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
1、搜索想要的图标加入购物车
2、完成后点击购物车添加至项目
3、使用方法有很多,这里使用Font class 下载到本地的方式。(在css3中学过Unicode方式)
4、解压,选择用到的东西复制到自己的font目录
5、在自己的html中引入iconfont.css
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
6、在阿里巴巴图标库 -> 我的项目中,选择要的图标字体,复制class名
7、在i标签的class中粘贴使用,第一个class名iconfont不能更改。
<i class="iconfont 粘贴到这里"></i>
8、在css中可以对iconfont类进行更改,如字体大小、字体颜色等。
Flex布局
//Flex 是 Flex Box 的缩写,意为“灵活的盒子”或“弹性的盒子”,所以flex布局一般称为弹性布局。
flex容器:所有含有 display:flex | inline-flex; 的容器都是flex容器。
flex项目:flex容器的所有子元素都是flex项目。(不包括孙元素)
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
display属性
display:flex;
沿主轴方向,作为弹性伸缩盒显示,有固定宽度。
display:inline-flex;
沿主轴方向,作为弹性伸缩盒显示,宽度由内容撑开。
//类似display:block与display:inline-block
flex-direction属性
//决定主轴的排列方向,默认 flex-direction:row ,起点在左边
row-reverse
主轴为水平方向,起点在右边
column
主轴为垂直方向,从上往下排
column-reverse
主轴为垂直方向,从下往上排
flex-wrap属性
//决定是否换行和怎样换行,默认flex-wrap:nowrap; 默认不会换行,所有东西都压缩到一行显示。
wrap
自动换行,不会压缩,第一行在上面,依次往下换行
wrap-reverse
自动换行,不会压缩,第一行在最下面,依次往上换行。
flex-flow属性
//是flow-direction 与 flow-wrap的组合写法,默认flex-flow:row nowrap;
justify-content属性
//决定项目的对齐方式,默认 justify-content:flex-start 默认左对齐
flex-end
项目右对齐
flex-center
项目居中对齐
space-between
------------恢复内容结束------------