前端笔记：杂记1——html、css

<input v-model="userIdentifyCode" type="text" placeholder="输入验证码" required>
在HTML中，required 是一个布尔属性（boolean attribute），用于指定在提交表单之前，该输入字段（input、select 或 textarea）必须被填写或选择一个值。如果尝试提交表单而该字段为空（或对于某些类型的输入，如checkbox或radio，未选中任何选项），浏览器会阻止表单的提交，并显示一条消息提示用户必须填写该字段。

2.placeholder属性文字样式与焦点距去除

焦点框：在网页设计中，“焦点框”通常指当用户与页面元素进行交互（如点击输入框）时，获得焦点的元素所呈现的一种特殊状态，例如默认输入框显示黑色轮廓等。

有焦点框：

无焦点框：

/* ::placeholder 选中就是 placeholder 属性文字样式*/
.search input::placeholder {
  font-size: 14px;
  color: #999;
}
  /* 去掉表单控件的焦点框 */
   outline: none;

3.隐藏

display: none;， 是CSS中的一种属性设置，用于控制HTML元素的显示方式。当一个元素的display属性被设置为none时，该元素及其所有子元素将从页面的渲染树中移除，不会占据任何空间，也不会对页面的布局产生影响。

3.1 使用场景

隐藏元素：当需要隐藏某个元素而不影响页面布局时，可以使用display: none;。例如，隐藏一个按钮或一段文本。
条件渲染：在某些情况下，根据用户的操作或页面的状态，动态地显示或隐藏元素。例如，根据用户的登录状态显示不同的内容。
性能优化：在某些性能敏感的场景下，可以通过设置display: none;来临时移除不必要的元素，以减少页面的渲染负担。

3.2 对比

visibility: hidden;：与display: none;不同，设置visibility: hidden;的元素仍然占据页面空间，只是不可见。这意味着元素的布局空间不会改变，但用户无法看到该元素。
opacity: 0;：设置opacity: 0;的元素也是不可见的，但它仍然占据页面空间，并且可以响应用户交互（如点击事件）。这与display: none;不同，后者完全移除了元素，使其不响应任何事件。

4.选择器及优先级

4.1 选择器

作用：查找标签，设置样式。

4.1.1 基础选择器

1.标签选择器： p, h1, div, a, img......

2.类选择器： class="类名“

注意：

• 类名自定义，不要用纯数字或中文，尽量用英文命名

• 一个类选择器可以 供多个标签使用

• 一个标签 可以使用多个类名 ，类名之间用空格隔开

•开发习惯：类名 见名知意 ，多个单词可以用 - 连接，例如：news-hd

3. id 选择器

4. 通配符选择器

作用：查找页面所有标签，设置相同样式

/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

a {
  color: #333;
  text-decoration: none;
}

4.1.2 复合选择器

   后代选择器：父子选择器之间用空格隔开
   子代选择器：父子选择器之间用 > 隔开
   并集选择器：选中多组标签设置相同的样式，选择器之间用 , 隔开

   伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式，
       例1：a:hover {   color: red; }
       例2：超链接一共有四个状态，且需要按照LVHA顺序写，包括 :link（访问前） :visited（访问后） :hover（鼠标悬停） :active（点击时），其中:hover为通用常用泛用

4.2 结构伪类选择器

4.3 优先级

5.布局

5.1 水平居中对齐与垂直居中对齐

水平方向：

内容：text-align：center；

盒子：margin：auto；

disply：flex；（详细见flex布局）
垂直方向：

文字: （line-height）行高等于盒子高度
背景图片： background-position: center center;

绝对定位（详细见定位居中）

行内块和行内：vertical-align: middle;（详细见26）

5.2 flex布局

5.3 绝对定位——居中

5.4 绝对定位与相对定位、固定定位

5.5 垂直对齐方式vertical-align

盒子放入图片后图片底部有空白，

原因：浏览器默认把行内块和行内标签当作文字处理，按基线对齐

处理方法1：添加垂直对齐方式

处理方法2：修改图片为块级

6.背景

背景图固定（背景不会随着元素的内容滚动）：background-attachment: fixed;

透明背景：background-color: transparent;
背景复合属性（background）：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（空格隔开各个属性值，不区分顺序）
例：background: pink url(./images/1.png) no-repeat right center/cover;

7.字体图标

8.显示模式

应用：a标签转块级

9.基础

9.1 代码简写-Emmet写法

9.2 Favicon图标

9.3 盒子尺寸计算

9.4 button的type属性

9.5 label标签

9.6 滚动条

9.7 圆角

9.8 盒子阴影

9.9 堆叠

9.10 过渡属性与透明度

9.11 光标类型

9.12 css精灵

10.异常

10.1 清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

常用第三种，在css中加入下面的css代码，然后在待清除浮动的盒子加入“clearfix”

        /* 双伪元素法 */
        /* before 解决外边距塌陷问题*/
        /*  after 清除浮动*/
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

10.2 合并与塌陷问题

11.2D转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
            body {
                display: flex;
            }
            .box {
                width: 200px;
                height: 200px;
                background-color: pink;
                background-image: linear-gradient(
                    /* 写法一 */
                    /* to right,   */

                    /* 写法二 */
                    /* 90deg, */

                    pink 70%,
                    green
                );
            }
            .box2 {
                width: 200px;
                height: 332px;
                position: relative;
            }
            .box2 img {
                width: 200px;
            }
            .box2 .mask {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(
                    transparent,
                    rgba(0,0,0,0.5)
                );
                opacity: 0;
                transition: all 0.5s;
            }
            .box2:hover .mask {
                opacity: 1;
            }
            .yuan {
                width: 100px;
                height: 100px;
                background-color: pink;
                border-radius: 50%;
                background-image: radial-gradient(
                    50px at center center,
                    red,
                    pink
                );
            }
            button {
                width: 100px;
                height: 40px;
                background-color: green;
                border: 0;
                border-radius: 5px;
                color: #eee;
                background-image: radial-gradient(
                    30px at 30px 20px,
                    rgba(255,255,255,0.7),
                    transparent
                );
                
            }
    </style>
</head>
<body>
    <div class="box2">
        <img src="../imgs/3.jpg" alt="">
        <div class="mask"></div>
    </div>
    <br>
    <div class="box"></div>
    <div class="yuan"></div>
    <button>按钮</button>
</body>
</html>

12.3D转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D</title>
    <style>
        body {
            display: flex;
        }

        .father {
            /* 需要给父级添加视距，否则3D转换没效果 */
            perspective: 1000px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all .5s;

        }

        .son:hover {
            transform: translate3d(100px, 200px, 300px);
        }

        .box {
            width: 200px;
            height: 332px;
            position: relative;
            perspective: 1000px;

        }

        .box img {
            width: 200px;
            transition: all .5s;
        }

        .box img:hover {
            transform: rotateZ(60deg);
            transform: rotateX(60deg);
            transform: rotateY(60deg);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="box">
        <img src="../imgs/3.jpg" alt="">
    </div>
</body>

</html>

13.动画

14.适配方案

14.1 rem

14.2 vw

15.less

16.媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        body {
            background-color: #ccc;
        }
        /* @media (max-width:760px) {
            body {
                background-color: pink;
            }
        }         */
        @media (min-width:760px) {
            body {
                background-color: yellow;
            }
        }
        @media (min-width:960px) {
                body {
                    background-color: rgb(255, 0, 0);
                }
            }
        @media (min-width:1260px) {
                body {
                    background-color: rgb(51, 0, 255);
                }
            }
        </style>
</head>
<body>
    
</body>
</html>