HTML定位和锚点

鲨鱼辣椒️面

已于 2022-02-16 18:57:01 修改

阅读量680

点赞数 1

文章标签： html css3 css

于 2022-02-16 18:37:17 首次发布

本文链接：https://blog.csdn.net/qq_46451513/article/details/122969657

版权

本文详细讲解了如何使用vertical-align调整行内元素垂直位置，包括图片、表单和表格的对齐，并介绍了position属性在定位元素中的应用，如固定定位和相对绝对定位。同时讨论了图片选择和锚点链接的最佳实践。

摘要由CSDN通过智能技术生成

只有行内块元素可以使用该属性

vertical-aligin：top |middle |bottom |baseline基线；

应用：

1.解决图片3px问题【给图片】

2.让表单中的输入框和按钮垂直对齐

3.给表格中的内容设置垂直对齐。

概念：将一个元素放在指定的位置上。特指position. 【将a强行放在b身上】

position:定位方式;

	left: *px;或者right: *px;

	top:  *Px;或者bottom: *px;

1.固定方式

1.static静态定位.【默认值】

2.fixed固定定位：基于浏览器当前屏进行定位

盒子完全居中于位置大小的盒子

  1. 	position:fiexd
       
       	top：50%
       
       	left：50%
       
       	margin-top：负盒子高度的一半
       
       	margin-left：负盒子宽度的一半

2. 	position:fixed;  

	top
    
    left:0;

    right: 0;

	bottom:0;
	
	margin: auto;

relative相对定位：基于元素本身的位置进行定位。不会脱离文档流 absolute绝对定位：基于最近的被设置非静态定位的上级元素进行定位，如果没有，就基于浏览器第一屏进行定位
子绝父相

4. fiexd和absoulte都会脱离文档流！

5.img图片和背景图片选择：数据从数据库来，经常更换，使用img【产品图 ，广告图】
是页面结构的一部分，使用img  例如 [logo]
精灵图用背景图。

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

关注