目录
16 网页布局总结
-
标准流：垂直的块级盒子显示就用标准流（上下排列）
-
浮动：多个块级盒子水平显示就用浮动（左右排列）
-
如果元素在某个盒子内自由移动就用定位布局（自由定位）
17 元素的隐藏与显示
让一个元素在页面中隐藏或者显示出来：类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。
-
display 显示隐藏
-
visibility 显示隐藏
-
overflow 溢出部分显示隐藏
17.1 display 属性 display：none
display属性：设置一个元素如何显示
-
display：none；隐藏对象（对象也不占有原来位置）
-
display：block；转为块级元素 / 显示元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.block1 {
display: none; /* 隐藏了block1 */
width: 300px;
height: 300px;
background-color: aqua;
}
.block2 {
width: 300px;
height: 300px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="block1"></div>
<div class="block2"></div>
</body>
</html>
display后面的应用极其广泛，搭配JS可以做很多网页特效。
17.2 visibility 可见性 visibility：hidden
设置属性值：
-
visibility：inherit 继承父级元素的隐藏性
-
visibility：visible 元素可视
-
visibility：hidden 元素不可视（继续占有原来的位置）
注意点：
-
如果隐藏元素想要保留原来的位置，就使用
visibility -
如果隐藏元素不想要保留原来的位置，就使用
display
17.3 overflow 溢出隐藏 overflow：hidden
overflow属性指定了如果内容溢出一个元素的框（超过起指定的高度或宽度）时，会发生什么?
-
visible：不剪切内容也不添加滚动条
-
hidden：不显示超过对象尺寸的内容，超出部分隐藏
-
scroll:不管超出内容否，总是显示滚动条
-
auto：当没有超出内容时不显示滚动条，当超出内容时，显示滚动条
注意点：
-
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
-
但是如果有定位的盒子，请慎用
overflow:hidden，因为它会隐藏多余的部分。
18 精灵图 sprites
为何需要精灵图？
页面有许多的图片，每次加载网页都需要向服务器中请求，图片数量太多时需要反复向服务器请求和接收图片，导致速度非常慢。
CSS精灵技术：我们将一些图片组合在一起，只进行一次请求，提升页面加载速度。
精灵图的使用：
-
精灵图主要是针对小的背景图片（不包括经常更换的产品图）
-
移动整个合并后的背景图片位置：
background-position -
一般情况下精灵图（背景图片中的一个小图）都是负值（x往右为正，y往下为正）
.box1 {
width: 60px; /* 框出精灵图的大小 */
height: 60px;
margin: 100px auto; /* 精灵图的左上角最终显示在页面的哪个位置 */
background: ur1(images/sprites.png) no-repeat -182px 0; /* 将背景图sprites.png往左移动182px，垂直不动 */
}
效果：从背景图sprites.png：
中截取到所需的精灵图，放入盒子box1中：
19 字体图标 iconfont
使用场景：显示网页中通用、常用的一些小图标
精灵图的缺点：
-
图片文件比较大（字体图标看上去是图片，但本质是文字，所占的内存非常小）
-
图片本身放大和缩小会失真（字体图标是字体，字体是矢量的，随便放大或缩小）
-
一旦图片制作完毕想要更换很复杂，需要P图（字体图标是文字，可以直接更换）
字体图标的优点：
-
轻量级∶一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
-
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
-
兼容性：几乎支持所有的浏览器，可以放心使用
字体图标展示的是图标，但是本质是字体：可以继承文字的属性，例如：font-size color
注意：字体图标不能取代精灵图技术，因为字体图标是很简单的图标，不能展示非常难的图标，例：腾讯的logo很难用字体图标表示。
小结：
-
如果遇到一些样式比较简单的小图标，就使用字体图标
-
如果遇到一些样式复杂的小图片，就使用精灵图
19.1 字体图标下载
19.2 字体图标的使用
字体图标的使用分为4步
-
第一步：下载字体图标，最后得到一个这个文件：
-
第二步：将fonts文件夹复制到index.html的同级目录（页面的根目录）下。
fonts文件夹内有4个文件，是为了更好的兼容性：
不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
-
TureType(
.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+ ； -
Web Open Font Format(
.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+ ； -
Embedded Open Type(
.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+ ； -
SVG(
.svg)格式.svg字体是基于SVG公体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ ;
-
第三步：打开style.css文件，把这些字体文件通过css引入到我们页面中，注意字体文件的路径，复制以下代码到index.html的
<style></style>中（或者外部样式表中），进行字体声明：@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?c07rcx'); src: url('fonts/icomoon.eot?c07rcx#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?c07rcx') format('truetype'), url('fonts/icomoon.woff?c07rcx') format('woff'), url('fonts/icomoon.svg?c07rcx#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } -
第四步：打开demo.html，选择自己的想要的字体图标，复制这个小框到自己的html文档中的
<span></span>中间：
-
这个小框就是一个字体，我们需要设置字体样式：
span { font-family:'icomoon'; font-size: 30px; }
-
最后就可以在浏览器中看到我们的字体图标了
总结代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标</title>
</head>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?c07rcx');
src: url('fonts/icomoon.eot?c07rcx#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?c07rcx') format('truetype'),
url('fonts/icomoon.woff?c07rcx') format('woff'),
url('fonts/icomoon.svg?c07rcx#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
p{
font-family:'icomoon' ;
/* 和上面font-family保持一致 */
font-size: 30px;
}
</style>
<body>
<p></p>
</body>
</html>
19.3 字体图标的追加
问题：如果工作中，原来的字体图标不够用了，我们需要添加追加新的字体图标到原来的字体文件中。
步骤：网址中点击IconMoon App，点击左上角Import Icons，把压缩包iconmoon里面的selection.json 打开，点击新加的图标，点击Generate Font，点击Download，并替换原来的文件即可。
原理：向服务器一次性请求包括所有的字体的iconmoon文件。
20 三角形制作
网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
设置一个没有大小的盒子，然后给这个盒子一个边框：
.one {
width: 0; /* 没有大小 */
height: 0;
border-top: 10px solid pink;
border-left: 10px solid green;
border-right: 10px solid red;
border-bottom: 10px solid blue;
}
因此三角形的制作方法：
.one {
width: 0;
height: 0;
border: 50px solid transparent; /* 使用边框宽度50px控制三角形大小 */
border-top-color: pink;
}
同时，对于这种效果：
可以使用“子绝父相”的方法，父级一个大的相对定位的盒子，子级为一个绝对定位的小三角。
扫一扫
1394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
