css2.1--笔记1（定位、浮动、三列布局）

最新推荐文章于 2021-08-28 22:03:43 发布

ABU_MOlI_ITUI

最新推荐文章于 2021-08-28 22:03:43 发布

阅读量5.4k

点赞数

分类专栏： css 文章标签： css-2.1

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107523778

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

定位：

浮动元素的包含块为离他最近的块级祖先元素。

“根元素”的包含块也被称作初始包含块，在HTML里根元素就是html元素，当然大多数初始包含块是一个视窗大小的矩形，但是初始包含块不是视窗大小。
对于非根元素，如果其position值是relative或static，包含块则由最近的块级包含，也就是用div包含。
对于非根元素，如果其position值是absolute，包含块设置为position值不是static的祖先元素。
----如果祖先元素是块级元素，包含块则设置成该元素的内边距边界，也就是从padding的左上角位置算起。
-----如果没有祖先元素，元素的包含块设置成初始化包含块。

总结：

1.定位元素参照于包含块来定位的（重点为确定包含块是谁）

2.什么是初始包含块（初始包含块是视窗大小的块级元素，但不等于视窗）

3.left、top、right、bottom、width、height、margin、padding、boder-width默认值是多少。

4.百分比参照于谁

浮动：

浮动可以提升层级，可以提升半级。

在布局中，重点有三个盒模型、浮动、定位。

但是这三个并不是用来布局的。

定位----用来提升层级；

盒模型----用来渲染

浮动----最开始让文字发生改变，当有浮动时，一定考虑一个元素分俩层。比如说：如果有一个元素，当他浮动时，只能浮动，一层，还剩一层不能浮动。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.test1{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			.test2{
				width: 200px;
				height: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="test1">
			<p>hello world</p>
		</div>
		<div class="test2">
			<p>hello world111111</p>
		</div>
	</body>
</html>

加了浮动;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.test1{
				float: left;
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			.test2{
				width: 200px;
				height: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="test1">
			<p>hello world</p>
		</div>
		<div class="test2">
			<p>hello world111111</p>
		</div>
	</body>
</html>

总结：

定位是一个层级一个层级提升上去的
浮动是半个层级提升上去的

使用定位实现三列布局：

要求：

俩边固定，中间自适应
当中列要完整显示
当中列要优先加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位的三列布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				height: 100px;
			}
			body{
				/*2*left+right*/
				min-width: 300px;
			}
			#left,#right{
				width: 100px;
				background-color: pink;
			}
			#middle{
				background-color: palevioletred;
				padding: 0 200px;
			}
			#left{
				position: absolute;
				left: 0;
				top: 0;
			}
			#right{
				position: absolute;
				right: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id='left'>left</div>
		<div id='middle'>middle</div>
		<div id='right'>right</div>
	</body>
</html>

总结：

三列布局如果使用定位是否合适？

答案是不合适，如果想要使用定位，必须要有容器，并且容器必须使用绝对定位。但是对编写页面带来问题，所以不建议使用。

三列布局如果使用浮动是否合适?

答案是不合适，浮动的使用，组列没有办法实行加载，也有点不合适。

ABU_MOlI_ITUI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css2.1--笔记1（定位、浮动、三列布局）

定位：浮动元素的包含块为离他最近的块级祖先元素。“根元素”的包含块也被称作初始包含块，在HTML里根元素就是html元素，当然大多数初始包含块是一个视窗大小的矩形，但是初始包含块不是视窗大小。对于非根元素，如果其position值是relative或static，包含块则由最近的块级包含，也就是用div包含。对于非根元素，如果其position值是absolute，包含块设置为position值不是static的祖先元素。 ----如果祖先元素是块级元素，包含块则设置成该元素的内边距边界，
复制链接

扫一扫