没有合适的资源?快使用搜索试试~ 我知道了~
css定位的介绍大全.docx
0 下载量 25 浏览量
2022-10-24
14:06:25
上传
评论
收藏 704KB DOCX 举报
温馨提示
试读
15页
css定位的介绍大全.docx
资源推荐
资源详情
资源评论
网上也有不少使用 div + css进行布局的教程,却存在很多缺陷,一是对 css 的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是
虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用 div 标签;三是 class 过多,造成 class 灾难。
要正确使用 css,对 css 的基本只是就不能够不了解。既然是漫谈,我这里就只讲四个方面,最后给出 xkland 项目作为实例。
一、 CSS 中的块模型
在 CSS 的定义中,有的 html 标签被浏览器当成一个块来显示,比如 div、table、p、ul 等等,我们称之为块元素;有的 html 标签被浏览器显示
在文本行之类,如 a、span、font 等等,我们称之为行内元素。行内元素我这里就不讲了,只讲讲块元素的模型。
每一个块元素都可以分为 context、padding 、boder 和 margin 几个部分,我们常说的宽和高,通常指的是 context 的宽和高(也有可能是
context+padding,具体跟浏览器有关),padding 代表内容和边框之间的填充, margin 代表边框之外的空白,如下图:
这几个部分都是可以通过 CSS 进行指定的,当然, CSS 还可以控制背景,因此,我们可以通过 CSS 来灵活控制我们页面的外观。
二、 CSS 中的文档流模型
所有的块元素在 html 文档中是按照它们出现在文档中的先后顺序排列的(当然,嵌套不在此列),每一个块都会另起一行。如下图:
他们对应的 html 如下:
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
为了定义他们的宽度、高度还有边框,我们定义如下的 CSS:
#div1 {
border: 1px solid #000099;
height: 60px;
width : 200px;
三、 CSS 中的相对定位和绝对定位模型
在文档流中,每个块元素都会被安排到流中的一个位置,我们可以通过 CSS 中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位,
相对定位是相对于该块元素在文档流中的位置的,比如,我们可以使用相对定位把 div2 放到 div1 的右侧, CSS 代码如下:
#div1 {
border: 1px solid #000099;
height: 60px;
width : 200px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width : 200px;
margin:2px;
position : relative;
top : -64px;
left: 204px;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width : 200px;
margin:2px;
}
下面是效果:
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width : 200px;
margin:2px;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width : 200px;
margin:2px;
}
剩余14页未读,继续阅读
资源评论
Cheng-Dashi
- 粉丝: 108
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功