CSS_定位_网页布局总结_元素的显示与隐藏

简介: CSS_定位_网页布局总结_元素的显示与隐藏

粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位 占有原先的位置 (相对定位特点)
  3. 必须添加 top 、left、right、bottom 其中一个才有效
    跟页面滚动搭配使用。 兼容性较差,IE 不支持。
    1.9 定位的总结
    定位模式 是否脱标 移动位置 是否常用
    static静态定位 否 不能使用边偏移 很少
    relative相对定位 否(占有位置) 相对自身位置移动 常用
    absolute绝对定位 是(不占有位置) 带有定位的父级 常用
    fixed固定定位 是(不占有位置) 浏览器可视区 常用
    sticky粘性定位 否(占有位置) 浏览器可视区 很少用
  4. 一定记住 相对定位、固定定位、绝对定位 两个大的特点: 1. 是否占有位置(脱标否) 2. 以谁为基准点移动位置
  5. 学习定位重点学会子绝父相。
    1.10 定位叠放次序 z-index
    在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)
    语法:
相关文章
|
4天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
33 3
|
21天前
|
前端开发
CSS网页布局综合练习
CSS网页布局综合练习
|
21天前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
21天前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
1月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
84 0
|
2月前
|
前端开发
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
29 5
|
3月前
|
容器 C# 开发者
XAML语言大揭秘:WPF标记的魅力所在,让你轻松实现界面与逻辑分离,告别复杂代码!
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式,使得开发者可以专注于逻辑和业务代码的编写,而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性,XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中,开发者应根据具体需求选择合适的技术方案,以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
44 0