07 2022 档案
摘要：web三大标准：HTML(结构) + CSS（样式） +JavaScript(行为) JavaScript 动态效果+数据交互 编程语言 编程 让计算机为解决某个问题而使用某种程序设计语言编写程序代码，最终得到结果 是什么？ 世界上最流行的语言之一，是一种运行在客户端的脚本语言 脚本语言 不需要编译
阅读全文
摘要：动画 animation添加动画效果 多个状态之间的变化过程，动画过程可控(重复播放，最终画面，是否暂停) 动画实现步骤 1：定义动画 /* 1:定义动画 @keyframes 动画名称{ from {} to {} } */ @keyframes change { from { width: 20
阅读全文
摘要：平面转换 改变盒子在平面内的形态（位移，旋转，缩放） 2D转换 属性: 1、 transform（跟transition搭配使用） 位移 transform：translate(水平移动距离，垂直移动距离)取值： 像素单位数值 百分比(参照盒子自身的尺寸) x轴正向为右，y轴正向为下transl
阅读全文
摘要：响应式开发 响应式需要一个布局容器，来配合子元素实现。 原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小， 再改变里面子元素的排列方式和大小，实现在不同尺寸屏幕下，看到不同的页面布局和样式 1.bootstrap 1.1是一个快速开发框架，包含有html，css，js，使web开发更快速 中
阅读全文
摘要：基本选择器： 通配符选择器 * 元素选择器 p{} id选择器 #id值{} 类选择器 .class值{}复合选择器 后代选择器 .main p{} 子代选择器 .main>p{} 群集选择器 body,html{} 交集选择器 li.active{} 从li标签中选择class="active"
阅读全文
摘要：1、line-height=width实现垂直居中方法：对具有文字的盒子以及图片有作用。 2、记住块级盒子默认宽度为父级盒子的宽度。 3、设置第一行head时，可以将a链接转换为块级元素，再进行高度、宽度、padding 、margin的设置，以及line-height=height实现（带有文字）
阅读全文
摘要：媒体查询 使用@media查询，可以针对不同的屏幕尺寸设置不同的样式，当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 语法： @media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-C
阅读全文
摘要：px: px是绝对单位，rem和em是相对单位 em: em是相对于自身元素的字体大小单位，特例font-size相对父元素 em缺点：页面里面的嵌套父元素太多，不好统一控制 rem: rem是相对于html元素的字体大小单位，如html设置font-size=12px，其他元素设置width：2r
阅读全文
摘要：视口理解 定义：浏览器显示页面内容的屏幕区域，可以分为布局视口，视觉视口和理想视口 布局视口：是网页布局的区域，也是 html 元素的父容器 视觉视口：一个手机屏幕可以看到的所有区域，说白了就是手机屏幕大小 理想视口：元素大小是合适的，比如文字，图片等，实现方式，只需要添加<meta>视口标签告知浏
阅读全文
摘要：新增标签 <!-- 1:更简洁 --> <img /> <!-- 2 标签语义化 --> <div></div> <span></span> <header>头部</header> <footer>底部</footer> <main>主体</main> <nav>导航连接</nav> <sectio
阅读全文
摘要：光标类型 设置鼠标光标在元素上显示的样式 cursor default 默认值，通常是箭头pointer 小手效果，提示用户可以点击text 工字型，提示用户可以选择文字move 十字光标，提示用户可以移动 边框圆角 让盒子四个角变得圆润 border-radius: 数字+px/百分比； over
阅读全文
摘要：阿里字体图标 https://www.iconfont.cn/ 查找图标 > 把图标添加入库 >点购物车-->下载代码 vertical-align 垂直对齐方式 基线:浏览器文字类型元素排版中存在用于对齐的基线 作用： 解决行内/行内块元素垂直对齐问题 项目中解决得问题: 图片和文字得垂直对齐 文
阅读全文
摘要：定位 1：标准流 块级元素独占一行 垂直布局 行内元素/行内块元素一行显示多个 水平布局 2：浮动 让原本垂直布局的块元素变成水平布局 3：定位 可以让元素自由的摆放在网页的任意位置 用于盒子之间的层叠情况 4：使用场景 定位之后元素层级越高，可以层叠在其他盒子上 可以让盒子固定在屏幕中的某个位置
阅读全文
摘要：清除浮动 概念 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素 原因:子元素浮动后脱离了标准流 解决： 给父元素设置高度 内容的高度高于父元素，父元素不会被撑开，影响了整体的布局 额外的标签 在父元素内容的最后面添加一个块级元素 给添加的块级元素设置 clear:both 缺点：在页面中添加
阅读全文
摘要：盒子模型 页面中的每一个标签都看成是一个 盒子 浏览器在显示页面的时候，把页面中的元素看作是一个个矩形区域，也称之为 盒子 css中盒子由 内容content，内边距padding，边框border，外边距margin 构成，就是盒子模型 内容 内容的宽度和高度 通过width和height属性设置
阅读全文
