CSS笔记
css权重
ID（100）> class（10）> element（1）
css最高权重
!important
块元素（block）
可以设置宽度和高度，独立成行。
h1~h6、p、div、ul、li
行内元素（内联元素、块级元素）(inline)
不可以设置宽度和高度，不独立成行
a、span
行内块元素(inline-block)
可以设置宽度和高度，不独立成行
img、input、button
绝对定位（absolute）
脱离文档流
默认参照物为浏览器视窗的左上角
相对定位（relative)
不脱离文档流
默认参照物为此元素为位置
固定定位（fixed）
脱离文档流
默认参照物为浏览器视窗位置
设置z轴（z-index）
值为整数
数值大则在前方显示
设置参照物
父级为定位元素，子级的绝对定位会以父级为参照物
媒体元素
audio 音频
video 视频
媒体元素属性
controls 显示控制面板
autoplay 视频自动播放
muted 静音
形变
transform:
rotate(); 旋转 deg 单位表示角度
scale(); 收缩
translate(); 位移
transtion简写
属性 秒数 函数 延时
设置flex容器
flex-direction：设置flex项目排列方向
justify-content：flex项目主轴排列方式
align-items：flex项目在交叉轴的排列方式
flex-direction
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
justify-conte
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-item
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
stretch（延伸）（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
flex项目
flex-grow：属性定义项目的放大比例，默认为0，空间充足，等比例补全。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis：主轴排列为宽度，交叉轴排列为高度，设置px，默认值是auto。
flex：综合上面三个样式。
align-self：flex项目的对其方式（auto | flex-start | flex-end | center | baseline | stretch）
grid容器布局
<div class="container">
<div class="itme">1</div>
<div class="itme">2</div>
<div class="itme">3</div>
<div class="itme">4</div>
<div class="itme">5</div>
<div class="itme">6</div>
<div class="itme">7</div>
<div class="itme">8</div>
<div class="itme">9</div>
</div>
.container {
width: 790px;
height: 400px;
border: 1px solid red;
display: grid;
/* grid-auto-flow: column; 纵向排列*/
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.itme {
border: 1px solid blue;
}
grid项目在单元格中的对齐方式
justify-items
align-items
单元格在整个gird容器中的对齐方式
justify-content
justify-content
