html 盒子写法,HTML5中盒子模型的基础知识

本章摘要 : 主要是了解盒子模型的基础知识,了解相关的概念.

1, 什么是盒子模型?

网页上的每一个标签都是一个盒子,每个盒子都有四个属性

内容(content)

盒子里装的东西

网页中通常是指文字和图片

填充(padding，内边距)

比如说是我们买酒,怕酒在物流过程中损坏，而添加的泡沫或者其它抗震的辅料

边框(border)：盒子本身

边界(margin，外边距)

盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

标准的盒子模型图 (注意:它和IE浏览器的标准不同):

标准的盒子模型图.png

2, 盒子模型几个属性的介绍

1, 内容属性

内容属性.png

2, 内边距

内边距.png

注意内边距的书写格式需要掌握,它和iOS中设置内边距一样(注意是:上右下左,而且参数之间是没有逗号的)

内边距属性的书写格式.png

3, 边框

边框.png

注意 : 设置圆角有几种方式,详情可以去看官网

4, 设置外边距

外边距.png

注意 :设置外边距也有几种方式,需要去官网上了解一下,和内边距一样,需要知道外边距的几种写法所表示的什么意思.

外边距的格式.png

4, 简单使用上述几个概念

盒子模型的几个基本概念

div{

/*设置背景颜色*/

background-color: red;

/*设置宽高*/

width: 250px;

height: 250px;

/*设置外边距*/

margin: 130px;

/*设置边框的:边框的宽度 边框的样式 边框的颜色*/

border: 10px solid green;

/*设置内边距:上,右,下,左*/

padding: 20px 40px 50px 100px;

}

ALEXWilliam

5, 居中显示

居中显示

.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;

}

谷歌一下吧