Web前端开发笔记——第三章 CSS语言 第六节 CSS定位

Posted 晚风(●•σ )

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第三章 CSS语言 第六节 CSS定位相关的知识，希望对你有一定的参考价值。

目录

一、定义

通过定位，即文档流、浮动定位、层定位三种定位机制来决定盒子模型的位置，在一个盒子中可同时拥有很多种定位机制。

二、文档流定位

文档流定位即为默认的定位方式，该机制的盒子模型的元素都是从上至下，从左至右依次排列的。
其元素类型分为三种：block类型、inline类型、inline-block类型，且这几种元素可以通过display属性显示，且display属性为none时该元素不会显示。

（一）block类型元素

块状类型元素（block）的特点是占页面一行的空间，表示display:block，使其具有block类型元素的特点，块级元素可以设置 width、height 属性，常用的块状类型元素有：<h>标题标签、<p>段落标签、<div>区域标签、<ol>有序列表标签、<ul>无序列表标签、<table>表格标签、<from>表单标签等等。
例如，下列代码：
css代码：

p {
	width: 70px;
	height: 70px;
	display: block;
	background-color: aquamarine;
}

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<p>百度搜索</p>
		<p>搜狗搜索</p>
		<p>CSDN</p>
	</body>

</html>

运行结果如下：

（二）inline类型元素

inline类型元素之间默认带有间距，且和其他元素都在一行上，表示display:inline，inline类型元素的width（宽度）和height（高度）不能设置，其宽度就是文字或图片的宽度，常用的inline类型元素有：<a>超链接标签、<span>行内组合标签等等。
例如，下列代码：
css代码：

p {
	display: inline;
	background-color: aquamarine;
}

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<p>百度搜索</p>
		<p>搜狗搜索</p>
		<p>CSDN</p>
	</body>

</html>

运行结果如下：

（三）inline-block类型元素

与inline类型元素一样，该类型元素不单独占据一行，和其他元素都在一行上，但其盒子模型的 width、height 属性都可设置，表示display:inline-block，常用的inline-block类型有：<img>图像标签等等。
例如，下列代码：
css代码：

p {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <p>百度搜索</p>
    <p>搜狗搜索</p>
    <p>CSDN</p>
</body>

</html>

运行结果如下：

三、浮动定位

浮动定位是通过float属性来设置的，即浮动元素向左向右移动，它可以是左浮动（float:left）、右浮动（float:right）、不浮动（float:none），不浮动即为默认值。浮动定位可用来图文混排、网页分栏等等。

（一）左浮动和右浮动

左浮动和右浮动定位可以用在图片与文字混合排版时，将其左、右浮动，显得更直观。
例如，下列代码：
css代码：

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
}

img {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: right;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <div id="container1"></div>
    <div id="container2"></div>
    <img src="image/1-2.png">
    <img src="image/1-0.png">
    Google uses cookies to deliver its services, to personalise ads and to analyse traffic. You can adjust your privacy
    controls at any time in your Google Settings, or learn more.
    With Google apps like Gmail, Google Pay and Google Assistant, Chrome can help you stay productive and get more out
    of your browser.
    Chrome works hard to protect your data and privacy online. With easy-to-use privacy controls, Chrome lets you
    customise your settings and browsing experience to how you see fit.
</body>

</html>

运行结果如下：

（二）清除浮动

清除浮动clear属性有三种，分为clear:both（清除两边的浮动）、clear:left（清除左边的浮动）、clear:right（清除右边的浮动）、clear:none，这里none值即为默认值，要注意清除浮动的清除并不是字面意思上的清除该浮动元素。
例如，下列代码，设置清除左浮动“clear:left”：
css代码：

#image1 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
}

#image2 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    clear: left;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <div id="container1"></div>
    <div id="container2"></div>
    <img id="image1" src="image/1-2.png">
    <img id="image2" src="image/1-0.png">
    Google uses cookies to deliver its services, to personalise ads and to analyse traffic. You can adjust your privacy
    controls at any time in your Google Settings, or learn more.
    With Google apps like Gmail, Google Pay and Google Assistant, Chrome can help you stay productive and get more out
    of your browser.
    Chrome works hard to protect your data and privacy online. With easy-to-use privacy controls, Chrome lets you
    customise your settings and browsing experience to how you see fit.
</body>

</html>

运行结果如下：

四、层定位

层定位是通过postion属性来设置的，指定元素的定位，或使其叠加在其它元素上，position 属性有五个值：static、relative、fixed、absolute、sticky。

（一）static定位

静态定位，即为默认值，没有定位，即正常的文档流对象；
例如，下列代码：
css代码：

p {
    width: 150px;
    height: 70px;
    position: static;
    border: 2px dotted black;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <p>这是第一个定位</p>
    <p>这是第二个定位</p>
    <p>这是第三个定位</p>
</body>

</html>

运行结果如下：

（二）fixed定位

固定定位，即该fixed定位是相对浏览器的窗口是固定的，当滑动上下页面时不会随着页面而滑动，可以通过top、bottom、left、right四个属性来设置距浏览器窗口的距离。
例如，下列代码中，先设置区域边距margin: 0和padding: 0，设置box区域层定位为固定定位，且其相对与浏览器窗口距顶部距离为20px、左侧距离为20px：
css代码：

* {
    margin: 0;
    padding: 0;

}

body {
    width: 350px;
    height: 300px;
    border: 1px solid black;
    background-color: cornsilk;
}

#box {
    width: 120px;
    height: 70px;
    position: fixed;
    border: 2px dotted black;
    top: 20px;
    left: 20px;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <div id="box">
        <p>这是第一个定位</p>
        <p>这是第二个定位</p>
        <p>这是第三个定位</p>
    </div>
</body>

</html>

运行结果如下：

这里的相对与浏览器窗口距顶部距离top：20px、左侧距离left：20px可以通过坐标系来理解更加清楚，如下：

（三）relative定位

相对定位，relative属性是相对其直接父元素进行定位的，即其元素脱离正常的文档流，但其原位置在文档流依然保留，其它元素不会占据其原来位置。
例如，下列代码，相对父元素就是static默认的静态层定位，其相对两个位置top和left：
css代码：

* {
    margin: 0;
    padding: 0;

}

body {
    width: 700px;
    height: 500px;
    border: 1px solid black;
    background-color: cornsilk;
}

#box1 {
    width: 50px;
    height: 60px;
    background-color: red;
    position: relative;
    border: 2px dotted black;
    top: 20px;
    left: 20px;
}

#box2 {
    width: 60px;
    height: 45px;
    background-color: blue;
    position: static;
    border: 2px dotted black;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <div id="box1">
        <p>1</p>
    </div>
    <div id="box2">
        <p>2</p>
    </div>
</body>

</html>

运行结果如下：

（四）absolute定位

绝对定位，absolute属性，它相对其于静态定位以外的第一个父元素进行定位，若没有则相对于body定位，它与相对定位有区别，其元素也是脱离正常的文档流，但其原位置在文档流中不再存在，其它元素会占据其原来位置。
例如，下列代码，absolute定位相对body定位，其相对两个位置top和left：
css代码：

* {
    margin: 0;
    padding: 0;

}

body {
    width: 700px;
    height: 500px;
    border: 1px solid black;
    background-color: cornsilk;
}

#box1 {
    width: 50px;
    height: 60px;
    background-color: red;
    position: absolute;
    border: 2px dotted black;
    top: 20px;
    left: 20px;
}

#box2 {
    width: 60px;
    height: 45px;
    background-color: blue;
    position: static;
    border: 2px dotted black;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <div id="box1">
        <p>1</p>
    </div>
    <div id="box2">
        <p>2</p>
    </div>
</body>

</html>

运行结果如下，可以将其与相对定位比较：

且相对定位元素通常被用来作为绝对定位元素的容器块：
例如，下列代码：
css代码：

* {
    margin: 0;
    padding: 0;

}

#box1 {
    width: 200px;
    height: 200px;
    position: relative;
    border: 2px solid pink;
}

#box2 {
    width: 80px;
    height: 45px;
    position: absolute;
    bottom: 0;
}

img {
    height: 200px;
    width: 150px;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <div id="box1Web前端开发笔记——第三章 CSS语言 第四节 CSS列表表格样式


 Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器


 Web前端开发笔记——第三章 CSS语言 第七节 圆角边框阴影


 Web前端开发笔记——第三章 CSS语言 第五节 盒子模型


 Web前端开发笔记——第三章 CSS语言 第三节 文本字体背景超链接样式属性


 Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表