html-day07垂直对齐&定位

简介: html-day07垂直对齐&定位

html-day07垂直对齐&定位


1.垂直对齐:只有行内块元素可以使用该属性


         

2.定位

概念:将一个元素放在指定的位置上。特指position.  [将a强行放在b身上]
语法:
    position:定位方式;
    left:*px; | right:*px;
    top:*px; | bottom:*px;
1.定位方式
    1.static静态定位。【默认值】
    2.fixed固定定位:基于浏览器当前屏进行定位。
        盒子完全居中于未知大小的盒子【面试题】
            法1.
                position:fixed;
                top:50%;
                left:50%;
                margin-top:负盒子高度的一半;
                margin-left:负盒子宽度的一半;
           法 2.
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    3.relative相对定位:基于元素本身的位置进行定位.不会脱离文档流
    4.absolute绝对定位:基于最近的被设置非静态定位的上级元素进行定位,如果没有,就基于浏览器第一屏进行定位。
        应用:子绝父相。
    注意:fixed和absolute都会脱离文档流!

2.锚点链接

<div id='id名'>要跳转到的区域内容</div>
<a href='#要跳转区域的id名'>链接提示内容</a>

3 img图片和背景图片的选用:

        数据从数据库来,经常更换,使用img [产品图。广告图]
        是页面结构的一部分,使用img  [logo]
        精灵图用背景图。
相关文章
|
6月前
|
移动开发 搜索推荐 定位技术
HTML地理定位
HTML地理定位
55 0
|
6月前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
2月前
|
存储 移动开发 定位技术
HTML5 Geolocation(地理定位)优化到最高精度
HTML5 Geolocation API 可让网页访问用户的地理位置信息。为优化地理定位精度,需考虑设备、浏览器设置、网络状况及编码实现。使用 `enableHighAccuracy` 选项请求高精度,并确保设备开启 GPS,网络良好。结合多种数据源(如 GPS、Wi-Fi)可提高准确性。利用 `watchPosition` 定期更新位置,并妥善处理定位错误。务必遵循用户隐私原则,获取同意并遵守相关法规。这样可有效提升地理定位的精度与用户体验。
|
2月前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
本文介绍了在Twaver HTML5中如何设置告警元素(Alarm)的位置,包括Node和Link网元的告警位置偏移量以及定位理解。通过示例代码展示了如何在不同类型网元上设置告警位置,并解释了如何通过百分比来确定告警在Link网元上的位置。
35 0
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
|
3月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
3月前
|
Web App开发 移动开发 安全
html5地理定位的一些问题
html5地理定位的一些问题
|
4月前
|
XML 数据采集 机器学习/深度学习
使用 XPath 定位 HTML 中的 img 标签
使用 XPath 定位 HTML 中的 img 标签
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
266 0
|
6月前
|
移动开发 定位技术 API
编程笔记 html5&css&js 035 HTML 地理定位
编程笔记 html5&css&js 035 HTML 地理定位
|
6月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
69 0