网页布局总结
一个完整的网页=标准流+浮动+定位
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;
}
<div class="box">
</div>
则可以设置一个朝向向右的三角
用户界面的样式
鼠标样式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;