搜索到
389
篇与
的结果
-
字体 1. web字体<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>web字体</title> <style> @font-face{ font-family: "方正手迹"; src: url('./font1/方正手迹.ttf'); } @font-face { font-family: "webfont"; font-display: swap; src: url('./font2/webfont.eot'); /* IE9 */ src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font2/webfont.woff2') format('woff2'), url('./font2/webfont.woff') format('woff'), /* chrome、firefox */ url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } .t1 { font-size: 100px; font-family: '方正手迹'; } .t2 { font-size: 100px; font-family: 'webfont'; } </style> </head> <body> <h1 class="t1">春风得意马蹄疾，不信人间有别离</h1> <h1 class="t2">春风得意马蹄疾，不信人间有别离</h1> </body> </html>2. 字体图标—方式一<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式一</title> <style> @font-face { font-family: 'iconfont'; src: url('./font3/iconfont.woff2?t=1704292879544') format('woff2'), url('./font3/iconfont.woff?t=1704292879544') format('woff'), url('./font3/iconfont.ttf?t=1704292879544') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 40px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>3. 字体图标—方式二<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式二</title> <link rel="stylesheet" href="./font3/iconfont.css"> <style> .iconfont { font-size: 40px; } </style> </head> <body> <span class="iconfont icon-guanzhu"></span> <span class="iconfont icon-fuwuqi"></span> <span class="iconfont icon-gongjizhe"></span> <span class="iconfont icon-shouhaizhe"></span> </body> </html>4. 字体图标—方式三<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式三</title> <script src="./font3/iconfont.js"></script> <style> .icon { width: 3em; height: 3em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guanzhu"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fuwuqi"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shouhaizhe"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gongjizhe"></use> </svg> </body> </html>5. 字体图标—方式一—在线使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式一_在线使用</title> <style> /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ @font-face { font-family: 'iconfont'; /* Project id 4398201 */ src: url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.woff2?t=1704293871283') format('woff2'), url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.woff?t=1704293871283') format('woff'), url('//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.ttf?t=1704293871283') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 40px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>6. 字体图标—方式二—在线使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式二_在线使用</title> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.css"> <style> .iconfont { font-family: "iconfont" !important; font-size: 40px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>7. 字体图标—方式三—在线使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体图标_方式二_在线使用</title> <script src="//at.alicdn.com/t/c/font_4398201_t2tj7evvt8.js"></script> <style> </style> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guanzhu"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fuwuqi"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shouhaizhe"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gongjizhe"></use> </svg> </body> </html> -
渐变 1. 线性渐变<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style> .box { width: 300px; height: 200px; border: 1px solid black; float: left; margin-left: 50px; font-size: 40px; } .box1 { background-image: linear-gradient(red, yellow, green); } .box2 { background-image: linear-gradient(to right top, red, yellow, green); } .box3 { background-image: linear-gradient(20deg, red, yellow, green); } .box4 { background-image: linear-gradient(red 50px, yellow 100px, green 150px); } .box5 { background-image: linear-gradient(20deg, red 50px, yellow 100px, green 150px); font-size: 80px; text-align: center; line-height: 200px; font-weight: bold; color: transparent; background-clip: text; } </style> </head> <body> <div class="box box1">默认情况（从上到下）</div> <div class="box box2">通过关键词调整线性渐变方向</div> <div class="box box3">通过角度调整线性渐变方向</div> <div class="box box4">调整线性渐变的区域</div> <div class="box box5">带带大师兄</div> </body> </html>2. 径向渐变<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>径向渐变</title> <style> .box { width: 300px; height: 200px; border: 1px solid black; float: left; margin-left: 50px; font-size: 40px; } .box1 { background-image: radial-gradient(red, yellow, green); } .box2 { background-image: radial-gradient(at right top, red, yellow, green); } .box3 { background-image: radial-gradient(at 100px 50px, red, yellow, green); } .box4 { background-image: radial-gradient(circle, red, yellow, green); } .box5 { background-image: radial-gradient(100px 100px, red, yellow, green); } .box6 { background-image: radial-gradient(red 50px, yellow 100px, green 200px); } .box7 { background-image: radial-gradient(100px 50px at 150px 150px, red 50px, yellow 100px, green 200px); } </style> </head> <body> <div class="box box1">默认情况</div> <div class="box box2">通过关键词调整径向渐变圆的圆心</div> <div class="box box3">通过像素值调整径向渐变圆的圆心</div> <div class="box box4">通过关键字circle调整为正圆</div> <div class="box box5">通过像素值调整为正圆</div> <div class="box box6">调整径向渐变的区域</div> <div class="box box7">综合写法</div> </body> </html>3. 重复渐变<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>重复渐变</title> <style> .box { width: 300px; height: 200px; border: 1px solid black; float: left; margin-left: 50px; font-size: 40px; } .box1 { background-image: repeating-linear-gradient(red 50px, yellow 100px, green 150px); } .box2 { background-image: repeating-radial-gradient(red 50px, yellow 100px, green 200px); } </style> </head> <body> <div class="box box1">重复线性渐变</div> <div class="box box2">重复径向渐变</div> </body> </html>
-
新增的文本属性 1. 文本阴影<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本阴影</title> <style> body { background-color: black; } h1 { font-size: 80px; text-align: center; color: white; /* text-shadow: 3px 3px; */ /* text-shadow: 3px 3px red; */ /* text-shadow: 3px 3px 10px red; */ /* text-shadow: 0px 0px 15px black; */ text-shadow: 0px 0px 20px red; font-family: '宋体'; } </style> </head> <body> <h1>带带大师兄</h1> </body> </html>2. 文本换行<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本换行</title> <style> div { width: 400px; height: 400px; border: 1px solid black; /* white-space normal：文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值） pre：原样输出（与pre标签的效果相同） pre-wrap：在pre效果的基础上，超出元素边界自动换行 pre-line：在pre效果的基础上，超出元素边界自动换行。且只识别文本中的换行，自动忽略首尾的空格（类似于trim） nowrap：强制不换行 */ white-space: pre-wrap; } </style> </head> <body> <div> 山回路转不见君山回路转不见君山回路转不见君山回路转不见君山回路转不见君山回路转不见君 雪上空留马行处 </div> </body> </html>3. 文本溢出<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本溢出</title> <style> ul { width: 400px; height: 400px; border: 1px solid black; font-size: 20px; list-style: none; padding-left: 0; } li { margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <ul> <li>大数据透视元旦消费新趋势 “冰雪经济”成新增长点</li> <li>图知道｜2024年1月起施行，这些新规值得关注</li> <li>网信部门依法查处花椒直播、天天吉历APP等破坏网络生态案件</li> <li>云南小伙靠直播把烧烤摊变网红店：白天播两小时，晚上门店就是满的</li> <li>2023大国重器上新了这些！最后一个你一定没见过→</li> <li>老照片：1985年昆明</li> </ul> </body> </html>4. 文本修饰<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本修饰</title> <style> h1 { font-size: 100px; /* text-decoration-line: line-through; text-decoration-style: wavy; text-decoration-color: skyblue; */ text-decoration: line-through wavy skyblue; } </style> </head> <body> <h1>孙笑川，又名：带带大师兄</h1> </body> </html>5. 文本描边<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本描边</title> <style> /* 只有webkit内核的浏览器支持 */ h1 { font-size: 100px; /* -webkit-text-stroke-color: red; -webkit-text-stroke-width: 3px; */ -webkit-text-stroke: red 3px; color: transparent; } </style> </head> <body> <h1>先生您好，欢迎光临红浪漫！</h1> </body> </html>
-
新增的边框相关属性 1. 边框圆角<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>边框圆角</title> <style> div { width: 400px; height: 400px; border: 2px solid black; margin: 0 auto; /* border-radius: 10px; */ /* 正圆 */ /* border-top-left-radius: 100px; border-top-right-radius: 50px; border-bottom-right-radius: 20px; border-bottom-left-radius: 10px; */ /* 椭圆 */ /* border-top-left-radius: 100px 50px; border-top-right-radius: 50px 25px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 10px 5px; */ border-radius: 100px 50px 20px 10px / 50px 25px 10px 5px; } </style> </head> <body> <div></div> </body> </html>2. 边框的外轮廓<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>边框的外轮廓</title> <style> .box1 { width: 400px; height: 400px; padding: 10px; border: 5px solid black; background-color: gray; margin: 0 auto; margin-top: 100px; /* outline-width: 20px; outline-color: orange; outline-style: solid; outline-offset: 0px; */ /* outline-offset不是outline的子属性 */ outline: 20px orange solid; } </style> </head> <body> <div class="box1"></div> </body> </html>
-
新增的背景相关的属性 1. background-origin<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background-origin</title> <style> .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); background-image: url('../images/bg01.jpg'); background-repeat: no-repeat; /* padding-box：从padding区域开始显示背景图（默认值） border-box：从border区域开始显示背景图 content-box：从content区域开始显示背景图 */ background-origin: content-box; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>2. background-clip<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background-clip</title> <style> .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 120px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); color: transparent; background-image: url('../images/bg02.jpg'); background-repeat: no-repeat; background-origin: border-box; /* padding-box：从padding区域开始向外裁剪背景（默认值） border-box：从border区域开始向外裁剪背景 content-box：从content区域开始向外裁剪背景 text：背景图只呈现在文字上 */ background-clip: text; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>3. background-size<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background-size</title> <style> div { width: 400px; height: 400px; border: 1px solid black; background-image: url('../images/bg03.jpg'); /* 手动设置 */ /* background-size: 400px 400px; */ /* 按百分比设置 */ /* background-size: 100%; */ /* 将背景图等比例缩放，使其的宽或高（看谁最大），与容器的宽或高相等， 再将完整图片包含在容器内（可能显示不全） */ /* background-size: contain; */ /* 将背景图等比例缩放，直到完全覆盖容器， 图片会尽可能全的显示在元素上（可能显示不全）优先选择该属性 */ background-size: cover; } </style> </head> <body> <div></div> </body> </html>4. background复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>background复合属性</title> <style> .box1 { width: 400px; height: 400px; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); /* background: 背景颜色 url 是否重复 位置 / 大小 原点 裁剪方式 */ background: skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px content-box; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>5. 多背景图<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多背景图</title> <style> div { width: 400px; height: 400px; border: 1px solid black; background: url('../images/bg-lt.png') no-repeat left top, url('../images/bg-rt.png') no-repeat right top, url('../images/bg-lb.png') no-repeat left bottom, url('../images/bg-rb.png') no-repeat right bottom; } </style> </head> <body> <div></div> </body> </html>
-
新增的盒子模型相关的属性 1. box-sizing<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>box-sizing</title> <style> /* box-sizing 怪异盒模型 content-box：width和height设置的是盒子内容区的大小（默认值） border-box：width和height设置的是盒子总大小（怪异盒模型） */ .box1 { width: 200px; height: 200px; background-color: skyblue; padding: 5px; border: 1px solid black; margin-bottom: 20px; } .box2 { width: 200px; height: 200px; background-color: gray; padding: 5px; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>2. resize<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>resize</title> <style> /* resize 调整盒子大小 none：不允许用户调整大小（默认值） both：可以调节元素的高度和宽度 horizontal：可以调节元素的宽度 vertical：可以调节元素的高度 */ .box1 { width: 400px; height: 200px; background-color: skyblue; resize: h; overflow: scroll; } .box2 { width: 800px; height: 600px; background-color: orange; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>3. box-shadow<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>box-shadow</title> <style> .box1 { width: 400px; height: 400px; background-color: orange; margin: auto; margin-top: 100px; font-size: 40px; /* 写两个值：水平位置 垂直位置 */ /* box-shadow: 10px 10px; */ /* 写三个值：水平位置 垂直位置 阴影颜色 */ /* box-shadow: 10px 10px blue; */ /* 写三个值：水平位置 垂直位置 阴影模糊程度 */ /* box-shadow: 10px 10px 10px; */ /* 写四个值：水平位置 垂直位置 阴影模糊程度 阴影颜色 */ /* box-shadow: 10px 10px 20px blue; */ /* 写五个值：水平位置 垂直位置 阴影模糊程度 阴影的外延 阴影颜色 */ /* box-shadow: 10px 10px 20px 10px blue; */ /* 写五个值：水平位置 垂直位置 阴影模糊程度 阴影的外延 阴影颜色 内阴影*/ /* box-shadow: 10px 10px 20px 10px blue inset; */ /* box-shadow: 0px 0px 50px red inset; */ position: relative; top: 0; left: 0; transition: 0.3s linear all; } .box1:hover { box-shadow: 0px 0px 20px red; } </style> </head> <body> <div class="box1">带带大师兄</div> </body> </html>4. opacity<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>opacity</title> <style> .box1 { width: 200px; height: 200px; background-color: orange; font-size: 40px; opacity: 0.2; } .box2 { position: relative; width: 400px; } h1 { position: absolute; top: 100px; left: 0; background-color: black; color: white; width: 100%; line-height: 100px; text-align: center; opacity: 0.5; } </style> </head> <body> <div class="box1">带带大师兄</div> <div class="box2"> <img src="../images/你瞅啥.jpg" alt=""> <h1>你瞅啥</h1> </div> </body> </html>
-
新增的长度单位 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>新增的长度单位</title> <style> * { margin: 0; padding: 0; } .box1 { height: 200px; width: 200px; background-color: skyblue; } .box2 { /* 视口高度的百分之20 */ height: 20vh; /* 视口宽度的百分之20 */ width: 20vw; background-color: green; } .box3 { height: 20vmax; width: 20vmax; background-color: orange; } </style> </head> <body> <div class="box1">像素</div> <div class="box2">vw和vh</div> <div class="box3">vmax和vmin</div> </body> </html>
-
定位 1. 相对定位<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>相对定位</title> <style> /* 相对于自己原来的位置 特点： 1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响 2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的 默认规则： 定位的元素会盖在普通元素之上 都发生定位的两个元素，后写的元素会盖在先写的元素之上 3.left不能和right一起使用，top与bottom同理 4.相对定位的元素，也能继续浮动（不推荐） 5.相对定位的元素，也能通过margin调整位置（不推荐） 注：绝大多数情况下，相对定位会与绝对定位一起使用 */ .outer { width: 500px; background-color: skyblue; border: 1px solid black; padding: 20px; } .box { width: 200px; height: 200px; font-size: 20px; } .box1 { background-color: #888; } .box2 { background-color: orange; position: relative; left: 50px; } .box3 { background-color: green; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </div> </body> </html>2. 绝对定位<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> /* 如何设置： 给元素设置position: absolute 可以使用left、right、top、bottom四个属性调整位置 绝对定位的参考点在哪里 参考它的包含块： 1.对于没有脱离文档流的元素：包含块就是父元素 2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面） 绝对定位元素的特点： 1.脱离文档流，会对后面的兄弟元素、父元素有影响 2.left和right不能同时使用，同理相对定位 3.绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主 4.绝对定位的元素也能通过margin调整位置（不推荐） 5.无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素 什么是定位元素：默认宽高都被内容所撑开，且能自由设置宽高（参考例子中的box2 span元素设置为定位元素后） */ .outer { width: 500px; background-color: skyblue; border: 1px solid black; padding: 20px; position: relative; } .box { width: 200px; height: 200px; font-size: 20px; } .box1 { background-color: #888; } .box2 { background-color: orange; position: absolute; top: 220px; left: 20px; transition: 1s all linear; } .box3 { background-color: green; } .outer:hover .box2 { left: 220px; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <span class="box box2">2</span> <div class="box box3">3</div> </div> </body> </html>3. 固定定位<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style> /* 如何设置： 给元素设置position: fixed 可以使用left、right、top、bottom四个属性调整位置 绝对定位的参考点在哪里 参考它的视口： 什么是视口？对于PC浏览器来说，视口就是我们看网页的那扇“窗户” 固定定位元素的特点： 1.脱离文档流，会对后面的兄弟元素、父元素有影响 2.left和right不能同时使用，同理相对定位 3.固定定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主 4.固定定位的元素也能通过margin调整位置（不推荐） 5.无论是什么元素（行内、行内块、块级）设置为绝固定位之后，都变成了定位元素 */ .outer { width: 500px; background-color: skyblue; border: 1px solid black; padding: 20px; } .box { width: 200px; height: 200px; font-size: 20px; } .box1 { background-color: #888; } .box2 { background-color: orange; position: fixed; top: 0; left: 0 } .box3 { background-color: green; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas totam quidem ipsum neque, eos reiciendis dolorum, nam repellat dolore saepe deserunt officiis iure perferendis provident. Quaerat earum cupiditate, tempore vitae quidem provident? Tenetur assumenda harum perferendis quisquam corrupti inventore ab aliquam minus sit exercitationem distinctio animi soluta reprehenderit eligendi quaerat iste consequatur fugiat, tempore excepturi doloremque adipisci quod fuga ut? Delectus dignissimos veritatis facere vel atque eveniet at, aspernatur repudiandae inventore dolore magnam quam mollitia modi sit. Similique, molestias natus magnam, id neque asperiores tempora amet quas perspiciatis alias reprehenderit voluptate non perferendis nulla aut maiores. Maxime, odio libero recusandae quae, expedita hic dolor soluta rerum culpa accusantium quibusdam inventore, esse temporibus veritatis. Tenetur, rerum, ipsam, praesentium iure molestiae asperiores quis voluptatibus totam odit ipsum aliquam autem! Ab, sit ratione, molestias animi repellat deserunt eligendi cumque in dolore a recusandae reprehenderit quae nemo repellendus ex autem amet omnis blanditiis soluta, accusantium temporibus? Nesciunt laboriosam temporibus, sequi doloremque quos deleniti voluptatum dolores. Doloribus aspernatur velit delectus quos. Doloribus in nobis ex, eius quidem odit assumenda ea nihil eveniet commodi exercitationem, modi officia necessitatibus eaque architecto, repellat dolor incidunt rerum odio veritatis voluptatum impedit consequuntur unde. Inventore pariatur quas voluptatem impedit et at aut similique sed, placeat error obcaecati nemo vero necessitatibus provident quod totam soluta deserunt dignissimos perspiciatis accusantium sequi esse voluptates. Sint odio dolorum quasi beatae soluta officiis tenetur natus ea repellendus necessitatibus, expedita eius atque vel aperiam possimus, ipsam placeat iure animi ad obcaecati impedit quod corporis ipsum ratione. A beatae molestias veritatis, harum corporis quas rerum fugit, odit voluptatem necessitatibus pariatur perspiciatis ipsam libero dolores consectetur, sequi expedita temporibus dolore. Ducimus neque minima perferendis numquam rem natus repellat voluptas dicta magnam in incidunt perspiciatis aliquid, nemo ullam quasi velit nostrum modi. Nihil tempora exercitationem asperiores iusto dolorum dicta, quam sint ea eius culpa dolor consequatur. Ipsam cupiditate nesciunt porro necessitatibus qui laboriosam repellendus quos laborum recusandae mollitia illo blanditiis omnis vitae facilis nobis adipisci repudiandae minus architecto, voluptas provident tenetur, obcaecati veniam dolore voluptatibus! Perferendis et praesentium id magnam voluptate voluptates vel unde quaerat facilis ullam quasi, laborum temporibus officia repellat expedita, minus ut, corrupti sequi. Minus ex impedit quasi dignissimos ullam dolores unde totam deserunt, est soluta esse delectus, voluptatum illo, error in voluptatibus autem accusantium provident nemo! Nobis, est. Autem et voluptatum, explicabo, impedit deserunt dignissimos eligendi quas ab id quidem dolorum debitis laudantium a numquam est unde excepturi assumenda vero enim eum quisquam similique reprehenderit. Porro aliquid provident animi ipsum debitis repellendus corrupti amet vitae facere ab nulla mollitia quas doloremque numquam laudantium a voluptate nostrum, voluptas accusantium at. Accusamus distinctio debitis nobis sunt ad aut obcaecati vitae dolores quibusdam soluta repellat consequatur veritatis incidunt, eos voluptates laudantium inventore, libero explicabo. Dignissimos maiores cumque quam sunt id recusandae doloremque ipsam vero soluta. Molestiae, exercitationem nobis nisi repudiandae, dicta magnam fuga et aliquam aliquid, illo sapiente mollitia est aspernatur placeat earum corporis ipsam blanditiis in ex obcaecati! Consequatur impedit voluptas pariatur, corrupti perspiciatis quasi facere expedita tenetur adipisci enim quidem delectus? Cupiditate assumenda praesentium vero nesciunt, error est? Tempora, saepe. Earum a aperiam vitae, tempora labore nesciunt excepturi sit neque itaque voluptatibus est ducimus nihil cupiditate quisquam. Nesciunt ad pariatur maxime nisi consectetur aspernatur ullam inventore iusto omnis animi assumenda, ducimus alias quibusdam cumque vel molestias ipsum exercitationem molestiae perspiciatis porro, hic vero placeat. Optio veritatis nemo consequuntur voluptates aspernatur sapiente totam iste corporis quibusdam officiis fugiat doloremque explicabo dicta mollitia eveniet, accusantium dolore quia voluptatem, voluptas dolores rem minima sunt. Hic necessitatibus nulla minima magnam animi distinctio ea illum suscipit harum dignissimos commodi aperiam officiis, sit corporis, unde nesciunt vitae debitis asperiores atque eaque consequuntur architecto eum? Aspernatur, nihil totam. Eos asperiores, officiis repudiandae corporis repellat expedita inventore neque enim laudantium magnam pariatur reprehenderit impedit voluptate vel laboriosam porro, labore molestias quisquam libero ad cupiditate blanditiis delectus illo! Dignissimos veniam accusantium, esse optio, nemo consectetur ab dolor eum molestiae itaque laudantium assumenda aperiam placeat obcaecati labore accusamus dolores doloribus? Deserunt consectetur sit a, reprehenderit aut sequi dignissimos optio sapiente enim nulla nesciunt libero nam dolor velit pariatur. Unde corrupti omnis officia. Vero amet maxime repellat adipisci repellendus voluptates eveniet, quos cumque eligendi consequuntur officia fuga sapiente odit labore ipsa obcaecati nemo similique, aspernatur delectus. Laudantium iste necessitatibus suscipit nobis architecto perferendis velit repellendus cum illum quos quo dolores ipsum repellat, tenetur fuga, dolor ab numquam animi cupiditate culpa. Adipisci neque amet sequi? Nemo atque perspiciatis dolor maiores corrupti. Provident at adipisci dignissimos alias enim! Natus doloribus odio molestias atque quae quasi saepe ipsa eum deserunt laudantium quos deleniti molestiae porro accusantium, iste architecto dolorem nemo ab! Ipsa ullam ducimus eaque hic itaque commodi! Consequuntur ea consequatur expedita, porro excepturi perspiciatis eos voluptatem impedit deleniti aperiam facilis voluptate labore atque quas eius. Omnis aliquid modi eius reprehenderit accusantium explicabo officia ratione vitae, dicta, nesciunt repellendus molestias, earum itaque magnam laborum deleniti minus labore repellat quibusdam quae sit perspiciatis inventore repudiandae. Amet minus nihil nobis blanditiis porro facilis repudiandae quo illum, quas quam est quisquam praesentium labore delectus. Nihil dolorem illo tenetur minima minus eum sunt in mollitia non! Dignissimos, temporibus officiis eum minus molestias explicabo laudantium consectetur molestiae possimus, itaque velit quidem corrupti nemo natus laborum fugit exercitationem sit necessitatibus ducimus saepe hic quos! Consequatur voluptate rem laborum amet ratione, doloremque ea, ullam error voluptatibus temporibus, velit iusto praesentium repellendus modi facere non cupiditate corrupti nam autem provident tempora? Nam porro dolorem alias dolorum culpa tenetur aperiam maiores sunt quasi eius laudantium minus eos deleniti exercitationem doloribus similique ipsa, maxime labore voluptate. Commodi architecto consequatur nesciunt odio incidunt atque facilis minus voluptatibus ea repellat harum quibusdam molestias illo, animi itaque at veritatis soluta quidem? Aut, molestias aliquid atque, sunt nulla, autem recusandae quae tempora nisi ducimus accusantium provident veritatis. Harum at inventore velit illo quia amet reiciendis nulla nam dignissimos est? Natus, mollitia odio! Repudiandae ad eligendi similique dolor. Exercitationem quas, non sint reprehenderit omnis magnam, hic repellat beatae odio illo porro saepe alias maiores accusantium.</div> </body> </html>4. 粘性定位<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>粘性定位</title> <style> /* 如何设置： 给元素设置position: sticky 可以使用left、right、top、bottom四个属性调整位置，不过最常用的是top 参考点在哪里？ 离它最近的一个拥有“滚动机制”的祖先元素（胶水粘住的点），即便这个祖先不是最近的真实可滚动祖先 特点： 1.不脱离文档流，它是一种专门用于窗口滚动时的新的定位方式 2.最常用的值是top 3.粘性定位和浮动可以同时设置，但不推荐 4.粘性定位也能通过margin调整位置，但不推荐 粘性定位和相对定位的特点基本一致，不同的是，粘性定位可以在元素到达某个位置时将其固定 */ * { margin: 0; padding: 0; } body { height: 2000px; } .page-header { height: 100px; text-align: center; line-height: 100px; background-color: orange; font-size: 20px; } .item { background-color: gray; } .first { background-color: skyblue; font-size: 40px; position: sticky; top: 0; } </style> </head> <body> <!-- 头部 --> <div class="page-header">头部</div> <!-- 内容 --> <div class="content"> <div class="item"> <div class="first">A</div> <h2>A1</h2> <h2>A2</h2> <h2>A3</h2> <h2>A4</h2> <h2>A5</h2> <h2>A6</h2> <h2>A7</h2> <h2>A8</h2> </div> <div class="item"> <div class="first">B</div> <h2>B1</h2> <h2>B2</h2> <h2>B3</h2> <h2>B4</h2> <h2>B5</h2> <h2>B6</h2> <h2>B7</h2> <h2>B8</h2> </div> <div class="item"> <div class="first">C</div> <h2>C1</h2> <h2>C2</h2> <h2>C3</h2> <h2>C4</h2> <h2>C5</h2> <h2>C6</h2> <h2>C7</h2> <h2>C8</h2> </div> </div> </body> </html>5. 定位的层级<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位的层级</title> <style> /* 1.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的 2.如果位置发生重叠，默认情况是：后面的元素会显示在前面的元素之上 3.可以通过css属性z-index调整元素的显示层级 4.z-index的属性值是数字，没有单位，数字越大，层级越高 5.只有定位的元素，设置z-index才有效 6.如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，请检查其 包含块 的层级 */ .outer { width: 500px; background-color: skyblue; border: 1px solid black; padding: 20px; position: relative; } .box { width: 200px; height: 200px; font-size: 20px; } .box1 { background-color: #888; } .box2 { background-color: orange; position: relative; top: -130px; left: 50px; } .box3 { background-color: green; position: absolute; top: 130px; left: 130px; } .box4 { background-color: red; position: fixed; top: 200px; left: 200px; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> </div> </body> </html>6. 定位可以越过padding<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位可以越过padding</title> <style> .outer { width: 800px; height: 800px; padding: 20px; background-color: gray; position: relative; } .inner { width: 200px; height: 200px; background-color: orange; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>6. 定位的特殊应用一<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位的特殊应用1</title> <style> /* 定位的特殊应用： 1.发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高 2.发生相对定位后，元素依然是之前的显示模式，不脱离文档流 3.以下所说的特殊应用只针对 绝对定位、固定定位 元素，不包括相对定位元素 */ .outer { height: 400px; background-color: gray; position: relative; } .inner { background-color: orange; font-size: 20px; padding: 2dvb; border: 5px solid black; position: absolute; /* 让定位元素充满包含块，宽：同时设置left right为0，高同理 */ left: 0; right: 0; } </style> </head> <body> <div class="outer"> <div class="inner">带带大师兄</div> </div> </body> </html>8. 定位的特殊应用二<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位的特殊应用2</title> <style> .outer { width: 800px; height: 400px; background-color: gray; position: relative; } .inner { width: 400px; height: 100px; background-color: orange; font-size: 20px; position: absolute; /* 让定位元素在包含块中居中 */ /* 方案一：推荐使用 */ /* top: 0; left: 0; right: 0; bottom: 0; margin: auto; */ /* 方案二 */ top: 50%; left: 50%; margin-left: -200px; margin-top: -50px; /* 注：以上两种方案，儿子必须有宽高才行 */ } </style> </head> <body> <div class="outer"> <div class="inner">带带大师兄</div> </div> </body> </html>
