盒模型

1.先在网页中显示出一个基本的盒子，在body标签中写下以下代码

  首先要定义盒子的属性，比如长宽高颜色等等

要注意的是，必须要把盒子定义写在<style> <style/>之中，否则无法显示

div {

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

这里给出了一个绿色的盒子，但只写出这些还不足以让这个盒子显示在网页中

想在网页中看到盒子，还要添加一句<div>This is a box<div/>,中间***部分可以是对这个盒子的描述，不固定

至此创建了一个简单的盒子，效果图如下（win10截屏快捷键  win+shift+s,移动鼠标选中截图区域，粘贴到别的地方即可）

 

这里盒子的写法与C语言中的函数类似，首先要编写函数体，即div{},先要显示出来就在下方调用，格式为<div> <div/>

***其中div并不是固定的，还可以是box,iif,csac等等***

***还有一点要注意的是，函数体内部的语句要写分号

还可以的分别定义盒子各个边界的性质，语句为border-top-style...

不想分开设置就整体设置  border-style:

 

2.调整盒子的位置