一、position 属性:
  • static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  • relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
  • absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  • fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
 
相对定位:
我理解的:相对定位的元素在文档中是正常流,它原先在什么位置,定位之后就相对于原先的位置移动;
 
绝对定位:
我理解的:元素脱离文档流,就好像页面中它不存在一样;它的位置对页面中其他元素没有任何影响,它可能会覆盖住其他元素;
                  但是它相对于什么元素定位的呢?(相对于其包含块,包含块可能是文档中的另一个元素或者是初始包含块。)相对于父元素
固定定位:
                   和绝对定位类似,也会脱离文档流,可能会覆盖住其他元素;只不过其包含块是视窗本身。

二、块级元素和行内元素:

块级元素:div、h1(大标题) 、 p(段落)  、hr、table
                 正常流时,每个块级元素默认占一行高度 ,一行内添加一个块级元素后无法一般无法添加其他元素 ,元素样式的display:block都是块级元素;
                 特点:
                ①、总是在新行上开始;
                ②、高度,行高以及外边距和内边距都可控制;
                ③、宽度缺省是它的容器的100%,除非设定一个宽度。
                ④、它可以容纳内联元素和其他块元素
 

行内元素:a、  span、iframe、br(换行)、em(强调)、img(图片)、input、label、select 、textarea(多行文本输入框)、 
                 display : inline的都是行内元素。设置高度无效,但可以通过line-height来设置;
                 特点:
                ①、和其他元素都在一行上;
                ②、高,行高及外边距和内边距不可改变;
                ③、宽度就是它的文字或图片的宽度,不可改变
                ④、内联元素只能容纳文本或者其他内联元素
 
三、inline/inline-block/block
display:block; 转化为块状元素;一个块状元素独占一行;可设宽、高、行高、顶和底边距离;宽默认为父元素的100%;
display:inline;转化为行内元素;和其他元素共处一行;不可设宽、高、行高、顶和底边距离;宽即所包含的文字图片之宽;
display:inline-block:可用{display:inline-block;}转化为内联块状元素;和其他元素共处一行;可设宽、高、行高、顶和底边距离;

css position 和 块级/行内元素解释的更多相关文章

  1. 块级&行内元素总结

    一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...

  2. 块级&行内(内联)元素

    行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...

  3. CSS HACK tab制表符导致行内元素之间的空隙如何解决

    <!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...

  4. css中的块级和内联元素

    块级元素: 首先说明display是块级元素,会单独站一行,如 代码: <!DOCTYPE html> <html> <head lang="en"& ...

  5. 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

    块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的 ...

  6. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  7. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  8. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  9. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

随机推荐

  1. js图片切换 带左右控制的

    代码下载

  2. 使用存储过程非常慢,但是直接执行SQL很快

    使用存储过程非常慢,但是直接执行SQL很快. 了解基本情况后,初步判断是参数嗅探问题 在对应的SQL语句后面使用 OPTION(OPTIMIZE FOR UNKNOWN) 参考了 http://www ...

  3. 给迷茫的你学习Node.js最好的方法

    这是真事儿,在3w咖啡整理书稿,然后小弟梁过来了,聊聊他的现状,一副很不好的样子,在天津我曾带过他大半年,总不能不管,我给他的建议是:“每天看10个npm模块” 对于学习Node.js迷茫的人来说,这 ...

  4. 配置ssh互信的一个小问题记录

    在我们安装集群软件时,经常需要配置机器之间的互信,每个人也有一套自己熟悉的方法. 但是在今天配置互信过程中,发现操作过程还是一样,但是就是不能互信,通过查找资料解决了,做一下记录. 我经常使用的方式: ...

  5. centos 7安装tomcat

    1.下载安装包 http://tomcat.apache.org/download-80.cgi 2.安装tomcat 注:安装前需要安装jdk环境 #解压 [root@localhost soft] ...

  6. grafana+influxdb+telegraf监控服务器cpu,内存和硬盘

    随便抄了一篇,目前我们的项目也在用,这个是linux和windows通吃的一种监控方案,非常有效,详细和优美,需要监控什么具体的业务内容,自己向influxdb中插入就行了. 监控服务器状态是运维必不 ...

  7. Use JAWS 14 in a VM

    We were not able to run the JAWS 14 app in a Virtual Machine after the installation is completed, th ...

  8. vector类转换Mat类

    前言 一个个数据push back到vector之后,可以使用Mat()函数将vector类型转换为Mat类型. 在opencv中Mat类的构造函数中有一个构造函数可以直接把vector类转换为Mat ...

  9. 自制数据结构(容器)-java开发用的最多的ArrayList和HashMap

    public class MyArrayList<E> { private int capacity = 10; private int size = 0; private E[] val ...

  10. BT601. BT709色彩空间

    参考:http://blog.csdn.net/mao0514/article/details/16958873