收藏
PHPz批改状态：合格
老师批语：总结的很好
阿里图标: https://www.iconfont.cn
Font Awesome: https://fontawesome.dashgame.com
<style>/* 安装自定义字体 */@font-face {/* 字体名称 */font-family: 'iconfont';/* 字体文件路径(远程/本地) */src: url('iconfont.woff2') format('woff2'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype');}/* 2. 声明自定义字体图标样式 */.iconfont {/* 1. 必须先声明自定义的字体名称 */font-family: 'iconfont' !important;/* 2. 可选 , 声明其它字体属性 */font-size: 16px;font-style: normal;}</style><div class="icon-list"><!-- 复制粘贴unicode代码--><i class="iconfont"></i><i class="iconfont"></i></div>
<div class="icon-list"><!-- 复制粘贴class名--><i class="iconfont icon-doc"></i><i class="iconfont icon-docx"></i></div>
/* 宽度小于375px, 意思就是不大于375px : 字体大小为12px */@media (max-width: 374px) {html {font-size: 12px;}}/* 宽度小于375px 和 宽度小于415px 之间 字体大小为14px */@media (min-width: 375px) and (max-width: 414px) {html {font-size: 14px;}}/* 宽度大于415px, 也就是比这个宽度很大,不确定更大的是多少,字体大小都用16px */@media (min-width: 415px) {html {font-size: 16px;}}
定位三个必知术语: 定位元素, 最初包含块(定位上下文/html), 参照物
(1). 定位元素: position: relative / absolute / fixed
(2). 最初包含块: 包含了<html>的不可见的,但可感知的区块,大多场景下与”视口”表现一致,但并不相同
(3). 参照物: 自身, 祖先定位元素, 最初包含块
页面坐标系
(1) 与数学坐标每系不同
(2) 以左上角为起始点,坐标(0,0)
(3) 向右, X 变大, 向下, Y 变大
(4) 页面四个顶点用: top,left,right,bottom表示
定位类型: 相对, 绝对, 固定, 默认静态
(1). 相对定位: position: relative
(2). 绝对定位: position: absolute
(3). 固定定位: position: fixed
(4). 静态定位: position: static (浏览器默认,即文档流布局)
定位元素:
(1): 定义: 也叫”可定位元素”,即可以在文档流中自定义元素的排列方向
(2): 属性: position: relative / absolute / fixed,即 非static即可
定位参照物:
(1): 相对定位: 相对于”自身在文档流中的位置”
(2). 绝对定位: 相对于”距离它最近的定位元素的位置”,即常说的”定位父级”,逐级向上直到最初包含块
(3). 固定定位: 总是相对于”最初包含块”定位
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
