1.span和div的区别

　　div是块元素(block)，span是行内元素(inline)；

　　span什么事也不会做，它存在的目的在与为开发者给它所围绕的元素指定样式。div类似，不过它引入了行分隔（其实实质是同第一点）

　　块元素是指另起一行开始渲染的元素，行内元素是指不需另起一行渲染的元素

　　示例代码：

<div style="background-color: wheat;">我是不带任何样式的的div，我是块级元素，块级元素独占一行</div>

<span style="background-color: red;">我是不带任何样式的的span1,我是行内元素</span>

<span style="background-color: green;">我是不带任何样式的的span2，我是行内元素</span>

　　显示结果：

2.display:block,display:inline和display:inline-block的区别

1）  display:block

把元素定义为块级元素；独占一行，width默认是auto；

可以设置width和height属性，但即使设置了width属性，块级元素还是独占一行，可以设置margin和padding属性。

示例代码：

<span style="display:block;background-color: blue;">我是块级的span</span>

<span style="display:block;background-color: wheat;width="100px">我是块级的span，并设置了width属性为100px，但是width并不生效</span>

<div style="background-color: red;width="100px">我是div，我设置了width为100px，但是它并不生效</div>

结果：

2）  display:inline

把元素定义为行内元素；不会独占一行，多个相邻的行内元素会排在一行，直到一行排列不下；

inline元素设置width、heigth无效；

可以设置margin和padding

示例代码：

<div style="display: inline;background-color: wheat">我是设置了inline的div，没有设置宽和高</div>

<div style="display: inline;background-color: yellow;width:100px;height:30px">我是设置了inline的div，设置了宽100px，高30px,但是没生效</div>

<div style="display: inline;background-color: blue;margin:5px;padding:5px">我是设置了inline的div，设置了marging 5px，padding5px</div>

运行结果：

3）  display:inline-block 把对象呈现为inline对象，但是将对象的内容呈现为块级对象。就是说，inline-block的元素不会独占一行（inline元素），同时可以使该元素具有块级元素可以设置height和width的能力，设置padding和margin也有效。

示例代码：

<div style="display: inline-block;background-color: wheat">我是设置了inline-block的div，没有设置宽和高</div>

<div style="display: inline-block;background-color: yellow;width:400px;height:30px">我是设置了inline-block的div，设置了宽300px，高30px,设置生效了</div>

<div style="display: inline-block;background-color: blue;margin:5px;padding:5px">我是设置了inline-block的div，设置了marging 5px，padding5px</div>

显示结果：

3.position：relative和position：absolute的区别以及float

relative：相对于自己原本的位置偏移，未脱离文档流和文本流

absolute：相对于最近的position不是static的父级元素的位置偏移，脱离文档流和文本流

float和fixed会脱离文档流，但不脱离文本流

示例代码：

<span>我是正常的span</span>正常 span之外的文本流

<span style="float: left">我是float 的span</span>float span之外的文本流

名词解释：

文档流：normal flow，传统html文档的文本布局，相对于盒子模型

文本流：相对于文字段落

4.什么时候该用relative，什么时候该用absolute？

一般是两个组合起来使用，一个页面先排出大的块用relative（如left，center，right这种大的版面），大块中的内容再用absolute来排版，也可以用relative；或者一个大的块里面元素比较多时也可以再用relative划分一次

附一段练习的代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<span>我是正常的span</span>正常 span之外的文本流

<span style="float: left">我是float 的span</span>float span之外的文本流

<div style="display: inline-block;background-color: wheat">我是设置了inline-block的div，没有设置宽和高</div>

<div style="display: inline-block;background-color: yellow;width:400px;height:30px">我是设置了inline-block的div，设置了宽300px，高30px,设置生效了</div>

<div style="display: inline-block;background-color: blue;margin:5px;padding:5px">我是设置了inline-block的div，设置了marging 5px，padding5px</div>

<div style="display: inline;background-color: wheat">我是设置了inline的div，没有设置宽和高</div>

<div style="display: inline;background-color: yellow;width:100px;height:30px">我是设置了inline的div，设置了宽100px，高30px,但是没生效</div>

<div style="display: inline;background-color: blue;margin:5px;padding:5px">我是设置了inline的div，设置了marging 5px，padding5px</div>

<div style="background-color: wheat;">我是不带任何样式的的div，我是块级元素，块级元素独占一行</div>

<span style="background-color: red;">我是不带任何样式的的span1,我是行内元素</span>

<span style="background-color: green;">我是不带任何样式的的span2，我是行内元素</span>

<span style="display:block;background-color: blue;">我是块级的span</span>

<span style="display:block;background-color: wheat;width="100px">我是块级的span，并设置了width属性为100px，但是width并不生效</span>

<div style="background-color: red;width="100px">我是div，我设置了width为100px，但是它并不生效</div>

<div style="display: block;background-color: orange;">我是block的div，display:block块的  width 属性的默认值是 auto  就是自动  撑满整行</div>

<div style="display: block;background-color: green;float:left">我是前一个div加了float left属性</div>

<div style="background-color: blue;height: 30px;position:relative;top:15px;">我是relative的div,我在文档流中是存在的，我的位置是相对于我应该在的文档流中的位置</div>

<div style="background-color: red;float:left;position:relative">我是relative float left 的div,跟absolute一样我具有inline-block的属性</div>

<div style="background-color: yellow;height: 30px;position:absolute;border:1px red;">我是absolute的div，我在文档流中不占位置，我的位置是相对于我最靠近的那个非static的父级元素的位置，我后面的元素可以当我不存在,而且我的display属性自动变成inline-block了</div>

<span style="background-color: blue;height: 30px;">我是一般的span，我被前面的absolute div给挡住了，大家看不见我看不见我</span>

<div style="background-color: blue;height: 30px"><span style="background-color: grey;height: 30px">我是包含在div里面的span，span一般height不生效</span></div>

<div style="background-color: red;height: 30px"><span style="background-color: grey;display:inline-block; height: 30px">我是包含在div里面的span，display设置为inline-block后height生效</span></div>

</body>

</html>

显示结果：

页面布局排版-block，inline，float，relative，absolute等的更多相关文章

  1. 网页布局的应用（float或absolute）

    一个浮动(左浮动或右浮动) 垂直环绕布局(float.clear) 左右两列布局(float.absolute) 三栏网页宽度自适应布局(float.absolute) 注意:网页设计中应该尽量避免使 ...

  2. float、absolute、inline-block三者区别

    0.前言 float属性在css2中是一个热门的属性,被广泛应用于布局之中,同时由于不当使用float带来的问题也非常多,本文结合自己对float的理解以及实际项目中碰到float的相关问题,做一个详 ...

  3. 比float更好的页面布局inline-block

    一:页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说 ...

  4. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  5. Appcan开发之页面布局与CSS排版(转)

    在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通 ...

  6. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  7. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  9. CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

随机推荐

  1. 屏蔽QQ黄钻官方团队送礼物的方法

    按照在网上查到的方法: 登录手机QQ \(\longrightarrow\) 好友动态 \(\longrightarrow\) 个人主页 \(\longrightarrow\) 右上角三道杠 \(\l ...

  2. 阿里云服务器及部署mysql

    可通过百度获取内容不再赘述. 远程连接: 远程连接阿里云服务器需在服务器上开放443端口,方法自行百度 win10通过系统自带远程连接服务连接时需安装凭据:   http://blog.csdn.ne ...

  3. Raphael.js改变元素层叠顺序

    Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...

  4. JS获取屏幕的大小

    <html><script>function a(){document.write("屏幕分辨率为:"+screen.width+"*" ...

  5. Python入门小练习 003 利用cookielib模拟登录获取账户信息

    为了方便, 使用chinaunix的账户获取账户主题. 有些网站可能需要验证码,  找一些不用验证码的网站 下面 ****** 很多个星号的均为私密信息, 所以用星号代替 #!/usr/bin/pyt ...

  6. python实现希尔排序

    与插入排序的思想一致,插入排序是一个,希尔排序是多个插入排序! # @File: shell_sort import random def insert_sort_gap(li, d): for i ...

  7. Lucky Array Codeforces - 121E && Bear and Bad Powers of 42 Codeforces - 679E

    http://codeforces.com/contest/121/problem/E 话说这题貌似暴力可A啊... 正解是想出来了,结果重构代码,调了不知道多久才A 错误记录: 1.线段树搞混num ...

  8. Mysql中的索引问题

    索引的用途 提高查询的效率,相当于在字典中建立的字母表或者偏旁部首表,这样查询当然比一行一行查询要快的多 每个存储引擎可以建立索引的长度是不一样的,但每个表至少支持16个索引,总的索引长度至少为256 ...

  9. poj2282The Counting Problem（组合)

    链接 计算0-9每一个数字出现的次数 逐位进行处理 对于每一位取几时依次算下组合的情况 注意0的情况需要特殊处理一下 因为0000 00 这样都是等于0的 前面的几位是多余的 #include < ...

  10. P1984 [SDOI2008]烧水问题

    题目描述 把总质量为1kg的水分装在n个杯子里,每杯水的质量均为(1/n)kg,初始温度均为0℃.现需要把每一杯水都烧开.我们可以对任意一杯水进行加热.把一杯水的温度升高t℃所需的能量为(4200*t ...