2022年7月17日
摘要：
完美轮播图实例： 部分代码—— <style> * { padding: 0; margin: 0; } html { font-size: calc(100vw / 750); } .swiper { width: 100vw; height: 280.3rem; overflow: hidden 阅读全文
posted @ 2022-07-17 11:31
香香鲲
阅读(127)
评论(0)
推荐(0)
摘要：
（1）calc() 只作用于属性值 你唯一可以使用calc()函数的地方是在值中。 .el { font-size: calc(3vw + 2px); width: calc(100% - 20px); height: calc(100vh - 20px); padding: calc(1vw + 阅读全文
posted @ 2022-07-17 11:29
香香鲲
阅读(192)
评论(0)
推荐(0)
摘要：
（1）white-space 设置元素对内容中的空格的处理方式 值描述 normal 默认。文本空白 换行会被浏览器忽略。 pre 保留文本原样式 比如空格或换行 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 pre-wrap 保留空白符序列，保留换行符。如果文本超出容 阅读全文
posted @ 2022-07-17 11:27
香香鲲
阅读(269)
评论(0)
推荐(0)
摘要：
移动端布局 （1）布局概念 1. 静态布局 直接使用px作为单位 不推荐 不会适应屏幕 2. 流式布局 宽度使用%百分比，高度使用px作为单位 通常还会加上最大值和最小值 3. 自适应布局 创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局 <meta n 阅读全文
posted @ 2022-07-17 11:20
香香鲲
阅读(517)
评论(0)
推荐(0)
摘要：
@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。媒体查询可用于检测很多事情，例如： viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏，竖屏) 。 分辨率 目前很多针对苹果手机，Android 手机，平板等设备都会 阅读全文
posted @ 2022-07-17 11:16
香香鲲
阅读(119)
评论(0)
推荐(0)
摘要：
CSS3弹性盒子 -Flexbox display:flex; 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 flex-direction:指定主轴的方向； ：column；列 ：row；水平，左->右 ：column-reverse ：row- 阅读全文
posted @ 2022-07-17 11:12
香香鲲
阅读(50)
评论(0)
推荐(0)
摘要：
CSS3多列显示（流式布局） column-count：指定某个元素应分为的列数 数值/auto； column-width：指定列的宽度； length/auto； cloumn-span：指定某个元素应该跨越多少列； none/allnone/all； column-gap：指定列之间的间隙； 阅读全文
posted @ 2022-07-17 11:06
香香鲲
阅读(56)
评论(0)
推荐(0)
摘要：
CSS3动画：animation animation：动画名字 所需时间 运动曲线 延迟时间 循环次数(n>0 整数/无限次infinite) 反省运动； animation:mymove(name) 3s ease-in-out 1s reverse（反向） alternate（交替效果） alt 阅读全文
posted @ 2022-07-17 11:05
香香鲲
阅读(54)
评论(0)
推荐(0)
摘要：
CSS3转换： 是元素改变形状、尺寸和位置一种的效果； transform： translate() 平移 例： 水平X轴 -translateX（200px） 垂直Y轴 -translateY（200px） X、Y轴同时设置上一个会被下一个覆盖； 同时写： transfrom：translate（ 阅读全文
posted @ 2022-07-17 11:04
香香鲲
阅读(704)
评论(0)
推荐(0)
摘要：
transition：property（要过渡的属性）-duration（花费的时间）-timing-function（运动曲线）-delay（延迟时间） 例： transition：all（所有的属性都变化） 2s linear 2s； transition：width 2s linear，hei 阅读全文
posted @ 2022-07-17 11:04
香香鲲
阅读(58)
评论(0)
推荐(0)
摘要：
盒子定位居中： 文字居中：text-align：center（inline inline-block） 单行文本在盒子垂直居中：line-height：盒子的高度； 盒子在父盒子中水平居中：margin ： 0 auto； 盒子在父元素中水平垂直居中： 一般情况下 ，设置父元素相对定位； 子元素绝对 阅读全文
posted @ 2022-07-17 10:56
香香鲲
阅读(277)
评论(0)
推荐(0)
摘要：
隐藏元素的方式： 1、display：none；真实隐藏后元素不在占空间，子元素一起隐藏；子元素不能通过设置display进行反隐藏 2、visibility：visible；显示 hidden；隐藏 3、opacity：0；透明隐藏元素；还是会占据空间；（0-1：1）；子元素不能通过设置opaci 阅读全文
posted @ 2022-07-17 10:55
香香鲲
阅读(201)
评论(0)
推荐(0)
摘要：
定位： 定位模式-position： static：静态定位 标准文档流表现形式一样 fixed：固定定位 相对于body进行定位 -不写偏移量； 脱离文档流； 不再是父元素的100%； top:0️⃣ relative：相对定位 特性： 一般用在父元素上； 默认宽度依旧是父元素的100%； 相对于 阅读全文
posted @ 2022-07-17 10:42
香香鲲
阅读(426)
评论(0)
推荐(0)
摘要：
页面布局的本质是盒子（box），是 CSS 布局的对象和基本单位，一个页面就是由 n 个盒子组成的。 一个基本的盒模型，包括 content（width/height）、padding、border、margin。 盒模型分成两类：标准盒子模型和 IE 盒子模型。 标准盒模型的 width 指 co 阅读全文
posted @ 2022-07-17 10:40
香香鲲
阅读(69)
评论(0)
推荐(0)
摘要：
边框三角形 border:大小-线性- 透明（transparent） 宽高为零 背景颜色为边框颜色 具体属性可查看：https://www.cnblogs.com/LIXI-/p/16486047.html 阅读全文
posted @ 2022-07-17 10:33
香香鲲
阅读(132)
评论(0)
推荐(0)
摘要：
外边距盒子水平居中 在父元素中居中：上下0px；左右auto； 必须满足两个条件： 1 必须是块元素； 2 盒子制定了宽度； 因为块元素的宽度默认是父元素的100% auto 左右外边距平分父元素宽度空间 方法： 只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。margin: 0 a 阅读全文
posted @ 2022-07-17 10:30
香香鲲
阅读(203)
评论(0)
推荐(0)
摘要：
双实线：double 单实线：solid 点线：dotted 虚线：dashed 边框： 上边框总体设置： border-top-width： border-top-color： border-top-style： 右边框： border-right-width： border-right-colo 阅读全文
posted @ 2022-07-17 10:29
香香鲲
阅读(240)
评论(0)
推荐(0)
摘要：
盒子阴影： box-shadow：水平位置 垂直位置 模糊距离 阴影尺寸扩大/缩小阴影 阴影颜色 内/外阴影; h-shadow 水平（必填）：允许负值 v-shadow 垂直（必填）：允许负值 blur 模糊距离（可选）值越高，越模糊； spread 尺寸（可选） color 颜色(默认 ：黑色) 阅读全文
posted @ 2022-07-17 10:28
香香鲲
阅读(50)
评论(0)
推荐(0)
摘要：
凹凸文字 class=‘ao’凹 class=‘to’凸 text-shadow： 空心文字 -<p> -webkit-text-fill-color: 颜色; -webkit-text-stroke-color: 颜色; -webkit-text-stroke-width: 大小; 精灵图(雪碧图 阅读全文
posted @ 2022-07-17 10:15
香香鲲
阅读(123)
评论(0)
推荐(0)
摘要：
CSS背景 1、background-color：背景颜色 属性： transparent；背景透明 2、background-image：背景图片 属性： url()；图片地址 3、background-repeat：背景平铺 属性： no-repeat；不重复 repeat；xy方向都平铺 re 阅读全文
posted @ 2022-07-17 10:11
香香鲲
阅读(410)
评论(0)
推荐(0)
摘要：
标签的显示模式及转换 块级元素：宽高默认由内容撑开。宽是父容器的100%。 行内元素：默认宽高是由内容撑开的 行内块级：可以设置宽高，不会引起换行 标签显示模式转换： display 行内元素：inline 行内块级：inline-block（行内转成行内块级） 块级：block img、input 阅读全文
posted @ 2022-07-17 10:11
香香鲲
阅读(83)
评论(0)
推荐(0)
摘要：
CSS层叠性： 如果权重高，则覆盖另一个属性； 如果权重相同，使用就近原则； 基础优先级： ！important 是提高单行样式的语法，空格和css属性值隔开 进行书写 ！important>行内>内部=外部>id选择器>类选择器>标签选择器>*通配符>继承>浏览器默认继承 *font具有继承性 优 阅读全文
posted @ 2022-07-17 10:07
香香鲲
阅读(84)
评论(0)
推荐(0)
摘要：
属性选择器： 选择器含义 [attr] 存在attr属性即可 [attr=val] 属性值完全等于val [attr*=val] 属性值里包含val字符并且在“任意”位置 [attr^=val] 属性值里包含val字符并且在“开始”位置 [attr$=val] 属性值里包含val字符并且在“结束”位 阅读全文
posted @ 2022-07-17 10:05
香香鲲
阅读(36)
评论(0)
推荐(0)
摘要：
@import 引入css 需要写在style标签中 @import：url（../） input>type>color:取色器 1. id属性只能有一个id值 class属性可以有多个class值 2. id属性值不能使用别人已使用的 class可以使用的多类选择器 3. # . 结构伪类选择器 阅读全文
posted @ 2022-07-17 10:04
香香鲲
阅读(121)
评论(0)
推荐(0)
摘要：
字体属性： font-size: smlaller;x-small;xx-small;large;x-large;xx-large; 16px:浏览器默认大小 px：像素；相对长度单位，相对于2560px电脑分辨率 pt：点；1/72英寸 in：英寸 font-weight： （100~700/90 阅读全文
posted @ 2022-07-17 09:58
香香鲲
阅读(102)
评论(0)
推荐(0)
摘要：
行内样式：直接使用style 内部样式：选择器{键 值} 外部样式：CSS文件；标签选择器{}=元素选择器；通过link标签引入 行内样式>内部=外部，覆盖现象，就近原则，后来者居上 阅读全文
posted @ 2022-07-17 09:55
香香鲲
阅读(117)
评论(0)
推荐(0)
摘要：
embad标签: 属性： src： width： height： embad：加载音频 属性： src：音频资源的地址 controls：显示控件 muted：静音播放 loop：循环播放 autoplay：自动播放 source：解决浏览器的兼容-src IE11与chrome内核相同 video 阅读全文
posted @ 2022-07-17 09:54
香香鲲
阅读(907)
评论(0)
推荐(0)
摘要：
<lable for=''> <input id=''></input>> </lable> <select> <option value='0'></option> <option value='1'></option> </select> button标签表示一个按钮 但是如 阅读全文
posted @ 2022-07-17 09:48
香香鲲
阅读(128)
评论(0)
推荐(0)
摘要：
块级标——head,h1-h6,div（块级）+span(无修饰),span(行内元素),-双标签 p-paragraph段落标签、段落标签-有段前与段后,i,b,s,u,em,strong,del,ins,br（换行标签-break-单标签-不是块级）,hr（水平线-单标签）,（倾斜，加粗，删除线 阅读全文
posted @ 2022-07-17 09:40
香香鲲
阅读(258)
评论(0)
推荐(0)
摘要：
1、标题标签<h> 2、段落标签<p> 只能嵌套内联元素（行内元素：span、i 、 s 、u 、em、 strong 、ins 、del）不能嵌套块元素（可以设置宽高，引起换行的标签）和自己 自动换行，无其他样式 3、首行缩进 %nbsp 空格 4、水平线标签 <hr> 单标签：meta、br 5 阅读全文
posted @ 2022-07-17 09:17
香香鲲
阅读(80)
评论(0)
推荐(0)
摘要：
使用软件 ：vscode VScode的使用快捷键及基础常识： ctrl+f:搜索 拆分:向右拆分(分屏) 了解笔试题:面试题:口述题 注释: ctrl+? f5:刷新页面快捷键: ! +enterhtml: 5! +tab html: 5! +tab en:英语 fr法语 zh:中文 zh-CN: 阅读全文
posted @ 2022-07-17 09:14
香香鲲
阅读(35)
评论(0)
推荐(0)
浙公网安备 33010602011771号