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地理定位
58 0
|
6月前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
11天前
HTML 统一资源定位器(Uniform Resource Locators)3
URL字符编码是指将URL中非ASCII字符转换为有效的ASCII格式的过程。URL只能使用ASCII字符集,因此需要对超出该集合的字符进行编码。URL编码使用“%”加上两位十六进制数来表示非ASCII字符,空格通常被编码为“+”。例如,€编码为%80,£编码为%A3。更多信息可参见URL编码参考手册。
|
11天前
|
安全 数据安全/隐私保护
HTML 统一资源定位器(Uniform Resource Locators)2
常见的URL Scheme包括:http(超文本传输协议,用于普通网页,不加密)、https(安全超文本传输协议,用于安全网页,加密信息交换)、ftp(文件传输协议,用于文件的上传和下载)、file(用于访问本地计算机上的文件)。
|
11天前
HTML 统一资源定位器(Uniform Resource Locators)1
统一资源定位器(URL)是用于标识互联网上资源位置的标准格式。URL通常由方案、主机、域名、端口、路径和文件名组成,如 `http://www.runoob.com/html/html-tutorial.html`。大多数用户通过域名访问网站,因为域名比IP地址更容易记忆。URL在Web浏览器中用于请求页面,通过 `&lt;a&gt;` 标签实现链接跳转。
|
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 标签