11.23笔记

css的权重
当不同选择器的样式设计发生冲突，高权重选择器的样式会覆盖低权重的选择器
标签选择器0001
class选择器0010
id选择器0100
伪类选择器0010
包含选择器的权重等于权重之和
属性选择器0010
伪元素选择器0001
内联样式：1000
权重相同后面的生效
text
outline: none
float文字环绕
盒子发生浮动，会失去原来的位置(脱离文档流)
多个盒子浮动，盒子会排列为一行(BFC)如果盒子同时左浮动，会从左到右依次排列
浮动可以让a|span设置宽高
overflow: hidden解决高度塌陷问题
claer: 清楚上一个元素的浮动
content padding影响大小
外边距
margin 上下左右;
margin 上下; 左右;
margin 上; 左右; 下;
margin 上; 右; 下; 左;
内边距
padding
上下不能用auto
清除默认内外边距
margin: 0;
padding: 0;
bix-sizing:不改变盒子大小，文字向内压缩
margin 0 auto水平居中

弹性盒子：弹性容器，弹性子元素
display: flex 给最近的副元素
flex-direction: 设置主轴方向
弹性元素默认在一行
flex-wrap: wrap;弹性元素可以换行
justfy-content: center 水平居中
                            end在尾部
                           space-around把剩余的空间平均分配给每个元素
                            space-between两边元素贴边剩余平分
交叉轴上的元素对齐方式
align-items: center垂直居中
align-content: space-between
.three{
  order: ;
}
越小越靠前，负数
flex-grow: ;占剩余空间几份
flex-shrink: 0;不会被压缩，1可压缩
flex: 1;占剩余空间几份
align-self:flex-start;只改变自己的对齐方式
grid
display: grid;
grid-template-columns:列
grid-template-rows：行
row-gap:
column-gap:间距
grid-row: 1/1+n  n=跨几行
grid-column