一、网页重构

1、表单：

点击用户名可以获取焦点。

<!-- 表单 -->
<form action="">
    <label for="username">用户名</label>
    <input id="username" type="text" placeholder="请输入用户名">
    <label for="password">密码</label>
    <input id="password" type="text" placeholder="请输入密码">
</form>

2、CSS选择器：

元素选择器 h1 img p
类选择器 .className
id选择器 #id
通配符选择器 *
层级选择器 selector1 selector2
组合选择器 selector1,selector2
伪类选择器（增加行为） selector：hover
伪元素选择器（增加元素） selector::before selector::after

h1::before {
            content: "123";
        }

3、选择器权重

id选择器>类选择器>元素选择器
相同选择器后面覆盖前面的

4、设置最高权重：

!important

5、盒子模型：

margin 上右下左
元素实际宽度=width，实际高度=height：

box-size:border-box;

元素边距初始化：

*{
    margin: 0px;
    padding: 0px
}

image.png

6、浮动布局：

脱离文档流，不占位，后面元素会重叠。

float:left;

清除浮动：

<div class="container clear">
    <div class="content"></div>
    <div class="slider"></div>
</div>
<div class="box"></div>
    
.clear::before .clear::after {
    content: "";
    display: block;
    clear: both;
}

7、CSS定位:

绝对定位：absolute
脱离文档流；参照物是浏览器左上角。
相对定位：relative
不脱离文档流；参照物是元素原位置。
固定定位：fixed
参照物是浏览器视窗位置。

8、音频和视频：

controls 控制面板 muted静音 视频只有在静音下才会自动播放 autoplay视频自动播放。

<audio src="media/1.mp4" controls></audio>
<video src="media/2.video" controls muted autoplay></video>

9、CSS新增样式：

/* 圆角 */
border-radius: 50%; 
/* 阴影 */
box-shadow: 10px 20px 10px blue;
/* 形变 */
transform: rotate(45deg);
/* 设置旋转的原点 */
transform-origin: 0 0;
/* 过渡属性 持续时间 过渡函数 延迟时间 */
transition: transform 1s ease 1s;

10、动画效果：

keyframes

11、flex布局：

image.png

12、grid布局：

.container {
    display: grid;
    width: 800px;
    height: 500px;
    border: 1px solid blue;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    /* 纵向布局 */
    grid-auto-flow: column; 
    /* 单元格在grid中的对齐方式 */
    justify-content: center;
    align-content: center;
    /* 项目在单元格对齐方式 */
    justify-items: center;
    align-items: center;
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}

13、响应式页面：

/* 小于600px的样式 */
@media screen and (max-width:600px) {
    .box {
    width: 200px;
    height: 200px;
    background-color: red;
    }
}

14、rem设置移动端页面尺寸：

image.png

font-size 30px 10rem相当于300px

image.png