day08（CSS06-定位+装饰）v1.0.pdf_CSS装饰属性应用资源-CSDN下载

需积分: 10 116 浏览量 2022-02-17 20:27:21 上传评论收藏 1.45MB PDF 举报

【CSS定位】是CSS布局中的关键部分，它允许开发者精确控制元素在网页上的位置。定位的主要应用场景包括解决元素间的层叠问题以及固定元素在屏幕特定位置。定位方式主要有四种：静态定位、相对定位、绝对定位和固定定位。 **静态定位**是元素的默认状态，遵循标准文档流。元素按照正常的HTML结构顺序排列，不能通过`top`, `bottom`, `left`, `right`等方位属性移动。静态定位在CSS定位讨论中通常不被考虑，因为它不改变元素的原始位置。 **相对定位**是元素相对于其正常位置进行偏移。设置`position: relative;`后，可以通过方位属性调整元素的位置，但元素仍保留其在文档流中的空间，即它不会影响其他元素的布局。 **绝对定位**则使元素相对于最近的非静态定位的祖先元素（或<body>元素，如果无此类祖先）定位。设置`position: absolute;`，然后使用方位属性，元素将脱离标准流，不再影响其他元素。这种定位常用于创建层叠效果，如对话框或悬浮菜单。 **子绝父相**是一种常见的定位组合，指的是一个绝对定位的子元素相对于其相对定位的父元素定位。这样，子元素可以根据父元素的位置进行移动，而不会影响其他兄弟元素。 **固定定位**使元素相对于浏览器窗口定位，即使滚动页面，元素也会保持在屏幕的特定位置。例如，导航栏或侧边栏常使用固定定位保持可见。 **装饰性属性**如`cursor`可以改变鼠标悬停在元素上时的光标样式。常见的光标类型有`pointer`（手形）、`default`（箭头）和`text`（文本输入）等。此外，`border-radius`属性可以创建圆角或胶囊形状的按钮，通过设置相同的边框半径实现正圆效果。 **display**和`visibility`属性都可以用来隐藏元素，但有区别。`display: none;`会完全移除元素，不占据任何空间；而`visibility: hidden;`则元素仍然占据空间，只是不可见。了解这些定位和装饰性属性对于构建响应式、交互性强的网页至关重要。通过熟练运用，开发者可以创造出丰富多样的布局和视觉效果，提升用户体验。在实际项目中，结合不同的定位方式和装饰性属性，可以实现复杂的网页设计需求。

资源详情

资源评论

资源推荐