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