css定位-显示隐藏-画三角
定位
1. 定位模式
定位模式决定元素的定位方式,通过CSS的position属性来设置,值可以分为四个:
- static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
2. 边偏移
边偏移就是定位的盒子移动到最终位置。有top,bottom,left,right四个属性
3. 静态定位static (了解)
静态定位 元素与的默认定位方式,无定位的意思。
语法 : 选择器 {position:static;}
- 静态定位按照标准流特性摆放位置,它没有偏移
- 静态定位在布局时很少用到
4. 相对定位 relative (重要)
相对定位 是元素在移动位置的时候,是相对于它原来的位置来说的。(自恋型)
语法 : 选择器{ position:relative;}
特点:
- 移动位置的时候参照点是 自己原来的坐标
- 原来 在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标)
- 典型的定位是 给
绝对定位
当爹的
5. 绝对定位 absolute (重要)
绝对定位 是 元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)
语法: 选择器 { position:absolute;}
特点:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(document文档)
- 如果祖先元素有定位(相对relative,绝对absolute,固定定位),则以
最近一级
的有定位祖先元素
为参考点在里面移动位置 - 绝对定位
不再占有
原来的位置(脱标)
6. 子绝父相
子级是绝对定位的话,父级要用相对定位
子级绝对定位,不会占有位置
,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子- 父盒子需要加定位 限制子盒子在父盒子内显示
父盒子布局时,需要占有位置
,因此父盒子只能是相对定位。
子绝父相不是绝对的!
7. 固定定位 fixed (重要)
固定定位 是元素固定于浏览器可视区的位置。
主要使用场景:可以在浏览器页面滚动时,元素的位置一直在某个地方,不 随着你的滚动而滚动
语法: 选择器{position:fixed;}
固定定位特点:
-
以浏览器的可视窗口为参照点移动元素
-
跟父元素没有任何关系
-
不随着滚动条滚动
-
固定定位不占有原先的位置(脱标)
-
固定到版心右侧
- 让固定定位的盒子left:50%,走到浏览器可视区(版心)的一半位置
- 让固定定位的盒子margin-left:版心宽度的一半。
position:fixe;
/ 走浏览器宽的一半 /
left:50%;
/ 利用margin走版心宽的一半 /
margin-left:400px;
8. 粘性定位 sticky (了解)
粘性定位:相当于侧边栏,一开始固定在版心右边不动,随着鼠标向下滚动,到某一个位置,她就跟固定定位一样在可视区随着你移动而移动
语法: 选择器{position:sticky; top:10px;}
特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加 top,left,righ,botto其中一个才有效
/ 粘性定位 /
position:sticky;
/ 距离可视区最上面距离为0 时,变成固定定位 /
top:0;
9. 定位叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index 来控制盒子的前后次序(z轴:屏幕与你之间)
语法: 选择器 { z-index:1;}
- 数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上,离我们越近
- 如果属性值相同,则按照书写顺序,后来居上
- 数字后面不加单位!!
- 只有定位的盒子才有z-index属性
10. 绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto;
水平居中,但是可以通过以下计算方法实现水平和垂直居中。
- left:50%; 让盒子的左侧移动到父级元素的水平中心位置
- margin-left:-100px; 让盒子向左移动自身宽度的一半。
position : absolute;
/ 父容器宽度的一半 /
left:50%;
/ margin 负值 往左边走,自己盒子宽度的一半 /
margin-left:-100px;
11. 定位特殊特性
绝对定位和固定定位也和浮动类似:
- 行内元素添加绝对或固定定位,可以直接设置高度和宽度。
- 块级元素添加绝对或固定定位,如果不给宽度或者宽度,默认大小时内容的大小
- 脱标的盒子不会触发外边距塌陷
12. 绝对定位(固定定位)会完全压住盒子
浮动元素只会压住它下面标准流的盒子,但不会压住盒子里面的文字(图片)
绝对定位(固定定位)会压住下面标准流所有的内容
元素的显示与隐藏
1. display 属性(非常重要)
display 属性用于设置一个元素应如何显示。
- display:none;隐藏对象
- display;block;除了转换块级元素之外,同时还可以显示元素
display隐藏元素后,不再占有原来的位置
!
2. visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏
- visibility:visible;元素可看见
- visibility:hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置
!
3. overflow溢出
overflow对溢出的部分(超出固定高度和宽度)进行一些事情…
- visible:正常默认的
- hidden:不显示超过对象尺寸的内容,超出的部分隐藏掉
- scroll:不管是否内容超出,总显示滚动条
- auto:超出自动显示滚动条,不超出不显示滚动条
如果有定位的盒子,慎用overflow:hidden,否则会隐藏多余的部分
3. 精灵图
精灵图:把一些小图片放在一张大图片上,服务器只需要请求一次就可以了
使用CSS精灵技术的目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度
精灵图缺点:
- 图片文件本身较大
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
1. 精灵图的使用
使用精灵图核心:
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为sprites 精灵图 或者 雪碧图
移动背景图片位置,此时可以使用background-position
- 移动的距离就是这个目标图片的
x和y坐标
。右边为x正轴
,下边为y正轴
- 因为一般情况是往上往左移动,所以
数值一般是负值
- 使用精灵图的时候需要精确测量 每个小背景图片的大小和位置
background: url(sprites.png) -155px -106px no-repeat;
2. 精灵图案例-拼出自己名字
<