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

梦里梦外; 2023-03-01 06:29 9阅读 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>

![20200727162358945.png][]

加了浮动;

<!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>

![20200727162444377.png][]

**总结：**

1.  **定位是一个层级一个层级提升上去的**
2.  **浮动是半个层级提升上去的**

# 使用定位实现三列布局：  #

**要求：**

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

<!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>

![20200727164922436.png][]

总结：

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

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

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

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

[20200727162358945.png]: /images/20230209/b1a0e6b4c34f443eaa65fecc74adacac.png
[20200727162444377.png]: /images/20230209/e954e695ac8b483cae676aadabb6564b.png
[20200727164922436.png]: /images/20230209/4dd6f285c9464fd8a7a4df48b3b4e64a.png