CSS布局与定位

最新推荐文章于 2024-05-18 11:09:56 发布

小兔子乖乖-L

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量135

点赞数

分类专栏： web前端文章标签：前端 CSS 布局

本文链接：https://blog.csdn.net/weixin_44705725/article/details/93618490

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、盒子模型

1.页面内的所有元素都可以看作是一个盒子，占据着一定的页面空间
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		#box{
			width:100px;
	height: 100px;
	border: 1px solid;
	padding:20px;
	margin: 10px;

		}
	</style>
    
      </head>
      <body>
      <div id="box">
      	aaaaaaa
      	aaaaaaa
      </div>
      </body>
      </html>

在这里插入图片描述
2.overflow属性

3.border属性
水平分割线的应用
.line{
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}

4.margin
其取值为top，right，bottom，left
一个例子

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		div{
width:100px;
height:100px;
margin:15px 10px 20px 30px;
border:1px solid red;
}
	</style>
      </head
      <body>
      <div id="box1"> box1 </div>
       <div id="box2"> box2 </div>
      </body>
      </html>

在这里插入图片描述

Margin的水平居中
在这里插入图片描述
5.内边距padding
其取值为top，right，bottom，left

二、CSS定位机制

1.文档流flow

（1）元素分类

a.block
加粗样式
b,inline
在这里插入图片描述
c.inline-block

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mysister</title>
	<style >
		*{
			padding:0;
			margin: 0;
		}
		#nav{
			width:300px;
			margin:100px auto;
			font-size:0;
		}
		a{
			display: inline-block;
			width:80px;
			height:30px;
			font-size:14px;
			text-align:center;
			line-height: 30px;
			text-decoration: none;
			border-bottom: 1px solid #ccc;
		}
		a:hover{
			color:white;
			background-color: #ccc;
			 border:1px solid;
			 border-left-color: orange;
			 border-top-color: orange;
			 border-right-color: orange
		}
	</style>
</head>
<body>
	<div id="nav">
		<a href="#">链接1</a>
		<a href="#">链接2</a>
		<a href="#">链接3</a>

	</div>
</body>
</html>

在这里插入图片描述

2.浮动float

float属性：
left-左浮动；
right-右浮动；
none-不浮动；
clear属性
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mysister</title>
	<style >
		*{
			padding:0;
			margin: 0;
		}
		body{
			font-size: 14px;

		}
		#container{
			margin:0 auto;
			width:1000px;
			height:500px;
			/*background-color: #6cf;*/
		}
		
		#header{
			height: 100px;
			background-color: #6cf;
			margin-bottom: :5px;
		}
		#main{
			height: 500px;
			width: 1000px;
			
			margin-bottom: 5px;
		}
		#aside{
			float:left;
			width:300px;
			height:500px;
			background-color: #6cf;
		}
		#content: {
			float:right;
			width:695px;
			height:500px;
			background-color: #cff;
		}
		#footer{
			height: 60px;
			background-color: #6cf;
		}
		
	</style>
</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>

在这里插入图片描述为什么我的会这样，不懂

3.层 layer

position属性
在这里插入图片描述

a.fixed-固定取值

#fix-box{
width:200px;
height:200px;
border:1px solid red;
position:fixed;
left:100px;
top:50px;
}

b.relative-相对定位
relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式
c.absolute-绝对定位

在这里插入图片描述

小兔子乖乖-L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局与定位

一、盒子模型1.页面内的所有元素都可以看作是一个盒子，占据着一定的页面空间<!DOCTYPE html><html><head> <style type="text/css"> #box{ width:100px; height: 100px; border: 1px solid; padding:20px; margi...
复制链接

扫一扫