Js脚本之jQuery学习笔记（4）

时间 2020-07-24

标签脚本 jquery 学习笔记栏目 JavaScript 繁體版

原文原文链接

CSS之框模型和定位篇

框模型

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

元素div与span的异同

首先咱们先来了解两个元素html

div:
属于对内容分组使用的元素，没有任何预约语义的通用元素浏览器
span:
属于文本元素，没有任何预约语义的通用元素ide

通俗的来讲，没有预约义即不一样与布局

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

<span>This is span1</span>
<span>This is span2</span>
<div>This is div1</div>
<div>This is div2</div>

在页面上咱们会看到：
ui

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

<span style="display:block">This is span1</span>
<span>This is span2</span>
<div style="display:inline">This is div1</div>
<div style="display:inline">This is div2</div>

在页面上咱们会看到：
url

框模型中经常使用属性

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

margin:外边距，表明这距离浏览器窗口边的距离
border:边框
padding: 内边距，表明内容区域到边框的距离
内容区域:表明文字或图片等内容的区域大小，有width和height两个属性值来定义

下面来看一段代码

<style type="text/css">
.box{
width:200px;
height:200px;
margin:30px;
padding:20px;
border:30px;
}
</style>
<div class="box">this is box</div>

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

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

定位

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

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

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