html和css中的部分笔记

最新推荐文章于 2024-10-17 09:52:22 发布

2301_76723322

最新推荐文章于 2024-10-17 09:52:22 发布

阅读量47

点赞数

文章标签： html css 笔记

本文链接：https://blog.csdn.net/2301_76723322/article/details/132946814

版权

1.form表单和按钮之间的关系

在HTML中，form（表单）和按钮之间有密切的关系。form用于创建一个包含输入字段、选择框、按钮等元素的表单，而按钮则负责触发表单的提交、重置或者其他操作。

一般而言，form标签包含了表单中的各种元素，例如输入框(input)、下拉框(select)、多选框(checkbox)等等。其中一个重要的元素就是按钮(button)，通过按钮可以触发与表单相关的动作。

按钮可以通过type属性进行分类，常见的type属性值有：

1. submit：用于提交表单数据。当用户点击该按钮时，会触发表单的提交动作，将填写的数据发送到服务器进行处理。

示例：
```

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

```

2. reset：用于重置表单数据。当用户点击该按钮时，会将表单中的输入字段恢复到初始状态，清空已填写的数据。

示例：
```

<form>
  <input type="text" name="username">
  <input type="reset" value="重置">
</form>

```

3. button：通用的按钮类型，可以通过JavaScript等代码来定义按钮的具体行为。

示例：
```

<form>
  <input type="text" name="username">
  <button onclick="alert('提交表单')">提交</button>
</form>

```

需要注意的是，按钮必须位于form标签内，以确保按钮与表单相关联，从而使其能够触发表单的操作。同时，按钮可以使用value属性来设置按钮上的文本内容。

2.foucs的用法

在CSS中，:focus 选择器用于匹配当前获取焦点的元素。它通常与表单元素（如输入框、按钮等）一起使用，但也可以用于其他元素。

以下是一些使用 :focus 的常见用法：

修改表单元素的样式：可以通过设置

:focus

input:focus { background-color: yellow; }

用于键盘导航和可访问性：可以使用

:focus

.menu-item:focus { background-color: blue; }

与伪类选择器组合使用：可以将

button:hover:focus { background-color: green; }

请注意，:focus 只适用于能够接收焦点的元素，比如表单元素、链接（标签）等。

3.css图片亮度的改变

我们可以使用 filter 属性在图像中应用视觉和图形效果。例如，我们可以使用 filter 属性模糊图像、更改对比度和亮度、应用阴影效果、饱和度、灰度和不透明度。

我们可以将多种选项应用于具有 filter 属性的图像。filter 属性的语法如下所示。

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate ();

我们可以使用 % 值来设置上述选项。较低的值对图像的影响较小，反之亦然。

我们也可以使用十进制值代替百分比值。例如，我们可以用 80% 来表示 0.8。

4.css滚动条样式的改变

一前言

在CSS 中，如果我们在块级容器上设置了属性:

overflow:scroll /* x y 方向都会*/

或者

overflow-x:scroll /只是x方向/

或者

overflow-y:scroll /只是y方向/

当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。

有时候我们需要自定义滚动条的样式，比如一开始就它显示，比如想改变滚动条的颜色，设置轨道的样式等。

————————————————

二正文

1.认识滚动条

设置scrollbar的为CSS伪元素，对应上图的数字：

::-webkit-scrollbar { /* 1 / }

::-webkit-scrollbar-button { / 2 / }

::-webkit-scrollbar-track { / 3 / }

::-webkit-scrollbar-track-piece { / 4 / }

::-webkit-scrollbar-thumb { / 5 / }

::-webkit-scrollbar-corner { / 6 / }

::-webkit-resizer { / 7 */ }

属性介绍：

1. ::-webkit-scrollbar //滚动条整体部分

2. ::-webkit-scrollbar-button //滚动条两端的按钮

3. :: -webkit-scrollbar-track //外层轨道

4. ::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）

5. ::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个

6. ::-webkit-scrollbar-corner //边角

7. ::-webkit-scrollbar-resizer //定义右下角拖动块的样式

/定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸/

::-webkit-scrollbar

{

width:16px;

height:16px;

background-color:#F5F5F5;

}

/定义滚动条轨道内阴影+圆角/

::-webkit-scrollbar-track

{

-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);

border-radius:10px;

background-color:#F5F5F5;

}

/定义滑块内阴影+圆角/

::-webkit-scrollbar-thumb

{

border-radius:10px;

-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);

background-color:#555;

}

滚动条伪类选择器

要创建更加自定义的设计，我们可以针对滚动条的特定元素，并通过向每个伪元素添加伪类。以下是一些最常见的伪类：

:horizontal：用于设置与垂直滚动条不同的水平滚动条样式。例如，您可以为水平滚动条设置不同的宽度或颜色

:vertical：用于设置垂直滚动条与水平滚动条不同的样式

:decrement：适用于滚动条开头的箭头按钮。它用于设置递减按钮或垂直滚动条的向上箭头和水平滚动条的向左箭头的样式

:increment：适用于滚动条末端的箭头按钮。它用于设置增量按钮或垂直滚动条的向下箭头和水平滚动条的向右箭头的样式

:start：适用于滚动条的第一个按钮和第一个轨道部分，分别位于垂直或水平滚动条的顶部或左侧

:end：适用于滚动条的最后一个轨道，分别位于垂直或水平滚动条的底部或右侧

5.html选择器的优先级

在HTML中，选择器的优先级是用来确定应用于特定元素的CSS规则的顺序。优先级是通过组合选择器类型、类、ID和内联样式来计算的。

以下是选择器优先级的规则，从高到低：

内联样式：使用style属性直接应用在HTML元素上的样式具有最高优先级。例如：

Hello

ID选择器：使用ID选择器指定的样式具有较高的优先级。例如：

#myDiv { color: blue; }

类选择器、属性选择器和伪类选择器：这些选择器按照出现的顺序计算优先级。例如：

.myClass { color: green; }、[type="text"] { color: orange; }、:hover { color: yellow; }

元素选择器和伪元素选择器：具有相同优先级的元素选择器按照出现的顺序计算优先级。例如：

div { color: purple; }、::before { content: "before"; }

如果存在相同的优先级，则后面出现的规则将覆盖先前出现的规则。

需要注意的是，选择器的优先级仅适用于应用于同一元素的不同规则之间的冲突。如果多个元素有不同的优先级，它们之间的样式是独立的。

6.css盒子水平居中方式

1. 使用 margin: 0 auto;

当元素的左右外边距（margin）相等的时候，元素就处在中间位置，这可以通过将左右外边距都设为auto来实现。如果是块级元素通常还需要定义宽度。如下所示：

div {

width: 400px;

margin: 0 auto;

}

注意，如果把上下外边距设为auto，并不能实现垂直居中，因为这时候auto相当于0.

2. 把盒子转成行内块，然后用 text-align 属性使盒子水平居中

改变需要居中元素的盒类型，调整为行内块(inline-block)，在父元素中将text-align属性设为center，就能实现水平居中。

.father {

width: 500px;

height: 500px;

margin: 50px auto;

text-align: center; // 让父盒子设置水平居中

}

.son {

width: 200px;

height: 200px;

display: inline-block; // 让子盒子显示为行内块模式

}

3. 子绝父相 + margin负值

父盒子采用相对定位，子盒子采用绝对定位，先让子盒子的左上角移到父盒子宽度的一半处（left：50%），然后把子盒子往回移动自身宽度的一半

可以有两种方法实现反向偏移一半的效果：

.father {

width: 500px;

height: 500px;

position: relative;

}

.son {

width: 200px;

height: 200px;

position: absolute;

left: 50%; // 向右移动父盒子一半

transform: translateX(-50%); //向左移动自身盒子一半

4. flex布局

这是CSS3引入的新功能，当普通容器被调整为伸缩容器后，如果要让里面的元素水平居中，那么就相当于主轴的居中对齐,（子盒子有或没有宽高的时候都适用）

.father {

display: flex;

justify-content: center;

}

但是目前IE的多个版本还不支持此功能

7.css盒子垂直居中

1. 行高：line-height：height

只有当容器的高度已知并且是单行文本时，才能用行高实现垂直居中

单行文本垂直居中

注意：如果将单行文本改为图像，用行高则不能实现图像的水平居中

2. 利用table的特征

该方法将普通元素调整为表格元素，然后利用vertical-align属性就能让内容居中对齐

.allCenter{

display:table-cell;//设置为表格单元

vertical-align：middle;//设置表格属性，此时垂直居中了

text-align：center；//此时没有用的，子元素此时为块元素，，不是行内元素，text-align无效，需要对子元素进行处理称为行内块元素

}

.allCenterChild{

display： inline-block;//子元素变为行内块元素，加上父元素的text-align属性，此时水平居中了

}

虽然模拟表格能带来很多便捷，但同时也受到了限制。例如跳针过的元素不能用定位和浮动；使用盒类型table-cell的时候，必须同时有个祖先元素的盒类型是table；变为表格的元素，它的默认宽度将不再占一行，因为表格本质上是行内元素

3. 子绝父相 + margin负值

与水平居中的方法类似，父盒子采用相对定位，子盒子采用绝对定位，先让盒子的左上角移到高度的一半，使其上下边缘和父盒子垂直的中心线垂直（top：50%），然后把子盒子往上移动自身宽度的一半

可以有两种方法实现反向偏移一半的效果：


.father {

width: 500px;

height: 500px;

position: relative;

}

.son {

width: 200px;

height: 200px;

position: absolute;

top: 50%; // 向下移动父盒子一半

margin-top: -100px; // 向上移动自身盒子一半

}

.father {

width: 500px;

height: 500px;

position: relative;

}

.son {

width: 200px;

height: 200px;

position: absolute;

top: 50%; // 向下移动父盒子一半

transform: translateY(-50%); //向上移动自身盒子一半、

}

.father {

widht : 500px;

height : 500px;

display : flex;

align-item : center;

}

.son {

width : 100px;

height : 100px;

}

8.css中图片的居中方式

要让图片在CSS中居中，有几种方法可以实现。其中一种方法是将图片转换为块元素，然后使用margin属性设置水平居中。具体步骤如下:

将图片的display属性设置为block，这样可以将其转换为块元素。
使用margin属性将图片水平居中，将值设置为"0 auto"。

另一种方法是使用div包裹图片，并设置div的样式实现居中。具体步骤如下:

创建一个div元素，将图片放在div中。
将div的宽度设置为所需的宽度。
使用margin属性将div水平居中，将值设置为"0 auto"。

当然，还有其他方法可以实现图片的居中，具体方法取决于您的需求和情况。

1.设置行高

我们知道img元素为行内快元素，所以首先设置图片元素的父元素里文字水平居中，行高与整体高度一致。

其次最重要的是设置图片元素的vertical-align属性为middle，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。

代码示例：

<style>
    div {
        height: 300px;
        text-align: center;
        line-height: 300px;
    }
    img {
        vertical-align: middle;
    }
<style>
<div>
    <img src="./pic.png">
</div>

2.使用定位和translate

具体方式是先使用定位让图片向右和向下偏移父元素的50%，再相对自身向左和向上偏移50%，这样就实现图片在父元素水平垂直居中了。

代码示例：

<style>
    div {
        height: 300px;
        position: relative;
    }
    img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
<style>
<div>
    <img src="./pic.png">
</div>

3.使用弹性盒子

设置图片元素的父盒子为弹性盒子，让项目在主轴和侧轴的排列方式都居中。

<style>
    div {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
<style>
<div>
    <img src="./pic.png">
</div>