实例演示绝对定位与固定定位,并分析异同<!DOCTYPE html><html lang="en"> <head> <title>实例演示绝对定位与固定定位,并分析异同</title> <meta charset="UTF-8" />
场景一：设计师做好的图纸、动漫行业建好4的模型，需要渲染出成品看zui终的效果，是否是想要的和满足需求的。这个过程看重的是渲染的结果，对于及时性没有太高的要求。这种场景在影
定位元素
static
默认值没有开启元素定位
relative
开启元素的相对定位
absolute
开启元素的绝对定位
fixed
开启元素的固定定位
1.相对定位当元素的posit
1.绝对定位使用方法：position: absolute定位参照物：相对于"距离它最近的定位元素的位置",即常说的"定位父级",逐级向上直到最初包含块1.1 如果绝对定位的父级为HTML时<!DOCTYP
绝对定位position: absolute;的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移
定位布局的概念与实例
概念：1.1 块（display-block）:矩形盒子-合模型，例：/table/table-cell,td/list-item/form/p/h1-h6/，边距均有效，宽：占用父级宽度的100%，高：内容来定，均可自定义；1.2
相对定位和绝对定位html基础代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
绝对定位与固定定位
效果图如下：
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
1.绝对定位
1.就近找定位的父级进行定位
2.逐层找定位父级进行定位
如果逐层找不到这样的父级，就以浏览器窗口参照进行定位
2.固定定位
参考浏览器窗口进行定位 脱标 不
利用flex常用的6个属性 写出简易响应式布局案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
flex弹性布局Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
容器属性
fl
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
引入字体图标1.存在的问题，打开index.html发现有些下载的图标用不了2.引入样式
3.代码style.css代码
@import './font_icon/iconfont.css';.picture{ color: brown; bo
1.class方式引入字体图标1.先下载矢量图标，我这里用的是阿里的，大家也可以用这个，我们选择Font class，下载，解压好，等待调用.
2.引用图标库，（为了后期各种因素，我们是不直接使用官方
代码下载：https://cloud.189.cn/web/share?code=yuQBniIfQvEv（访问码：nuz4）
代码运行方式：一、导入压缩包中.sql配置tp目录中config/database中设置使用小皮面板指向tp目录
二、
虚拟机重装tools还是不能粘贴文件时：yuminstallopen-vm-tools-desktopcentos7没有自带ifconfig，需要下载安装net-toolsCentOS7的文件系统类型是XFS，CentOS6之前为ext4安装图形
<body class="list"> <div class="iconfont icon-wailaidengji dengji">外来登记</div> <div class="iconfont icon-wailairenyuandengji">外来人员登记</div> <di
1.实例演示使用class方式引入字体图标,以及自定义样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
用CSS方式插入字体图标并自定义样式<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
1.引入字体图标1.下载字体图标库2.放入文件夹内3.<link rel="stylesheet" href="******" />导入字体图标样式4.<button class="iconfont icon-***"></button> 来引用字体图
字体大小<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con
一、CSS布局常用单位1. 绝对单位px像素in英寸
1in等于96px
2.相对单位2.1 % 相对父级的百分比2.2 em和rem1em默认是16pxem受父类影响，rem受根元素也就是HTML的影响。
一般
一、媒体查询，屏幕适应语法@media screen and (max-width: 600px) { }，其中 screen and可以省略不写，像这样@media (max-width: 600px) { }
注意所以我们用min-width时，小的放
