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