div 的相对定位与绝对定位
网 上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却 带来了“div 套 div”的缺点,过量使用div标签;三是class过多,造成class灾难。 一、CSS中的块模型 在CSS的定义中,有的html标签被浏览器当成一个块来显示,比如div、table、p、ul等等,我们称之为块元素;有的html标签被浏览器 每一个块元素都可以分为context、padding、boder和margin几个部分,我们常说的宽和高,通常指的是context的宽和高 |
|
这几个部分都是可以通过CSS进行指定的,当然,CSS还可以控制背景,因此,我们可以通过CSS来灵活控制我们页面的外观。 二、CSS中的文档流模型 所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然,嵌套不在此列),每一个块都会另起一行。如下图 他们对应的html如下: 为了定义他们的宽度、高度还有边框,我们定义如下的CSS: #div2 { #div3 { 三、CSS中的相对定位和绝对定位模型 在文档流中,每个块元素都会被安排到流中的一个位置,我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位, #div2 { #div3 { 下面是效果: 可以看到一个有趣的现象,那就是虽然我们把div2移走了,但是div1和div3中间还是有一个空间,说明相对定位的元素是会占据文档流空间的,这里的div2就是典型的“站着茅坑不拉屎”。 使用绝对定位也是可以把div2摆到div1的右边的,而且绝对定位是不会占据文档流空间的,如下图,div1和div3之间没有空白:
绝对定位是个好东西,可以把内容显示到页面上的任何位置,但是对于我们程序员来说,却不能使用太多的绝对定位,因为使用程序动态向div中添加内容,div的大小是不可知的,无法将每一个div的位置都定死。 四、CSS中的浮动和清除模型 这里把div2和div3都定义了为浮动,代码如下: #div3 { 那什么情况下需要clear呢?这是因为float的元素和绝对定位的元素一样,也是不占用文档空间的,因此,如果我们把div2和div3都嵌套 下面是它们的html代码: 下面是它们的css代码: #div2 { #div3 { 因为float的元素不占用文档流空间,有时候元素还会重叠到float元素上,这里我就不举例了。 为了解决上面的问题,就需要在float之后的元素上面使用clear,在此例中,我们在div3后面加入一个空段落,并设置其为clear,如下: clear 属性定义了元素的哪边上不允许出现浮动元素。下面是新增加的空段落的CSS代码: .clear{ |
div 的相对定位与绝对定位的更多相关文章
- 详解div+css相对定位和绝对定位用法
1.定位的专业解释: (1)语法 position:static|absolute|fixed|relative 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(ab ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- css之position相对定位和绝对定位
一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
- CSS魔法(三)浮动、相对定位、绝对定位
浮动 为何需要浮动? 浮动float最开始出现的意义是为了让文字环绕图片而已,但人们发现,如果想要三个块级元素并排显示,都给它们加个float来得会比较方便. 浮动问题? 为何要清除浮动? 很多情况下 ...
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- 详解CSS的相对定位和绝对定位(讲得很详细)
详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...
- CSS中相对定位与绝对定位
看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...
- CSS中的相对定位和绝对定位
1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...
随机推荐
- 软件杯python-flask遇到的坑有感!
大三下,对于我考研的人来说,时间不要太紧张,参加软件杯也是系主任要求,题目是公共地点人流量的检测,个人还是个菜鸟,但是把遇到的一些大家可能不小心会出现的问题贴出来,困扰我很久,还没睡好觉!!! Que ...
- 关于多行文本 textarea 在ios 真机上padding相对安卓较大问题
问题: 多行文本组件是带有默认的padding的,然而,小程序的teatarea 在ios和安卓上显示的padding不一样,普遍ios的padding会比安卓的要明显的大.这种情况下我的想法是做兼容 ...
- 用正则表达式简单加密(C#为例)
") { List<" }; ") { foreach (char i in key) { keys[counter] = i.ToString(); counte ...
- 零基础入门Python实战:四周实现爬虫网站 Django项目视频教程
点击了解更多Python课程>>> 零基础入门Python实战:四周实现爬虫网站 Django项目视频教程 适用人群: 即将毕业的大学生,工资低工作重的白领,渴望崭露头角的职场新人, ...
- Python 正则表达式 匹配任意字符
.(句点)匹配除了换行之外的所有一个字符, .*(点-星)匹配除了换行外的所有字符 >>> >>> r=re.compile(r'.*')>>> ...
- 绘制矩形:描边矩形imagerectangle()、填充矩形imagefilledrectangle()
<?php //1. 绘制图像资源(创建一个画布) $image = imagecreatetruecolor(500, 300); //2. 先分配一个绿色 $green = imagecol ...
- thinkphp-PHP实现Excel导入 导出功能
Excel导出 //功能:导出题库模板 public function get_contract_ex() { ob_get_clean(); header("Content-Typ:tex ...
- C语言实现判断分数等级
从屏幕上输入一个学生的成绩(0-100),对学生成绩进行评定: <=60为"E" 60~69为"D" 70~79为"C" 80~89为 ...
- 利用python生成图形验证码
validCode.py import random from io import BytesIO from PIL import Image, ImageDraw, ImageFont def ge ...
- emwin如何在windows10下vs2015或2017进行仿真。
Make sure the selected Windows SDK is installed:Properties -> Configuration Properties -> Gene ...