不知道什么东西-CSDN博客

本文链接：https://blog.csdn.net/qq_3047318787/article/details/135314577

本文详细解释了CSS中的关键样式属性如margin,padding,float,overflow,和flexbox，以及HTML元素如header,article,aside,footer的用法。还涵盖了媒体查询和文本装饰的相关知识，以及表单元素的常见属性。

摘要由CSDN通过智能技术生成

list-style-type: none; 是 CSS 的一条规则，用于移除 HTML 列表项前面的标记（例如圆点、数字等）。

例如，在 HTML 中，<ul> 或 <ol> 标签定义了一个列表。默认情况下，浏览器会为列表中的每个项目添加标记（例如 <ul> 中的圆点，<ol> 中的数字）。

使用 list-style-type: none; 可以移除这些默认的标记，使得列表看起来更简洁。

margin:0;padding:0 是 CSS 中的一种常用的样式设置，用于将元素的边距（margin）和内填充（padding）设置为零。

margin: 0; 是设置元素的外边距为零。在 CSS 中，margin 是用来控制元素与其周围元素的距离。当设置为 0 时，元素会紧贴其周围的元素，没有任何间距。
padding: 0; 是设置元素的的内填充为零。padding 是用来控制元素内部与其边框的距离。当设置为 0 时，元素的内容将紧贴其边框，没有任何间距。

float: none;width: auto 是 CSS 中的一种样式设置，用于取消元素的浮动效果并将其宽度设置为自动。

float: none; 是设置元素的浮动效果为无。在 CSS 中，float 属性用于让元素向左或向右浮动，通常用于排版。设置为 none 则表示取消元素的浮动效果，让元素回到默认的布局行为。
width: auto; 是设置元素的宽度为自动。在 CSS 中，width 属性用于设置元素的宽度。设置为 auto 表示元素的宽度将根据其内容、内边距（padding）、边框（border）等自动计算，而不是固定为一个特定的值。

overflow: auto; 是 CSS 中的一种属性设置，用于控制当内容溢出一个元素的框时如何处理溢出的内容。

overflow 属性有四个主要的值：

visible：这是默认值。如果内容被剪裁，它仍然会显示在元素的框外。
hidden：如果内容被剪裁，它不会显示在元素的框外。这是最简单的防止内容溢出的方法。
scroll：如果内容被剪裁，它仍然会显示在元素的框外，但浏览器会显示滚动条以便查看全部内容。
auto：浏览器将根据内容决定是否添加滚动条。如果内容超出了元素的框，浏览器将显示滚动条。

font-weight: bold; 是 CSS 中的一个属性设置，用于定义文本的粗细。

font-weight 属性用于设置字体的粗细。该属性的值可以是 normal，bold，bolder，lighter，或者是从 100 到 900 的数字。

normal: 这是默认的字体粗细。
bold: 这会使字体变粗。
bolder: 这会使字体比其父元素的字体更粗。
lighter: 这会使字体比其父元素的字体更细。
100 到 900: 这些数字代表了不同的粗细等级。100 最细，900 最粗。

<header>头部。标签通常被用来包含网站的标题、标语、导航栏等内容。

<article>内容。标签用来表示一个独立的内容单元，通常包含一些文章、新闻故事或其他可以自我包含的内容。

<aside> 侧边。标签用于表示与周围内容稍微有关的内容，通常这些内容与页面的主要内容部分相关。它通常被用来放置与主要内容相关的辅助信息，如侧边栏、广告等

.flex-container > * { padding: 10px; flex: 1 100%; }

flex: 1 100%; 这是Flexbox布局的属性，它表示子元素将等比例地占据可用空间。具体来说，flex: 1 是指每个子元素都有相同的弹性（flex），而 100% 是指每个子元素都尽可能地占据整个可用空间。

flex: 1 auto; auto：这是 flex-shrink 的值，表示这个子项的最小尺寸。auto 表示这个子项将尽可能地缩小以适应其内容的大小，但不会缩小到小于其最小尺寸。

@media all and (min-width: 800px) {}

@media：这是一个 CSS 规则，用于定义媒体查询。这意味着我们正在定义一个规则，该规则只在满足特定媒体条件的情况下应用。
all：这是媒体类型。all 表示这个媒体查询应用于所有设备。
and：这是一个连接词，表示接下来的条件必须与前面的条件同时满足。
(min-width: 800px)：这是一个媒体特性，检查设备的视口宽度是否至少为 800 像素。如果设备的视口宽度大于或等于800像素，那么这个媒体查询的条件就满足。

flex: 3 0px;

3：这是 flex-grow 的值，表示这个子项将按比例占用额外的空间。3 表示这个子项将占用父容器可用空间的3倍。
0px：这是 flex-shrink 的值，表示这个子项的最小尺寸。0px 表示这个子项不会缩小到小于0px。

text-decoration: none; 是一个CSS样式规则，用于去除文本的装饰。在HTML中，文本经常会有下划线、上划线、删除线等装饰效果，这些被称为文本装饰。

text-align: center;文本居中

type

这不知道什么东西

text # 正常展示的普通文本 placeholder：提示文本 value：默认值 name：名称 readonly：只读，布尔属性 required：必须输入，布尔属性 disabled：不可用，布尔属性，input,select,textarea的通用属性 minlength：最小长度，提交时判定 maxlength：最大可输入的长度 pattern：正则匹配 antocomplete ：自动记录输入，以后输入时可以自动选择完成。可选值为on/off，默认on

用户名： <input type="text" name="name">
password # 密文展示属性和text一样，主要区别是，会自动隐藏输入的内容密码： <input type="password" name="pwd">
date # 日历展示生日： <input type="date" name="birthday">
radio # 单选（1）可以通过添加checked="checked"设置默认值 ps:如果属性名和属性值相同可以简写checked （2）name：名称，必须有，相同name的单选会作为一组，会相互排斥（3）value：选项对应的值

性别：男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" checked value="female"> 其他<input type="radio" name="gender" value="others">
checkbox # 多选可以产生多选框，也可以通过添加checked="checked"设置默认值爱好：篮球<input type="checkbox" name="hobby" value="basketball" checked> 足球<input type="checkbox" name="hobby" value="football"> 排球<input type="checkbox" name="hobby" value="volleyball" checked>
email # 邮箱格式数据邮箱：<input type="email" name="email">

7.file # 文件数据用于添加文件数据，可以通过添加multiple属性控制获取单个还是多个文件 <p>单个文件: <input type="file" name="single_file"> </p> <p>多个文件: <input type="file" multiple name="files_list"> </p>

submit # 触发form表单提交数据 <input type="submit" value="注册">
reset # 重置页面填写的数据 <input type="reset" value="重置">
button # 普通按钮没有任何功能意味着以后可以给它添加任意的功能(JS事件) <input type="button" value="普通按钮">
image # 图片按钮作用同提交按钮一样，只是用属性src替换了value，表示图片地址

displayblock作用：

1、可以改变元素的显示类型；

2、可以用于控制元素的尺寸；

3、具有盒模型的特性。
CSS 的 content 属性

用于在元素的内容之前或之后插入生成内容。可以用来在元素中插入文本、图像或其他元素。它主要用于为伪元素（::before 和 ::after）添加内容。

其中，常用的值有:
- content: "" (空字符串) 用于清除元素的内容
- content: "string" 用于在元素中插入文本
- content: url(image.png) 用于在元素中插入图像
- content: counter(counterName) 用于在元素中插入计数器
- content: attr(attributeName) 用于在元素中插入属性值
- content: none 用于不显示任何内容
设置 transform:scale(1,1); 样式 ,

表示盒子模型宽高都放大了一倍 , 也就是不变 ; 设置 transform:scale(2,2); 样式 , 表示盒子模型宽高都放大了 2 倍 ; 设置 transform:scale(0.5,0.5); 样式 , 表示盒子模型宽高都缩小到 0.5 倍 ;

如果 scale 只设置一个参数 , 那么就是同时对宽高缩放相同的倍数 , 如 : 设置 transform:scale(2); 样式 ,表示盒子模型宽高都放大了 2 倍 , 相当于 transform:scale(2,2); 样式 ;

方法：1、给元素添加“background-color:rgba(R,G,B,A)”样式来设置颜色透明度； 2、给元素添加“opacity:透明值;”样式来设置透明度； 3、给图像设置“filter:opacity(%);”样式来透明度。

transform: translateY(50px，100px); 【水平右移50，垂下移100】
overflow:hidden;【隐藏超出盒子大小的内容】
倾斜30度 font-style: oblique 30deg; 倾斜 font-style: italic;
居中 style="margin: 0 auto" text-align: center

/* 实现通过:hover使图片产生缩放动画 / img:hover{ transform: scale(1.2); / 图片放大1.2倍 / transition: transform .5s; / 过渡效果持续0.5秒 / } / 实现通过keyframes让图片做环形旋转动画 / @keyframes circle { 0% { transform: rotate(0deg); } / 旋转角度为0度 / 100% { transform: rotate(360deg); } / 旋转角度为360度，即一圈 / } img{ animation: circle 2s infinite linear; / 持续2秒，重复执行，线性过渡 / } / 实现通过hover让图片做闪烁动画 / img:hover{ animation: blink 1s linear infinite; / 持续1秒，无限重复执行，线性过渡 / } / 设置图片动画 / @keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } / 透明度为0，闪烁效果 */ }

<!--
    action 控制数据的提交地址
    method 网络请求方式
    get请求: 朝服务端索要数据
    value 如果标签是选择类型的,用于区分具体数据含义
                                
    input 获取用户各中类型数据的标签
    text 正常展示的普通文本
    names 标识表单字段
    wd 用于键值对提交
    placeholder 提示文本
                                
    button 按钮，在form中使用时有提交功能，
    和<input type="submit">的功能一样,
    标签的文本即是按钮的提示文字
-->
<form action="http://www.baidu.com/s" method="get">
<input type="text" name="wd" value="" placeholder="请输入内容">
<button type="submit" class="find">搜索</button>