css的一些基本属性

CSS属性的名称是不会改变的，能改变的只有属性的取值。
width 宽度
height 高度
color 字体颜色
background-color 背景颜色
text-align 字体格式(居中，靠左，靠右)
line-height 字体上下(靠上，靠下，垂直居中)
margin 设置所有外边距属性。该属性可以有 1 到 4 个值。
/例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4
margin:10px;
所有 4 个外边距都是 10px/
padding 设置所有内边距属性。
font-size 字体大小 （单位为像素）
border 设置边框
display 元素应该生成的框的类型
/*
flex 弹性布局
1.设置div为弹性盒子布局
display:flex
2.设置子元素的排列方向
flex-direction
3.设置子元素在一行显示不下后是否换行或压缩自己大小
4.设置主轴的对齐方式
justify-content
5.设置交叉轴的对齐方式
align-items
6.设置子元素的占比
flex-grow
/
border-radius 设置四个 border--radius 属性，该属性允许你为元素添加圆角边框。单位px。
/flex容器指的是父元素
以下属性写在父元素的选择器里面
display:flex
下面所有属性使用的前提是先写了display:flex，将父元素改为flex元素，一个div既可以成为它的子元素的容器也可以成为它的父元素的子项目，因为div是可以无线嵌套的。
flex-wrap:nowrap|warp|warp-reverse
1.nowrap是默认值，表示当父元素一行显示不下所有子元素时，子元素不会自动换行，会压扁自己
2.wrap与nowrap相反，子元素会自动换行
3.wrap-reverse 子元素会自动换行，且行会颠倒
4.flex-direction:row|row-reverse|colume|colume-reverse
row是默认值，表示子元素会按行进行排列
row-reverse表示子元素按行排列，但是会颠倒
column表示子元素按列排列
column-reverse表示子元素按列排列，但是子元素会颠倒
justify-content:flex-start|flex-end|space-around|space-between
flex-start 表示子元素沿着主轴的起点对齐
flex-end 表示子元素沿着主轴的结束点对齐
center 表示子元素沿着主轴居中对齐
space-around 表示所有子元素外边距等距
space-between 表示第一个子元素靠起点对齐，最后一个元素靠着结束点对齐，中间的子元素外边距等距
交叉轴对齐方式
align-items:stretch|flex-start|flex-end|center|baseline
1.stretch默认值，子元素的高度会拉伸跟父元素一样高
2.flex-start，子元素沿着交叉轴起点排列
3.flex-end，子元素沿着交叉轴的结束点排列
4.center，子元素在交叉轴居中排列
5.baseline，所有子元素沿着最后一段文字的底线排列/
text-decoration 设置文本位置(靠左，靠右，居中)
font-weight 设置字体粗细，bold为加粗（常用）