css常用属性

Posted 2023-02-24 绿叶清风

css常用属性

box-sizing: border-box就是将border和padding数值包含在width和height之内,这样的好处就是修改border和padding数值盒子的大小不变;//一般盒子都会加上这个属性
padding:3px 2px; （上下3px 左右2px）
padding: 20px 40px 60px; (上20px；左、右40px；下60px）
flex-direction:控制子元素水平排列方向
   row:水平从左到右排
   row-reverse:从平从右往左排
   column:垂直方向从上往下排
   column-reverse:垂直方向从下往上排
justify-content: 
   flex-start:从行首起始位置开始排列。具体与flex-direction有关
   flex-end:从行尾位置开始排列。具体与flex-direction有关
   space-between:均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。（没有边距）
   space-around：均匀排列每个元素，每个元素周围分配相同的空间。(有边距)
   
align-items: //控制子元素垂直排列方向
  stretch:默认值。元素被拉伸以适应容器
  center:	元素位于容器的中心。
  flex-start:元素位于容器的开头
  flex-end:元素位于容器的结尾。
align-content：

flex-wrap: 设置容器内项目是否自动换行
   nowrap:项目不换行（这个是默认值）
   wrap:项目在超出容器时进行换行
   wrap-reverse:同 wrap 值，只是换成反序方向。    
flex:1  均匀分配元素