css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法。有4种可能值:static, relative, absolute or fixed:
- static:默认值,元素按照在文档流中出现的顺序渲染
- absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(非static)来进行定位
- fixed:元素相对于浏览器window进行定位
- relative:元素相对与它的正常位置进行定位,因此"left:20"就表示在元素正常位置的基础上,左移20像素的距离。
float属性:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
- none:默认值。元素不浮动,并会显示在其在文本中出现的位置。
- Left:元素向左浮动。
- Right:元素向右浮动。
display属性:display属性指定了一个DOM元素说使用的盒子模型(box)。即元素应该生成的框的类型。
- Inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
- None: 此元素不会被显示。
- Block: 此元素将显示为块级元素,此元素前后会带有换行符。
- inline-block: 行内块元素。这个值导致一个元素产生一个块状盒模型(block box),而本身作为单一的内联盒模型(inline box)流动排列(flow),类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型,而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度,又可以和内联元素(比如文字)排列在一行。这个效果在页面设计的时候,很多地方都可以带来便利,最常见的莫过于设计导航时,既可以像inline元素那样实现居中,又可以设置像block元素那样设置单个菜单大小,还可以通过text-indent来隐藏文字显示背景图片。
- list-item: 此元素会作为列表显示。
- table :此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
CSS框模型(盒子模型) 一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“内联元素”,这是因为它们的内容显示在行中,即“行内框”。
您可以使用 display 属性改 变生成的框的类型。这意味着,通过将
display 属性设置为 block,可以让内联元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display
设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:
<div>
some text
<p>Some more text.</p>
</div>
在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。
Css属性:display, position和float的关系,参考:CSS2.1中的定义
- 如果一个元素的display属性被设置为none,那么就不会生成元素对应的box,这种情况下,float和position被忽略
- 否则(display非none),如果一个元素的
position属性被设置为absolute或者fixed(都是绝对定位),这种情况下,float被忽略(float计算的值为
none),display属性的值根据下表自动计算。box的位置取决于属性top,right,bottom,left以及box的容器 - 否则(display非none,并且position非absolute、fixed),如果float的值不为null(为left或者right),那么box是浮动的并且display的值根据下表来计算
- 否则(display非none,并且position非absolute、fixed,float为none),如果元素是根元素,display的值根据下表来计算。(这种情况下有一个例外:在CSS2.1中定义,当display被指定的值是list-item时,计算结果的display的值为block或者list-item)
- 否则(display非none,并且position非absolute、fixed,float为none,不是根元素),那么就按照被指定的display的属性值来显示。
表格 display属性转换:
- 指定值 inline-table 转成table
- 指定值 inline, table-row-group, table-column, table-column-group,
table-header-group, table-footer-group, table-row, table-cell,
table-caption, inline-block 转成block - 其他任何的指定值都保持不变
转:http://desert3.iteye.com/blog/1562782
css position, display, float 内联元素、块级元素的更多相关文章
- CSS内联--与块级元素区别
内联元素:1.内联元素(inline)不会独占一行,相邻的内联元素会排在同一行.其宽度随内容的变化而变化. 2.内联元素不可以设置宽高 3.内联元素可以设置margin,padding,但只在水平方向 ...
- css基础 行内元素 块级元素
1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- CSS块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- css 内联与块
内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素. 如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了 ...
- HTML--内联元素与块级元素
>>内联元素(inline element) a,span,input,select,label,img,textarea,sub,sup,li,i,small,strong,em,b,b ...
- CSS 中的内联元素、块级元素以及display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS 中的内联元素、块级元素、display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS/块级元素与内联元素的深入理解
今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:
随机推荐
- 听云数据库管理平台NetopGO简介
➠更多技术干货请戳:听云博客 断断续续写了将近一个月,听云第一版数据库管理平台终于写完了,期间来来回回的改了好多次小毛病,现在已经部署到生产环境上去了. 在刚开始的时候,后端的数据库集群只有10多个节 ...
- iOS--XML三种解析方法( XMLDictionary)、(GDataXMLNode)、(NSXMLParser)
iOS9之后,默认网络请求是https,所有我们要设置一下网络安全,具体设置如下 1.第三方类库 XMLDictionary 下载地址: https://github.com/nicklockwood ...
- rabbitmq_management 安装失败
安装rabbitmq_management的时候出现错误 不能连接rabbit,所以查看状态 看意思感觉好像是rabbit没有运行,但是安装的时候都是默认安装的,所以安装完以后服务的名字就是Rabbi ...
- html常用的综合体
clip:rect(20px 100px 50px 20px); clip属性中的rect,clip:rect(y1 x2 y2 x1)参数说明如下: y1=定位的y坐标(垂直方向)的起点 x1=定位 ...
- EMD_MAINTENANCE.EXECUTE_EM_DBMS_JOB_PROCS的删除创建
在最近的一次优化过程中发现了ORACLE 10g中一个作业EMD_MAINTENANCE.EXECUTE_EM_DBMS_JOB_PROCS执行相当频繁,其实以前也看到过,只是没有做过多的了解和关注. ...
- javascript-简单工厂两种实现方式
简单工厂笔记 两种方式: 第一种:通过实例化对象创建 第二种:通过创建一个新对象然后包装增强其属性和功能来实现 差异性:前一种通过类创建的 对象,如果这些类继承同一个父类,他们父类原型上的方法是可以共 ...
- 【JavaScript】EasyUI框架的Dialog控件根据浏览器分辨率自动调节宽高
序: 如果单独一个或几个Dialog控件修改成根据浏览器可视界面自动调整高.宽很容易仅仅是一个量变的过程,但如果大量页面都引入了Dialog控件,修改起来是一个很消耗体力的工作.所以接到任务后第一想法 ...
- coursera机器学习-聚类,降维,主成分分析
#对coursera上Andrew Ng老师开的机器学习课程的笔记和心得: #注:此笔记是我自己认为本节课里比较重要.难理解或容易忘记的内容并做了些补充,并非是课堂详细笔记和要点: #标记为<补 ...
- SQL Server 中获取字符串拼音的标量函数实现
工作中时常遇到字符串转换为拼音的需求.特别目前在各大网站平台都可以看到的基于拼音的查询功能.如果在查询中增加相应的拼音查询,就可以减少很多的因中文汉字完全输入的不便利,例如:当我要查询叫”郭德 ...
- 一致性算法Paxos详解
分布式系统除了能提升整个系统的性能外还有一个重要的特性就是提高系统的可靠性,可靠性指的是当分布式系统中一台或N台机器宕掉后都不会导致系统不可用,分布式系统是state machine replicat ...