CSS —— html布局选择与注意事项

最新推荐文章于 2024-07-28 08:03:31 发布

Liekkas_BX

最新推荐文章于 2024-07-28 08:03:31 发布

阅读量2.4k

点赞数 1

分类专栏： CSS 文章标签： html 元素类型浮动

本文链接：https://blog.csdn.net/qq_19865749/article/details/52028836

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、定位

1、相对定位：relative

按不同元素类型默认布局出现在应该出现的位置，可设置相对移动位置。为默认值。

注意事项：外边距合并情况，仅当父元素与子元素都是默认定位(relative)，或指定为relative，且父元素合并边没有border时才会发生。

2、绝对定位：absolute

(1)、所有父类元素都没指定position时，相对于body绝对定位。

(2)、父类中有指定position的元素时，相对于从下往上遍历的第一个指定了position的父类元素绝对定位。

<!DOCTYPE html>
<html>
<head>
	<title>探究对齐方式</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
			border:0;
		}
		.grandfather{
			position: relative;
			left: 200px;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.father{
			width: 100px;
			height: 100px;
			background-color: #999;
			border:10px solid #666;
		}
		.child{
			position: absolute;
			top: 10px;
			left: 50px;
			width: 50px;
			height: 50px;
			font-size: 7px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="grandfather">
		<div class="father">
			<div class="child">直接父元素father没有指定position，我将相对于grandfather绝对定位</div>
			father
		</div>
		grandfather
	</div>
</body>
</html>

说明：无论父类指定的position是relative还是absolute，子元素指定定位时都是相对于父类元素。（实践得知）

3、浮动：float

注意事项：(1)、对于内部全为浮动的元素，记得清除浮动。

(2)、元素内部的子元素尽量不要全部浮动，最好保留最边上的一个设置margin，这样便不会出现因浏览器窗口缩放导致的浮动元素被挤到下一行，使页面错乱的情况。（实践感悟！！）

二、提点

1、relative与absolute组合使用。

父元素与直接子元素都设置position，此时因子元素相对该直接父元素相对或绝对定位，当子元素的边或更多部分与父元素重合时，若鼠标从此重合区域直接进入子元素部分，则并不会触发该父元素的mouseleave或mouseout事件，而是在光标从子元素离开到达其它地方时才触发。利用此性质，可设计菜单项弹窗等，减少了js部分的代码，同时也使菜单项与弹窗的逻辑关系一目了然。

2、relative与float组合使用。

relative与float并不冲突，前者解决自身定位问题，后者解决在同级元素中排列问题。但一般此时relative并不作为自身的定位，而是与子元素的absolute或relative协同作用实现其子元素相对于自己定位。

3、inline元素float

内联元素浮动后直接变为浮动的block元素，可设置宽高等。此时要实现原来的文本垂直居中，再设置line-height即可。

重点：

内联元素float与块元素float的区别：内联元素float后，增加边框为从边界处往内增加边框，而块元素为往外增加边框。即内联元素float后，再设置size px的边框，其所占区域并不会增加，所以也不会影响布局。测试：

<!DOCTYPE html>
<html>
<head>
	<title>测试内联元素浮动后边框问题</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
			border:0;
		}
		button,p{
			float: left;
			width: 50px;
			height: 100px;
			background-color: pink;
		}
		button+button{
			float: left;
			width: 50px;
			height: 100px;
			background-color: gray;
			border:10px solid red;
		}
		p+p{
			border:10px solid blue;
		}
	</style>
</head>
<body>
<button>button1</button><button>button2</button>
<p>段落1</p>
<p>段落2</p>
</body>
</html>

4、对齐方式

right：0px;指该元素的最外围(margin或border或padding或content，取决于有无)相对于对齐元素的content的右边的距离，故当该元素与相对元素都有右边框时，若实现边框也对齐(重叠)，应该指定right为负的右边框厚度值。对top、left同理。