CSS之框模型和定位篇

框模型

在排版Html的时候，除了对元素的显示外观进行美化，还会涉及到页面元素的布局，于是引入了框的概念， 即我们对HTML里面的元素排版以一个个框为基本单位。

元素div与span的异同

首先我们先来了解两个元素

• div:
  属于对内容分组使用的元素，没有任何预定语义的通用元素

• span:
  属于文本元素，没有任何预定语义的通用元素

通俗的来说，没有预定义即不同与

代表段落、代表超链接已经有了自己含义。
这两个元素的区别在于,使用div修饰时，它有一个区域的概念，会另起一行，与上下的元素隔离，而使用span时，他会在本行生效。见代码：

This is span1
This is span2
This is div1
This is div2

在页面上我们会看到：

当然我们也有方法让他们通用，通过display属性的inline和block值来实现对方的效果

This is span1
This is span2
This is div1
This is div2

在页面上我们会看到：

框模型中常用属性

在一个框中包含了四个部分

• margin:外边距，代表这距离浏览器窗口边的距离

• border:边框

• padding: 内边距，代表内容区域到边框的距离

• 内容区域:代表文字或图片等内容的区域大小，有width和height两个属性值来定义

下面来看一段代码

.box{
width:200px;
height:200px;
margin:30px;
padding:20px;
border:30px;
}

this is box

生成html后，我们可以在浏览器中看到，”this is box”是漂浮在中间的，这时候通过查看网页源码的style就能看到上面的框模型图了～

框模型当然还有更多具体的边距和边框选项，针对边距的上下左右来设置具体的值，生成不规则的四边形，以及一些多样化的边框属性，如虚线、实线、凹陷、突出等，由于我们目标是先学会这些概念，这里不再具体说明。

定位

在了解了框模型之后，我们需要进一步来浏览器窗口中固定其位置，定义不同的框之间的位置关系。

总结：框模型加上定位功能，基本上已经覆盖了页面排版了，CSS的基础知识也终于学完了，下章开始学习jQuery入门～

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。