2022年7月17日
摘要：
完美轮播图实例： 部分代码—— <style> * { padding: 0; margin: 0; } html { font-size: calc(100vw / 750); } .swiper { width: 100vw; height: 280.3rem; overflow: hidden 阅读全文
摘要：
（1）calc() 只作用于属性值 你唯一可以使用calc()函数的地方是在值中。 .el { font-size: calc(3vw + 2px); width: calc(100% - 20px); height: calc(100vh - 20px); padding: calc(1vw + 阅读全文
摘要：
（1）white-space 设置元素对内容中的空格的处理方式 值描述 normal 默认。文本空白 换行会被浏览器忽略。 pre 保留文本原样式 比如空格或换行 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 pre-wrap 保留空白符序列，保留换行符。如果文本超出容 阅读全文
摘要：
移动端布局 （1）布局概念 1. 静态布局 直接使用px作为单位 不推荐 不会适应屏幕 2. 流式布局 宽度使用%百分比，高度使用px作为单位 通常还会加上最大值和最小值 3. 自适应布局 创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局 <meta n 阅读全文
摘要：
@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。媒体查询可用于检测很多事情，例如： viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏，竖屏) 。 分辨率 目前很多针对苹果手机，Android 手机，平板等设备都会 阅读全文
摘要：
CSS3弹性盒子 -Flexbox display:flex; 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 flex-direction:指定主轴的方向； ：column；列 ：row；水平，左->右 ：column-reverse ：row- 阅读全文
摘要：
CSS3多列显示（流式布局） column-count：指定某个元素应分为的列数 数值/auto； column-width：指定列的宽度； length/auto； cloumn-span：指定某个元素应该跨越多少列； none/allnone/all； column-gap：指定列之间的间隙； 阅读全文
摘要：
CSS3动画：animation animation：动画名字 所需时间 运动曲线 延迟时间 循环次数(n>0 整数/无限次infinite) 反省运动； animation:mymove(name) 3s ease-in-out 1s reverse（反向） alternate（交替效果） alt 阅读全文
摘要：
CSS3转换： 是元素改变形状、尺寸和位置一种的效果； transform： translate() 平移 例： 水平X轴 -translateX（200px） 垂直Y轴 -translateY（200px） X、Y轴同时设置上一个会被下一个覆盖； 同时写： transfrom：translate（ 阅读全文
摘要：
transition：property（要过渡的属性）-duration（花费的时间）-timing-function（运动曲线）-delay（延迟时间） 例： transition：all（所有的属性都变化） 2s linear 2s； transition：width 2s linear，hei 阅读全文
摘要：
盒子定位居中： 文字居中：text-align：center（inline inline-block） 单行文本在盒子垂直居中：line-height：盒子的高度； 盒子在父盒子中水平居中：margin ： 0 auto； 盒子在父元素中水平垂直居中： 一般情况下 ，设置父元素相对定位； 子元素绝对 阅读全文
摘要：
隐藏元素的方式： 1、display：none；真实隐藏后元素不在占空间，子元素一起隐藏；子元素不能通过设置display进行反隐藏 2、visibility：visible；显示 hidden；隐藏 3、opacity：0；透明隐藏元素；还是会占据空间；（0-1：1）；子元素不能通过设置opaci 阅读全文
摘要：
定位： 定位模式-position： static：静态定位 标准文档流表现形式一样 fixed：固定定位 相对于body进行定位 -不写偏移量； 脱离文档流； 不再是父元素的100%； top:0️⃣ relative：相对定位 特性： 一般用在父元素上； 默认宽度依旧是父元素的100%； 相对于 阅读全文
摘要：
页面布局的本质是盒子（box），是 CSS 布局的对象和基本单位，一个页面就是由 n 个盒子组成的。 一个基本的盒模型，包括 content（width/height）、padding、border、margin。 盒模型分成两类：标准盒子模型和 IE 盒子模型。 标准盒模型的 width 指 co 阅读全文
摘要：
边框三角形 border:大小-线性- 透明（transparent） 宽高为零 背景颜色为边框颜色 具体属性可查看：https://www.cnblogs.com/LIXI-/p/16486047.html 阅读全文
摘要：
外边距盒子水平居中 在父元素中居中：上下0px；左右auto； 必须满足两个条件： 1 必须是块元素； 2 盒子制定了宽度； 因为块元素的宽度默认是父元素的100% auto 左右外边距平分父元素宽度空间 方法： 只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。margin: 0 a 阅读全文
摘要：
双实线：double 单实线：solid 点线：dotted 虚线：dashed 边框： 上边框总体设置： border-top-width： border-top-color： border-top-style： 右边框： border-right-width： border-right-colo 阅读全文
摘要：
盒子阴影： box-shadow：水平位置 垂直位置 模糊距离 阴影尺寸扩大/缩小阴影 阴影颜色 内/外阴影; h-shadow 水平（必填）：允许负值 v-shadow 垂直（必填）：允许负值 blur 模糊距离（可选）值越高，越模糊； spread 尺寸（可选） color 颜色(默认 ：黑色) 阅读全文
摘要：
凹凸文字 class=‘ao’凹 class=‘to’凸 text-shadow： 空心文字 -<p> -webkit-text-fill-color: 颜色; -webkit-text-stroke-color: 颜色; -webkit-text-stroke-width: 大小; 精灵图(雪碧图 阅读全文
摘要：
CSS背景 1、background-color：背景颜色 属性： transparent；背景透明 2、background-image：背景图片 属性： url()；图片地址 3、background-repeat：背景平铺 属性： no-repeat；不重复 repeat；xy方向都平铺 re 阅读全文