前端学习笔记（三）2020.02.27

网页布局总结

一个完整的网页=标准流+浮动+定位

 

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

2.浮动

可以让多个元素一行显示或者左右对齐盒子，多个块级盒子水平显示使用浮动

3.定位

定位最大特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。

定位作用于需要在父盒子中自由移动的布局方式

 

 

display的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来

 

1.display属性

display属性用于设置一个元素应如何显示

--display:none; 将元素进行隐藏

--display:block; 除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素之后不再占有原来的位置

 

 

2.visibility可见性

--visibility: visible; 元素可见

--visibility:hidden; 元素隐藏(继续占有原来的位置)

如果隐藏元素需要原来的位置，则使用visibili:hidden;

如果隐藏元素不想要原来的位置，就用display:none;

 

3.overflow溢出

overflow:visible; 溢出可视

overflow:hidden; 溢出部分隐藏

overflow:scroll; 滚动条

overflow:auto; 超出则有滚动条；不溢出没有滚动条；

有定位的盒子不能添加overflow

 

 

 

精灵图

1.为什么需要精灵图

为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度

核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求就可以了

 

2.精灵图（sprites）的使用

使用景林图核心：

1.精灵技术主要针对于背景图片的使用。就是吧多个背景图片整合到一张大图中。

2.这个大图片也称sprites 精灵图 或者 雪碧图

3.使用background-position移动背景图片位置

4.移动距离就是这个目标图片的x和y坐标。注意网页中的坐标有何不同

5.因为一般情况下都是往上往左移动，所以数值都是负值

核心总结：

精灵图片主要针对于小的背景图片使用

主要借助于background-position来实现

一般情况下为负值

 

字体图标

1.字体图标的产生

字体图标使用场景：主要用于显示页面中通用、常用的一些小图标。

精灵图的缺点：

1.图片文件还是比较较大

2.图片本身放大和缩小会失真

3.一旦图片制作完毕想要更换比较复杂

 

因此 字体图标iconfont 能够很好的解决问题

字体图标展示的是图标，其本质是字体

2.字体图标的优点

---轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少服务器的请求

---灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

---兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不饿能代替精灵技术，只是对动作中图标部分技术的提升和优化

总结：

如果遇到一些结构央视比较简单的小图标，就用字体图标

如果遇到一些结构复杂和样式复杂的小图片，就用精灵图

 

/*

 

3.字体图标的引用

下载包里的fonts文件放入页面根目录下（下载参见阿里妈妈）

不同浏览器所支持的字体格式不同

 

 

另外学习补上待定... ...

*/

 

CSS三角

将盒子width/height置零，boder设置为透明色，将所需要朝向反方向的边置为不透明，则会出现三角

 

具体代码：

 

.box {

width:0px;

height:0px;

line-height: 0px;

font-size: 0px;

boder:10px solid transparent;

border-left-color: #fff;

}

则可以设置一个朝向向右的三角

 

用户界面的样式

鼠标样式cursor

属性值	描述
default	小白指针
pointer	小手
move	十字架，移动
text	文字选择光标
not-allowed	禁止

 

 

轮廓线 outline

outline:none;取消文本框蓝色边框线

 

防止拖拽文本域 resize

textarea{

resize:none;

}

取消文本域大小的改变

 

vertical-align属性应用

CSS使用场景：经常用于设置图片或者表单（行内块元素）和文字对齐

官方解释：用于设置一个元素的垂直对齐方式，但是只针对行内元素或者行内块元素

 

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

 

 

解决图片底部默认空白空隙

原因：图片默认与基线对齐而不是底线对齐

解决办法：

1.设置vertical-align: middlie|top|bottom;

2.把图片转换为块级元素 display: block;