Js脚本之jQuery学习笔记(4)

CSS之框模型和定位篇

框模型

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

成都创新互联专注于企业成都全网营销、网站重做改版、城区网站定制设计、自适应品牌网站建设、H5高端网站建设商城网站定制开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为城区等各大城市提供网站开发制作服务。

元素div与span的异同

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

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

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

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

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


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

在页面上我们会看到:
Js脚本之jQuery学习笔记(4)

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


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

在页面上我们会看到:
Js脚本之jQuery学习笔记(4)

框模型中常用属性

在一个框中包含了四个部分
Js脚本之jQuery学习笔记(4)

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

  • border:边框

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

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

下面来看一段代码



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

this is box

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

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


定位

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

属性说明
position定义元素在页面的定位方式
left制定元素与最近一个具有定位设置的父对象左边的距离
right制定元素与最近一个具有定位设置的父对象右边的距离
top制定元素与最近一个具有定位设置的父对象上边的距离
bottom制定元素与最近一个具有定位设置的父对象下边的距离
float制定元素是否以及如何浮动,图文结合时使用

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



文章题目:Js脚本之jQuery学习笔记(4)
URL标题:http://azwzsj.com/article/ggsogs.html