web前端学习笔记06-CSS浮动、定位、布局及margin重合问题

本文链接：https://blog.youkuaiyun.com/weixin_42727838/article/details/106836568

一、浮动

1.1 文档流

文档流是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

1.2 浮动的特性

浮动元素有左浮动（float: left;）和右浮动（float: right;）两种
浮动的元素会向左或向右浮动，碰到父元素边界或前面的浮动元素（紧跟其后）或前面未浮动的元素时会停止浮动
相邻浮动的块元素可以并在一行，超出父级宽度就换行，若换行后单个元素宽度仍超过父级元素，则超过部分不显示
浮动让行内元素或块元素自动转化为行内块元素
浮动元素后面不浮动的元素会占据浮动元素的位置，不浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果
父元素没有设置固定高度且子元素都浮动时，父元素的高度无法被撑开，需要清除浮动，即给父元素添加overflow: hidden;
浮动元素之间没有垂直margin的合并

1.3 清除浮动的方法

父级元素添加overflow: hidden;
在最后一个子元素后添加一个空div，样式属性设为clear:both;
使用成熟的清除浮动样式类：

.wrap1:after{
	content: '';
	/*以表格方式渲染内容*/
	display: table;
	clear: both;
}

二、定位

2.1 position定位

使用CSS的position属性来设置元素的定位类型，position的设置如下：

relative生成相对定位元素，元素不脱离文档流，元素所占据的文档流得位置不变，元素以元素本身的位置为参考点进行偏移
absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，即浮在文档流上方，以有设置定位属性的父级元素为参考点进行偏移，若父级元素未设置定位属性，继续向上一级寻找直到body
fixed生成固定(绑定)定位元素，元素脱离文档流，不占据文档流的位置，即浮在文档流上方，相对于浏览器窗口进行定位，主要用于固定在头部的导航栏、返回顶部按钮、网页的侧边栏等
static默认值，没有定位，元素出现在正常的文档流中，相对于取消定位属性或者不设置定位属性

属性值	释义	是否脱离文档流	参考点
relative	相对定位	不脱离	元素原本的位置
absolute	绝对定位	脱离	已定位的父级元素的位置
fixed	固定定位	脱离	浏览器窗口的位置
static	默认值，不定位	不脱离	—

2.2 定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

2.3 定位的层级

定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级

三、布局

3.1 静态布局：元素不变的布局

【布局特点】窗口缩小后内容被遮挡时，拖动滚动条显示布局
【设计方法】
PC： 居中布局，所有样式使用绝对宽度，高度
移动设备： 另外建立移动网站，以m. 域名为域名

3.2 响应式布局：创建多个布局，分别对应一个屏幕分辨率范围

响应式布局就是使用媒体查询的方式，创建多个元素宽度是相对的的布局，理想的响应式布局是指对PC/移动各种终端进行响应的
【布局特点】分别为不同的屏幕分辨率定义布局，同时在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配

四、margin重合问题

在使用margin值时，元素相邻边设置margin值会重复，以margin值大的为准，即margin值小的不生效，因此都只设置margin-top(left)或margin-bottom(right)

浮动示例代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/c06.css"/>
  <title>CSS浮动和定位</title>
 </head>
 <body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
  <div class="box box4">box4</div>
  
  <div class="wrap">
   <div class="item1">1</div>
   <div class="item2">2</div>
   <!--超出父级元素宽度自动换行-->
   <div class="item3">3</div>
  </div>
  
  <!--清除浮动-->
  <div class="wrap1">
   <div class="r1">r1</div>
   <div class="r2">r2</div>
   <div class="r3">r3</div>
   <div class="r4">r4</div>
   <div class="r5">r5</div>
   <div class="r6">r6</div>
   <div class="r7">r7</div>
   <!--添加空div来清除浮动-->
   <div class="cl"></div>
  </div>
 </body>
</html>

.box{
 width: 100px;
 height: 100px;
}
.box1{
 background: palegoldenrod;
 /*浮动*/
 /*浮动会把元素转换成行内块元素*/
 float: left;
 /*float: right;*/
}
.box2{
 width: 120px;
 background: palegreen;
 float:left
}
.box3{
 height: 120px;
 background: palevioletred;
}
.box4{
 height: 120px;
 background: peru;
}
.wrap{
 width:300px;
 border: 1px solid red;
 /*清除浮动*/
 overflow: hidden;
}
.item1{
 width: 100px;
 height: 100px;
 background: lightcoral;
 float: left;
}
.item2{
 width: 100px;
 height: 100px;
 background: lightblue;
 float: left;
}
.item3{
 width: 400px;
 height: 100px;
 background: greenyellow;
 float: left;
}
.wrap1{
 border: 2px solid black;
 /*清除浮动1*/
 /*overflow: hidden;*/
}
/*清除浮动2*/
/*.wrap1:after{
 content: '';
 以表格方式渲染内容
 display: table;
 clear: both;
}
*/
/*清除浮动3*/
.cl{
 clear: both;
}
.wrap1 div{
 width: 200px;
 height: 200px;
 float: left;
}
.r1{
 background: gold;
}
.r2{
 background: green;
}
.r3{
 background: palevioletred;
}
.r4{
 background: paleturquoise;
 /*从第4个开始另起一行，即清除浮动*/
 /*清除浮动 both左右都清除 left清除左浮动 right清除右浮动*/
 clear: both;
}
.r5{
 background: purple;
}
.r6{
 background: deepskyblue;
}
.r7{
 background: lightcoral;
}

定位、布局及margin重合示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/c07.css"/>
		<title>CSS定位和布局</title>
	</head>
	<body style="height: 5000px;">
		<!-- 定位—————————————————————————————————————————————————— -->
		<div class="box1"></div>
		<div class="wrap">
			<div class="box2"></div>
		</div>
		
		<div class="box3"></div>
		<!-- 固定定位 -->
		<div class="box4">返回顶部</div>
		
		<div class="box5">111</div>
		<div class="box6">222</div>

		<!-- maigin值重合问题 -->
		<div class="mm1"></div>
		<div class="mm1"></div>
		<div class="mm2"></div>
		
		<!-- 静态布局(模仿网易云课堂首页)———————————————————————————— -->
		<!-- 页面头部 -->
		<div class="header">
			<div class="head-top">
				<div class="head-top-content">
					<a href="#" class="head-top-content-ad">3月开工季</a>
					<a href="#" class="head-top-content-zhaunye">微专业</a>
					<a href="#" class="head-top-content-a">办公效率</a>
					<a href="#" class="head-top-content-a">生活方式</a>
					<a href="#" class="head-top-content-a">职场提升</a>
					<a href="#" class="head-top-content-a">产品设计</a>
					<a href="#" class="head-top-content-a">编程开发</a>
					<a href="#" class="head-top-content-a">语言学习</a>
					<a href="#" class="head-top-content-a">亲子教育</a>
				</div>
			</div>
			<div class="head-nav">
				<div class="head-nav-content">
					<div class="head-nav-content-1">创造有效学习</div>
					<div class="head-nav-content-2">中国大学MOOC</div>
					<div class="head-nav-content-3">网易100分</div>
					<div class="head-nav-content-4">极客战记</div>
				</div>
			</div>
		</div>
		<!-- 页面内容 -->
		<div class="content">
			<!-- 内容第一部分 -->
			<div class="content-nav">
				<div class="content-nav-logo"></div>
				<div class="content-nav-menuright"></div>
			</div>
			<!-- 内容第二部分 -->
			<div class="content-banner"></div>
			<!-- 内容第三部分 -->
			<div class="content-class"></div>
			<!-- 内容第四部分 -->
			<div class="content-teacher"></div>
		</div>
		<!-- 页面尾部 -->
		<div class="footer"></div>
		<br />
		
		<!-- 响应式布局（媒体查询）———————————————————————————————————————————————— -->
		<div class="media1">响应式布局内容</div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
.box1{
	width: 210px;
	height: 200px;
	background: red;
	/* 相对定位 : 以元素本身的位置为参考点进行偏移 不脱离文档流*/
	position: relative;
	left:100px;
	top: 100px;
}
.wrap{
	width: 500px;
	height: 500px;
	border: 1px solid black;
	margin: 0 100px;
	/* 父级元素设置定位 */
	position: relative;
}
.box2{
	width: 200px;
	height: 200px;
	background: green;
	/* 绝对定位 : 以有设置定位属性的父级元素为参考点进行偏移，若父级元素未设置定位属性，继续向上一级寻找直到body 脱离文档流*/
	position: absolute;
	left: 50px;
	top: 50px;
	
}
.box3{
	width: 200px;
	height: 200px;
	background: royalblue;
}
.box4{
	width: 80px;
	height: 30px;
	background: yellow;
	/* 绑定(固定)定位 : 以浏览器窗口为参考进行定位*/
	position: fixed;
	bottom: 20px;
	right: 20px;
}

.box5{
	width: 200px;
	height: 200px;
	background: orange;
	/* 层级：后定位的元素在上面 */
	/* 设置层级 */
	z-index: 2;
	position: relative;
	left:50px;
	top: 100px;
}
.box6{
	width: 200px;
	height: 200px;
	background: mediumvioletred;
	
	position: absolute;
	left: 60px;
	top: 1000px;
}
.mm1{
	width: 200px;
	height: 200px;
	background: grey;
	margin-bottom: 20px;
}
.mm2{
	width: 200px;
	height: 200px;
	background: sandybrown;
	margin-top: 10px;
}
.header{
	width: 100%;
	/* height: 20px; */
	background: darkred;
}
.content{
	width: 100%;
	height: 1000px;
	background: lightblue;
}
.footer{
	width: 100%;
	height: 100px;
	background: #808080;
}
.head-top{
	width: 100%;
	height: 40px;
	background: palevioletred;
}
.head-top-content{
	width: 1205px;
	height: 40px;
	margin: 0 auto;
	background-color: orangered;
}
.head-nav{
	width: 100%;
	height: 30px;
	border-bottom: 1px solid darkblue;
	background: dimgray;
}
.head-nav-content{
	width: 1205px;
	height: 30px;
	margin: 0 auto;
	background-color: gray;
}
.head-top a{
	/* display:inline-block; */
	float: left;
	height: 40px;
	line-height: 40px;
}
a{
	text-decoration: none;
	color: white;
}
.head-top-content-ad{
	width: 420px;
	margin-left: 137px;
	text-align: center;
	background: yellowgreen;
}
.head-top-content-zhaunye{
	width: 88px;
	text-align: center;
}
.head-top-content-a{
	width: 70px;
	font-size: 16px;
	/* line-height: 14px; */
	/* margin: 0; */
	/* padding: 0; */
}
.head-nav-content div{
	height: 30px;
	color: white;
	font-size: 12px;
	line-height: 30px;
	text-align: right;
}
.head-nav-content-1{
	width: 116px;
	float: left;
}
.head-nav-content-2{
	/* width: 120px; */
	float: right;
	margin-left: 35px;
}
.head-nav-content-3{
	/* width: 65px; */
	float: right;
	margin-left: 35px;
}
.head-nav-content-4{
	/* width: 100px; */
	float: right;
	margin-left: 35px;
}

/* 媒体查询 创建多个布局，分别对应一个屏幕分辨率范围 */
.media1{
	width: 100%;
	height: 100px;
	background: palevioletred;
}
/* 当浏览器窗口宽度小于等于960px时 */
@media (max-width:960px) {
	.media1{
		background: greenyellow;
	}
}
/* 当浏览器窗口宽度小于等于640px时 */
@media (max-width:640px) {
	.media1{
		background: cadetblue;
	}
}
/* 当浏览器窗口宽度大于等于960px时 */
@media (min-width:960px) {
	.media1{
		background: blanchedalmond;
	}
}