Day5:html和css

标题图

Day5:html和css

如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。

.dashu {
 width: 100px;
 margin: 0 auto;
}

盒子的水平居中为

margin: auto;

而文字的水平居中为:

text-align: center;

text-align: center; // 文字水平居中
margin: auto; // 盒子的水平居中

盒子水平居中:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		text-align: center; /*居中对齐*/
		width: 100px;
		height: 100px;
		background-color: blue;
		 /* margin: 0 auto; 自动  水平居中对齐 */
		 /* margin: auto; 上下左右都是auto*/
	}
	</style>
</head>
<body>
	<div>
		达叔小生
	</div>
</body>
</html>

margin: 0 auto; // 通俗
// margin: auto; 上下不显示

清除内外边距

* {
 padding: 0;
 margin: 0;
}

外边距合并:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: blue;
	}
	.da{
		margin-bottom: 100px;
	}
	.shu{
		background-color: red;
		margin-top: 150px;
	}
	</style>
</head>
<body>
	<div class="da">1</div>
	<div class="shu">2</div>
</body>
</html>

外边距合并以合并的最大值为准.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		width: 500px;
		height: 500px;
                border: 1px solid red;
		background-color: red;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: blue;
		margin-top: 50px;
		margin-left: 50px;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

content宽度和高度

padding不会影响盒子的大小.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		height: 200px;
		background-color: pink;
		width: 300px;
		/* padding-left: 30px; 给定了宽度,所以padding会撑开*/
	}
	.son {
		padding-left: 30px;
		/*没有宽度不会撑开*/
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">dashu</div>
	</div>
</body>
</html>

padding内边距

圆角

border-radius: 50%;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 300px;
		height: 300px;
		background-color: red;
		margin: 100px auto;  
		border-radius: 50%; 
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	body {
		background-color: #ccc;
	}
	.radius a {
	   width: 170px;
	   height: 170px;
	   background-color: #fff;
	   display: inline-block;
	   margin: 30px;
	   border-radius: 50%;
	   text-align: center;
	   line-height: 170px;
	   color: red;
	   text-decoration: none;
	   font-weight: 700; 
	}
	.radius a:hover {
		background-color: red;
		color: #fff;
	}
	</style>
</head>
<body>
	<div class="radius">
		<a href="#">文字内容</a>
		<a href="#">文字内容</a>
		<a href="#">文字内容</a>
	</div>
</body>
</html>

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
属性 说明
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊距离
spread 阴影的尺寸
color 阴影的颜色
inset 将外部阴影改为内部阴影 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
	}
	div:hover {
		box-shadow: 0 15px 15px rgba(0,0,0,0.1);
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

浮动

float浮动:标准流,浮动,定位.

float可以让多个div在同一行显示.

属性值 说明
left 元素向左浮动
right 元素向右浮动
none 元素不浮动 
选择器 {float: 属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.up {
		width: 200px;
		height: 100px;
		background-color: red;
		float: left;
	}
	.down {
		width: 220px;
		height: 120px;
		background-color: purple;
	}
	</style>
</head>
<body>
	<div class="up"></div>
	<div class="down"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		width: 600px;
		height: 600px;
		background-color: blue;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: red;
		float: right;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 100px;
		height: 100px;
	}
	.one {
		background-color: red;
		float: left;

	}
	.two {
		background-color: purple;
		
	}
	.three {
		background-color: blue;
		float: left;
	}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>

盒子模型布局稳定性

width >  padding  >   margin

浮动(float)

普通流（标准流）、浮动和定位
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）

推荐

Day1:html和css

Day2:html和css

Day3:html和css

Day4:html和css

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞
posted @ 2018-12-27 13:12  达达前端  阅读(87)  评论(0)  编辑  收藏  举报