CSS布局与定位

最新推荐文章于 2024-08-25 13:06:40 发布

weixin_38902950

最新推荐文章于 2024-08-25 13:06:40 发布

阅读量1.1k

点赞数

分类专栏： Web前端开发文章标签： CSS布局与定位

本文链接：https://blog.csdn.net/weixin_38902950/article/details/84674199

版权

Web前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、概述

1、盒子模型：元素什么样
    页面元素的大小
    边框
    与其他元素的距离
2、定位机制：元素放哪儿
    文档流
    浮动定位
    层定位

2、盒子模型、overflow属性、border属性

1、盒子模型
页面上的区域、图片、导航、列表、段落，都可以是盒子
盒子模型的组成：height，width，border，padding，margin content
除了content都是盒子的属性

#box{
    width：100px;
    height:100px;
    border: 1px solid;
    padding:20px;
    margin:10px;
}

盒子的border,padding,margin的四周可以单独设置

2、overflow属性：当内容溢出盒子框时，overflow属性取值
hidden:超出部分不可见
scroll：显示滚动条
auto：如果有超出部分，再显示滚动条，没有就不显示

3、border属性
border：width style color  按这个顺序直接列出border的所有属性
border-width:px,thin,medium,thick
border-style:dashed,dotted,solid,double
border-color:

可以分别设置四个方向上的border属性：top,right,bottom,left
div{
    border-bottom:1px,solid,red;
}

水平分割线可以通过设置高度为1的border来实现：
.line{
    width:500px;
    height:1px;
    border-top:1px solid #e5e5e5
}

box-sizing:border-box;

3、padding和margin属性

1、对浏览器的默认padding和margin属性清零
*{
    margin：0;
    padding：0;
}

2、padding和margin可以取值px，%
padding: 1px 2px 3px 4px  按照上右下左的顺序
padding：1px 2px          上下是1px，左右是2px

3、margin的合并：垂直方向上合并，水平方向不合并
合并的时候两个盒子取大的那个margin

4、将盒子中的content水平居中
图片，文字水平居中 text-align:center;
div水平居中  margin：0 auto;     浏览器自动计算
如果盒子position：absolute 则失效

5,、消除盒子间空隙的方法：
font-size:0;

4、CSS定位机制——文档流定位

1、元素的分类
    1)block:独占一行，元素的height,width,margin,padding都可以设置
        常见的block元素：<div> <p> <h1>~<h6> <ol> <ul> <table> <form>
        display:block;
    2)inline:
        不单独占一行
        width，height不可设置
        width就是它包含的文字或者图片的宽度，不可改变
        常见的inline元素：<span> <a>
        display:inline;
        inline元素之间有一个间距问题
    3）inline-block:同时具有inline元素，block元素的特点
        不单独占一行
        元素的height,width,padding,margin都可以设置
        常见元素：<img>
        display:inline-block;

2、元素的互相转换
display:none;  元素不会被显示
display:block; 
display:inline;
display:inline-block;

总结：文档流就是，从上到下，从左到右，输出文档内容
block：从上到下，独占一行
inline：从左到右，占据一行

例子：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin:0;
	}	
	#nav{
		margin: 0 auto;
		width: 300px;
		font-size: 0;
	}
	a{  /*否则无法设置高度宽度等*/					
		display: inline-block;
		/*盒子的样式*/
		width: 80px;
		height: 30px;
		border-bottom: 1px solid #ccc;
		/*超链接文本*/
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		text-decoration: none;
	}
	a:hover{
		color: white;
		background-color: #ccc;
		border: 1px solid;
		border-left-color: orange;
		border-top-color: orange;
		border-right-color: orange;
	}
	/*父元素定义font-size:0 去掉行内块元素水平方向空白；子元素定义vertical-align 属性去掉行内块元素垂直方向空白*/
	</style>
</head>
<body>
<div id="nav">
	<a href="#">链接1</a>
	<a href="#">链接2</a>
	<a href="#">链接3</a>
</div>
</body>
</html>

5、CSS定位机制——浮动定位

1、float属性：left,right，none
none不浮动
实现两个盒子的并列显示
2、clear属性：left，right，both
用于将div安置到期望的位置，不受浮动元素的影响

example:实现整个页面的三行两列

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3行2列</title>
	*{
	margin: 0;
	padding: 0;
    }
    body { 
	font-family:"微软雅黑"; 
	font-size:14px; 
    }

    #container {
	margin:0 auto; 
	width:900px; 
    }
    #header { 
	height:100px;
	background:#6cf; 
	margin-bottom:5px;
    }
    #main{ 
	height:500px;
	/*background:#cff; */
   	margin-bottom:5px;
    }
    #aside { 
	float:left; 
	width:200px; 
	height:500px; 
	background:#6cf;
    }
    #content{ 
	float:right; 
	width:695px; 
	height:500px; 
	background:#cff;
    }
    #footer { 
	height:60px; 
	background:#6cf;
    }
</head>
<body>
<div id="container">
  <div id="header">
  </div>

  <div id="main"> 
      <div id="aside">
	  </div>

	  <div id="content"> 
	  </div>
  </div>

  <div id="footer">
  </div>
</div>

</body>
</html>

效果：

6、CSS定位机制——层定位

1、position属性：对每个图层进行精准定位操作
position：static;     没有定位，元素出现在正常的流中,所有定位属性无效
position：fixed;      固定定位，相对于浏览器窗口的定位，不会随着滚动条滚动，广告
position：relative;   相对定位，相对于其直接父元素定位，其文档流中的原位置仍存在
position: absilute;   绝对定位，相对于定义为absolute或者relative的第一个父元素定位，
如果没有，则相对于body定位，文档流原位置不存在

2、通过这些属性定位：
top,bottom,left,right,z-index
用于定义子盒子的最外围相对父盒子content的四个边的距离，z-index值越大，显示在最上层。

一般做法就是，父元素为realative，子元素为absolute,这样子元素可以随着父元素移动，而相对位置不变

example：实现以下效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.parent{
			width: 800px;
			height: 600px;
			background-color: rgb(0,0,0);
			margin: 0 auto;
			z-index: -999;
			position: relative;
		}
		#one{
			width: 250px;
			height: 300px;
			background-color: rgb(255,0,0);
			position: absolute;
			
			left: 25px;
			top: 30px;
			z-index: 1;
		}
		#two{
			width: 250px;
			height: 300px;
			background-color: rgb(0,0,255);
			position: absolute;
		
			left: 50px;
			top: 60px;
			margin: 25px;
			z-index: 2;

		}
	</style>

</head>
<body>
	<div class="parent">
		<div id="one"></div>
		<div id= "two">	</div>
	</div>
</body>
</html>