本文主要是介绍web前端学习第十一天，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
网页布局总结
通过盒子模型，清楚知道大部html标签是一个盒子。
通过CSS浮动，定位可以让每个盒子排列成为网页
一个完整的网页，是标准流，浮动，定位一起完成布局的，每个都有自己的专门用法。
1，标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2，浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3，定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局。
元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现
本质：让一个元素在页面中隐藏或者显示出来
1，display 属性
display：none；隐藏对象
display：block；除了转换为块级元素之外，同时还有显示元素的意思。
display隐藏元素后，不再占有原来的位置
后面应用及其广泛，搭配JS可以做很多的网页特性。
2，visibility 属性用于指定一个元素应可见还是隐藏
visibility ：visible; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用visibility：hidden
如果隐藏元素不想要原来位置，就用display：none （用处更多 重点）
3，overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
属性值：
visible：不剪切内容也不添加滚动条
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出内容否，总是显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条。
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余的部分。
精灵图
1，为什么需要精灵图
一个网页往往会应用很多小的背景图像作为装饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此。为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites，CSS雪碧）
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵技术目的：
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
2，精灵图（sprites）的使用
使用精灵图核心：
1，精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
2，这个大图片也称为sprites精灵图，或者雪碧图
3，移动背景图片位置，此时可以使用background-position
4，移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
5，因为一般情况下都是往上往左移动，所以数值是负值
6，使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
使用精灵图核心总结：
1，精灵图主要针对于小的背景图片使用。
2,主要借助于背景位置来实现–background-position。
3，一般情况下精灵图都是负值，（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）
语法：
选择器 {background-position: -182px 0/ x y;}
3,字体图标的产生
字体图标使用场景：主要用于显示网页中通用，常用的一些小图标
3.1，精灵图是有诸多优点的，但是缺点很明显。
1，图片文件还是比较大的
2，图片本身放大和缩小会失真
3，一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
3.2，字体图标的优点
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器，请放心使用。
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提示和优化。
总结：
1，如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2，如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
3.3，字体图标的引入
下载完毕之后，注意原先的文件不要删，后面会用
第一步：把下载包KIM的fonts文件夹放在HTML页面根目录下。
第二步：在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中，一定注意字体文件路径的问题。style.css ：文件复制font-face样式。
第三步：打开下载好的demo浏览器里面复制对应的图标复制后面的小框框然后放在结构里
第四步：根据对应的结构来样式声明CSS。
4，三角
网页中常见一些三角形，使用CSS直接画出来就可以了，不必做成图片或者字体图标。
一张图，你就知道CSS三角是怎么来的了，做法如下：
div {width: 0;height: 0;line-height: 0;font-size: 0;border: 10px solid transparent;border-top-color: aquamarine;}
这篇关于web前端学习第十一天的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
