css概述
程序员文章站
2022-11-05 08:17:23
css概述（续2）1.文档流文档流指的是文档中的标签在排列时所占用的位置。将长提自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。2.浮动浮动是使标签脱离原来的文档流，在父标签中浮动起来。
css概述（续2）
1.文档流
文档流指的是文档中的标签在排列时所占用的位置。将长提自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。
在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
2.浮动
浮动是使标签脱离原来的文档流，在父标签中浮动起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div{
margin: 0px auto;
width: 504px;
}
/* 浮动是使标签脱离原来的文档流，在父标签中浮动起来。
浮动使用float属性。
该属性有三个值：none 不浮动
left 向左浮动
right 向右浮动
块级标签和行级标签都可以浮动。，行级标签浮动以后将会自动变为块级标签
当一个块级标签浮动以后，宽度会默认是内容的宽度
当一个标签浮动以后，其下方的标签会上移。标签的内容将会环绕在标签的周围。
*/
.box_1{
float: left;
background-color: fuchsia;
color: aliceblue;
padding: 10px 20px;
margin: 10px auto;
}
#box2{
width: 504px;
height: 400px;
background-color: aqua;
}
.box2_1{
background-color: gold;
}
.box2_2{
background-color: brown;
}
.box2_3{
background-color: darkorange;
}
.box2_1,.box2_2,.box2_3{
height: 300px;
width: 168px;
float: left;
}
</style>
</head>
<body >
<div id="div">
<div id="box">
<div class="box_1">首页</div>
<div class="box_1">热门</div>
<div class="box_1">关注</div>
<div class="box_1">同城</div>
<div class="box_1">榜单</div>
<div class="box_1">明星</div>
<div class="box_1">国际</div>
<!--浮动会使标签完全脱离文档流，不在文档中占用位置，也就是浮动标签不会撑开父标签
clear属性可以用于清除标签周围的浮动对标签的影响，使其他标签的位置不发生变化
它的值对应浮动属性的值：left 忽略左侧浮动
right 忽略右侧浮动
both 忽略全部浮动
我们一般在浮动标签的后面加一个空白div标签来清除浮动标签的影响
-->
<div style="clear: left;"></div>
</div>
<div id="box2">
<div class="box2_1">左</div>
<div class="box2_2">中</div>
<div class="box2_3">右</div>
<div style="clear: left;"></div>
<div class="box2_4">下</div>
</div>
</div>
</body>
</html>
上述代码实现结果如下：（网页中通过浮动来布局，如下图所示，我们可以在左、中、右、下来布置我们想要的内容。）
3.css定位
定位就是允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
它分为三种：相对定位、绝对定位、固定定位
（1）相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
background-color: #ffaaff;
width: 100px;
height: 100px;
/* 相对定位就是相对于它的起点进行移动，移动后原来的位置还被占用。
通过 position:relative; 开启相对定位
left right top bottom 四个属性来设置标签的偏移量。
开启了相对定位以后，不设置偏移量，标签不会发生变化；
相对定位的标签不会脱离文档流，也不会改变标签的性质；
相对定位会使标签提升一个层次
*/
position: relative;
left: 100px;
top: 100px;
}
#box2{
background-color: #0055ff;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box1">
开启相对定位的区域
</div>
<div id="box2">
对照区域
</div>
</body>
</html>
上述代码实现结果如下：
（2）绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
background-color: #00FFFF;
width: 100px;
height: 100px;
/* 绝对定位是不占空间的
运用了绝对定位的标签会脱离原来的文档流，浮动起来
通过position：absolute;来开启绝对定位
left right top bottom 来设置偏移量。
绝对定位是相对于离它最近的 开启了定位的祖先标签进行定位；
一般情况下，开启子标签的绝对定位会同时开启父标签的相对定位。
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位。
绝对标签会使标签提升一个层次，会改变标签的性质，行级标签会变成块级标签。*/
position: absolute;
left: 100px;
top: 100px;
}
#div1{
background-color: #00aaff;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div id="div1">
对照区域
<div id="box1">
移动区域
</div>
</div>
</body>
</html>
上述代码实现结果如下：
（3）固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!-- 固定定位是把使用了固定定位的标签 固定在某个位置，即便滑动鼠标，该标签位置不变
通过position: fixed;来开启固定定位
left right top bottom 来设置偏移量。
它是相对于浏览器窗口进行定位的。
-->
<div style="height: 21px; position: fixed;top: 0px;left: 20px;">
<a href="#p1">产品1</a>
<a href="#p2">产品2</a>
<a href="#p3">产品3</a>
<a href="#p4">产品4</a>
<a href="#p5">产品5</a></div>
<hr />
<h3>产品1 <a name="p1"></a> </h3>
<img src="img/1.png" />
<h3>产品2 <a name="p2"></a></h3>
<img src="img/2.png" />
<h3>产品3 <a name="p3"></a></h3>
<img src="img/3.png" />
<h3>产品4 <a name="p4"></a></h3>
<img src="img/4.png" />
<h3>产品5 <a name="p5"></a></h3>
<img src="img/5.png" />
<hr />
<a href="#top" style="position: fixed;right: 20px;bottom: 20px;">返回顶部</a>
</body>
</html>
上述代码实现结果如下：（上述代码对 下图中的顶部蓝色字体以及右下角的 “返回顶部”使用了固定定位，即使滚动鼠标，这两个位置的内容也不会移动。）
本文地址：https://blog.csdn.net/weixin_45866849/article/details/109363682
下一篇： 吃了大蒜吃蜂蜜会对身体造成一定的危害吗