本文部分图片来自阮一峰博客，若侵权，望告知。
1.CSS学习
2.css的一些标签学习
css图
标签
width：（文字）设置段落的宽度height：（文字）设置段落的高度color：（文字）颜色font-size：（文字）字体大小
text-align：（文字）文本对齐方式，有left，right，center，justify（两端对齐） 这个和word里面的对其方式类似
verticial-align：（文字）竖直方向对齐
text-indent:（文字）缩进多少
font-family：（文字）字体设置，Serif ，Sans-serif ，Monospace，Cursive ，Fantasy五种默认的字体
font-style：（文字）斜体设置
font-weight：（文字）粗体设置
margin：（区域）外边距，这个区域和外面的距离
padding：（区域）内边距，即里面的文字等和这个边框的距离
border：（区域）边框宽度属性
border-top：（区域）上边框的宽度
border-radius：（区域）圆角边框
border-bottom：（区域）下边框的宽度
line-height：（区域）设置两个区域之间的行间距
box-shadow：（区域）添加阴影
position：（定位）可以是absolution绝对定位，和static默认定位，和relative相对定位
top：（定位）距离顶部的距离
bottom：（定位）距离底部的距离
background：（背景）可以是颜色，位置，尺寸，区域等等
display：（元素）该元素使用什么样的形式展示，是不展示（none），默认（inline），列表展示（list-item）
vertical-align：（元素）垂直方向对其的方式，有父元素基线（baseline），顶端对其（top），底端对其（bottom）。在display属性为flex时这个属性就失效了。
z-index：（元素）堆叠顺序
3.css的flex学习
flex是弹性盒子（flexible box）的缩写
使用：
display:flex;
将显示通过flex进行，行内的元素：
display:inline-flex;
（1）基础
图片
如上图，main axis为主轴，cross axis为交叉轴，主轴的开始和结束分别为main start和main end 交叉轴的开始和结束为cross start 和cross end.
（2）属性
有如下属性可以设置在flex容器中：
flex-direction：主轴方向，row还是column.四种见下图： row | row-reverse | column | column-reverse
flex-wrap：控制单行还是多行，nowrap为单行，wrap为多行，wrap-reverse为反转wrap排列
flex-flow：是上面两个的复合，用在一个设置中。
justify-content：主轴的对齐方式，flex-start，flex-end，center，space-between，space-around
align-items：交叉轴的对齐方式，flex-start，flex-end，center，baseline，stretch（默认）
lign-content：多根轴线的对齐方式，flex-start，flex-end，center，space-between，space-around，stretch（默认）
对齐方式
从左向右分别为：column-reverse,column,row,row-reversse
（3）项目属性（每一个元素）
可以将6个属性设置在项目上面
order属性
默认0，可以定义项目的排列顺序，数值越小越靠前
flex-grow属性
定义放大比例，默认为0，不放大
flex-shrink属性
定义缩小比例，默认为1.如果空间不足，则将项目缩小
flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
slign-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
网友评论