CSS笔记（待完善）

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