本章摘要 : 主要是了解盒子模型的基础知识,了解相关的概念.
1, 什么是盒子模型?
网页上的每一个标签都是一个盒子,每个盒子都有四个属性内容（content）
盒子里装的东西
网页中通常是指文字和图片填充（padding，内边距）
比如说是我们买酒,怕酒在物流过程中损坏，而添加的泡沫或者其它抗震的辅料边框（border）：盒子本身
边界（margin，外边距）
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出-
标准的盒子模型图 (注意:它和IE浏览器的标准不同):
标准的盒子模型图.png -
2, 盒子模型几个属性的介绍
-
1, 内容属性
内容属性.png
-
-
2, 内边距
内边距.png -
注意内边距的书写格式需要掌握,它和iOS中设置内边距一样(注意是:上右下左,而且参数之间是没有逗号的)
内边距属性的书写格式.png -
3, 边框
边框.png 注意 : 设置圆角有几种方式,详情可以去看官网
-
4, 设置外边距
外边距.png-
注意 :设置外边距也有几种方式,需要去官网上了解一下,和内边距一样,需要知道外边距的几种写法所表示的什么意思.
外边距的格式.png
-
4, 简单使用上述几个概念
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型的几个基本概念</title>
<style>
div{
/*设置背景颜色*/
background-color: red;
/*设置宽高*/
width: 250px;
height: 250px;
/*设置外边距*/
margin: 130px;
/*设置边框的:边框的宽度 边框的样式 边框的颜色*/
border: 10px solid green;
/*设置内边距:上,右,下,左*/
padding: 20px 40px 50px 100px;
}
</style>
</head>
<body>
<div>ALEXWilliam</div>
</body>
</html>
5, 居中显示
<!DOCTYPE html>
<!--设置居中需要注意几点: 1:首先需要判断它是什么样的类型,不同的类型,设置的属性可能不一样
标签水平居中
行内标签 以及行内-块级标签使用的是:text - align: center
块级标签使用的是:margin:0px ayto
标签的垂直居中
line-height : 400px
-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>居中显示</title>
<style>
.William{
color: cadetblue;
background-color: red;
width: 400px;
height: 300px;
/*文字居中*/
text-align: center;
}
.Alex{
/*水平居中*/
margin: 0px auto;
/*垂直居中*/
line-height: 300px;
}
span{
/*水平居中(在父类中)*/
/*垂直居中*/
line-height: 300px;
}
button{
line-height: 300px;
}
</style>
</head>
<body>
<div class="William">
<!--块级标签-->
<!--<div class="Alex">大半夜了,我真的好累,但是还是想学习</div>-->
<!--行内标签-->
<!--<span>坚持就是胜利,高薪不是羡慕出来,是自己努力出来的</span>-->
<button>谷歌一下吧</button>
</div>
</body>
</html>
