YOUXIANYU

CSS 渐变 1.线性渐变 多个颜色之间的渐变，默认从上到下渐变。 background-image:linear-gradient( , , ); 使用关键词设置线性渐变的方向。 background-image:linear-gradient(to top, , , );background-image:linear-gradient(to right top, , , ); 使用角度设置线性2.渐变的方向。 background-imge:linear-gradient(30deg, , , ); 调整开始渐变的位置。 background-imge:linear-gradient(red 50px, , , ); 3.径向渐变 使用像素值值调整渐变圆的圆心位置。 background-image:radial-gradient(at 100px 50px, , , ); 调整渐变形状为正圆。 background-image:radial-gradient(circle, , ,...

CSS3长度单位 vm视口宽度的百分之多少10vw就是视口宽度的10%vh视口宽度的百分之多少10vw就是视口高度的10% box-sizing怪异盒模型 使用box-sizing属性可以设置和模型的俩种类型 width和height设置的是盒子内容区的大小。（默认值） content-box width和height设置的是盒子总大小（怪异盒模型） border-box resize调整盒子大小 使用resize属性可以可以控制是否允许用户调节元素尺寸。 none:不允许用户调整元素大小。（默认）both:用户可以调节元素的宽度和高度。horizontal:用户可以调节元素的宽度。vertical:用户可以调节元素的高度。 box-shadow盒子阴影 使用box-shadow属性为盒子添加阴影。 box-shadow: h-shadow v-shadow blur spread color...

列表标签 datalist:用于搜索框的关键字提示 details:用于展示问题和答案，或对专有名词进行解释 summary:写在detaisls的里面，用于指定问题或专用名词 文本标签 ruby:包裹需要注音的文字 rt:写注音，rt标签写在ruby的里面 文本标记 mark:标记 表单功能 placeholder:提示文字（注意：不是默认值，value是默认值），适用于文字输入类的表单控件。 required:表示输入项必填，适用于除按钮外其他表单控件。 autofocus:自动获取焦点，适用于所有表单控件。 autocomplete:自动完成，可以设置为on或off，适用于文字输入类的表单控件。 pattern:填写正则表达式，是用于输入类表单控件。 注意：多行输入不可用，且空的输入框不会验证，往往与required配合。 ...

CSS 相对定位 1.如何设置相对定位？ 给元素设置position:relative即可实现相对定位。 可以使用left、right、top、bottom四个属性调整位置。 2.相对定位的参考点在哪里？ 相对自己原来的位置 3.相对定位的特点 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。 默认规则是： 定位的元素会盖在普通元素之上。 都发生定位的俩个元素，后写的元素会盖在先写的元素之水上。 left不能和right一起设置，top和bottom不能一起设置。 相对定位的元素，也能继续浮动，但不推荐这样做。 想对行为的元素，也能通过margin调整位置，但不推荐这样做。 绝大多数情况下，相对定位，会与绝对定位配合使用。 CSS 绝对定位 如何设置绝对定位？ ...

CSS 浮动（float） 现在浮动是主流的页面布局方式之一。 1.元素浮动后的特点 脱离文档流 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。 不会独占一行，可以与其他元素共用一行。 不会margin合并，也不会margin塌陷，能够完美地设置四个方向的marginpadding。 不会像行内块一样被当作文本处理（没有行内块的空白问题）。 2.浮动后会有哪些影响对兄弟元素的影响:后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。对父元素的影响:不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽高依然束缚浮动的元素。 3.解决浮动产生的影响（清除浮动） 解决方案： 1.方案一：给父元素指定高度。 2.方案二：给父元素也设置浮动，带来其他影响。 3.方案三：给父元素设置overflow:hidden。 ...

CSS盒子模型 CSS长度单位 px:像素。 em:相对元素font-size的倍数。 rem:相对根字体大小，html标签就是根. %:相对父元素计算。 CSS中设置长度，必须加单位，否则样式无效！ 盒子模型的组成 CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。 margin（外边距）：盒子与外界的距离。（不会影响盒子大小，但会影响盒子的位置） border（边框）:盒子的边框。 padding（内边距）:紧贴内容的补白区域。 contert（内容）:元素中的文本或后代元素都是它的内容。 ...

CSS列表属性 列表相关的属性，可以作用在ul、ol、li元素上。 CSS属性名 功能 属性值 tlst-style-type 设置列表符号 常用属性如下： none：不显示前面的标识（很常用！） square:实心方块 disc：圆形 decimal:数字 lower-roman:小写罗马字 upper-roman:大写罗马字 lower-alpha:小写字母 upper-alpha:大写字母 list-style-position 设置列表符号的位置 inside:在li的里面 ...

CSS 常用文本样式 以下是一些常用的 CSS 文本样式： 字体样式 字体类型： font-family: 'Arial', sans-serif;：设置字体为 Arial，如果没有 Arial 字体，则使用系统默认的无衬线字体。 font-family: 'Times New Roman', serif;：设置字体为 Times New Roman，如果没有该字体，则使用系统默认的有衬线字体。 字体大小： font-size: 16px;：将字体大小设置为 16 像素。 font-size: 1.2em;：字体大小相对于其父元素字体大小的 1.2 倍，这是一种相对单位，常用于保持文本在不同屏幕和设备上的可读性。 字体粗细： font-weight: normal;：正常粗细，等同于 font-weight: 400;。 font-weight: bold;：加粗，等同于 font-weight: 700;，常用于突出显示标题或重要信息。 font-weight:...

伪类选择器 概念 作用：选中特殊状态的元素。如何理解“伪”？-虚假的，不是真的。如何理解“伪类”？-像类（class），但不是类，是元素的特殊状态。 常用伪类选择器 一、动态伪类： :link超链接未被访问的状态。 :visted超链接访问过的状态。 :hover鼠标悬停在元素上的状态。 :active元素激活的状态。 :focus获取焦点的元素。 表达类元素才能使用:focus伪类。当用户：点击元素、触摸元素、或通过键盘的“tab”建等方式，选择元素时，就是获得焦点。 二、常用结构伪类： 常用的 :first-child所用兄弟元素中的第一个。 :last-child所有元素中的最后一个。 :nth-child(n)所有兄弟元素中的第n个。 :first-of-type所有同类型兄弟元素的第一个。 :last-of-type所有同类型兄弟中的最后一个。 ...

入门CSS S CSS简介 1.什么是 CSS？ CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作。它可以同时控制多张网页的布局 外部样式表存储在 CSS 文件中 CSS 语法 CSS（层叠样式表）用于设置HTML页面中元素的样式，其语法主要包括以下几个部分： 1.选择器 选择器用于选择页面中的元素，以便为其应用样式。常见的选择器类型有： 元素选择器：直接使用元素名称，如p选择页面中所有的<p>元素。 类选择器：以.开头，如.my-class选择页面中所有class="my-class"的元素。 ID选择器:以#开头，如#my-id选择页面中id="my-id"的元素。 属性选择器:以[attribute]形式，如[type="text"]选择所有type属性值为text的元素。 ...