显示和隐藏元素
显示—屏蔽；(转换成块元素&显示)无(隐藏&不要保持原来的位置)—重要！
能见度—可见隐藏(隐藏&保持原来的位置)
复习：overflow:hidden; 1.之前解决父子关系垂直嵌套的合并塌陷问题。2.清除浮动
溢出—内容隐藏部分隐藏(键)滚动(强制滚动条样式出现)自动(根据内容判断滚动条是否出现)
Elf技术
目的:为了有效减少服务器接受和发送请求的次数，提高页面加载速度
实现原理:只要求一张图–只是一张显示不同地点的小图。
案例使用:
背景图像背景图片
背景重复平铺吗？
背景位置背景定位
小心:
1.精灵技术主要针对背景图片，插入的img不需要这个技术1.Elf技术主要是针对背景图片，插入的img不需要这个技术。
2.你需要测量每个小背景图片的大小和位置。
3.给盒子配个小背景图，背景定位基本都是负面的。
##
字体图标
优点:浏览器支持好，灵活；体积小，加载速度快，节省带宽和流量；减轻服务器压力。
注意:字体图标是字体，不是图片
使用字体图标
1.把包里的字体文件夹拷贝一份，放到我们项目的根目录下。
2.在html文件标签中添加结构
3.在html文件样式style中声明字体:告诉代码和其他人使用我们自己的自定义字体(一定要注意路径问题)
4.设置框的字体。
附加字体图标
原版不能删除，继续用，这个时候就需要我们这么做。
从压缩包上传selection.json，然后选择你想要的新图标，下载压缩包，替换原来的文件夹。
重新导入selection.json生成新的字体包–“附加字体选择–点击下载–”从以前的项目中删除字体–用新字体包中的fonts文件夹替换它。
css三角形
本质:我还是用盒子的边框。
练习:
1.宽度和高度为零。
2.四边都要，只保留我们需要的边框颜色，其他颜色都是透明的。
3.为了解决兼容性问题，请设置:行高:0；字体大小:0；
三角形案例： .demo { position: relative; width: 200px; height: 100px; background-color: pink; } i { position: absolute; top: 35px; left: 200px; width: 0; height: 0; border: 15px solid transparent; border-left-color: hotpink; } <div class="demo"> <i></i> </div>
用户界面风格
<ul> <li style="cursor:default;">我是默认的小白鼠标样式</li> <li style="cursor:pointer;">我是鼠标小手样式</li> <li style="cursor:move;">我是鼠标移动样式</li> <li style="cursor:text;">我是鼠标文本样式</li> <li style="cursor:not-allowed;">我是鼠标禁止样式</li> </ul>?cursor:pointer; -- 记住！cursor:move; --记住！cursor:not-allowed; --记住！
等高线
大纲:0/无；—–删除轮廓线
防止文本字段被拖动
调整大小:无；
垂直对齐垂直对齐
如果让单行文本垂直居中 — 使用line-height，如果处理图片和文本的垂直对齐方式，line-height=高 不可以实现！
注意：只针对行内元素和 行内块起作用。
通常用于 — 图片和文本对齐问题和去除图片底部空白缝隙问题。去除图片底部空白让图片白不要和 基线对齐 — vertical-align:top middle bottom转换为块元素 — display:block; div { border: 2px solid red; } img { /* 这个属性加给图片本身，千万不要加给图片的父级盒子 */ vertical-align: middle; }? <div> <img src="i***ges/ldh.jpg" alt=""> </div>
单行文字溢出省略号显示(背诵！)
1.必须强制一行显示空白:nowrap
2.多余部分隐藏溢出:隐藏；
3.文本省略号替换多余的文本text-overflow:省略号；
多行文本省略号显示
overflow: hidden; /*文字省略号代替*/ text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 3; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;
负值的保证金(实践！)
预备知识要点:
相对—相对定位位置
绝对—绝对定位不占位置
浮动—-浮动不占位置。
文本环绕效果
浮动—不能按住下面的图和字。
内嵌块可以分别在一行宽度和高度中显示
文本对齐:居中—添加到父元素，使子框(内联块/内联元素)水平居中。
JD.COM三角的巧妙运用
div { /* 1.宽高为0 */ width: 0; height: 0; /* 2.只保留需要的边框颜色 */ border-color: transparent transparent red transparent; /* 3.边框是实线 */ border-style: solid; /* 4.保留需要的边框大小，剩下的为 0 */ border-width: 0 0 100px 50px; }?<div> </div>
本文来自Total.不想长大投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/594381.html
微信扫一扫 
