2015.08.30(2)

在CSS中,行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。

1.行内元素:

  ①不占据一整行,随内容而定,有以下特点:

  ②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变。

  ③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用。

  ④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用。

常见的行内元素有:

  a - 锚点,b - 粗体(不推荐),br - 换行,em - 强调,font - 字体设定(不推荐),i - 斜体,img - 图片,input - 输入框,label - 表格标签,select - 项目选择,small - 小字体文本,span - 常用内联容器,定义文本内区块,strike - 中划线,strong - 粗体强调

2.块级元素:

  ①总是在新行上开始,占据一整行;

  ②高度,行高以及外边距和内边距都可控制;

  ③宽带始终是与浏览器宽度一样,与内容无关;

  ④它可以容纳内联元素和其他块元素。

常见的块级元素有:

  div -最常用的块级元素,dl - 和dt dd搭配使用的块级元素,form - 交互表单,h1 - 大标题,hr - 水平分隔线,ol - 排序表单,p - 段落,ul - 非排序列表

  互相转换:使用display设置可以使得行内元素拥有块级元素的特性,反之也可以。

如:

<p style="display:inline; text-align:center">设置了内联的块元素p,其表现形式和内联元素一样</p>

<span style="display:block; text-align:center">设置了块级元素的span,可以独占一行并且可以设置宽高</span>

display: table-cell ,能把元素当作表格单元来显示,这个非常实用,显示效果也很好,只可惜某些浏览器不够兼容。要注意,和一个合法的<td>元素必须在<table>里一样,

display: table-cell 元素必须作为 display: table 的元素的子元素出现。

时间: 2024-10-21 16:29:14

2015.08.30(2)的相关文章

MyEclipse 2015优化技巧(整合)

MyEclipse 2015优化技巧(整合) MyEclipse 2015优化速度方案仍然主要有这么几个方面:去除无需加载的模块.取消冗余的配置.去除不必要的检查.关闭更新. 第一步: 去除不需要加载的模块 一个系统20%的功能往往能够满足80%的需求,MyEclipse也不例外,我们在大多数时候只需要20%的系统功能,所以可以将一些不使用的模块禁止加载启动.通过Windows- Preferences打开配置窗口,依次选择左侧的General--> Startup and Shutdown,这

Dynamic CRM 2015学习笔记(4)修改开发人员资源(发现服务、组织服务和组织数据服务)url地址及组织名

在azure vm上安装了CRM 2015后 Dynamic CRM 2015学习笔记(1)Azure 上安装 CRM 2015, 发现了一个问题,那就是在设置 ->自定义项 –> 开发人员资源 里面的几个ulr(发现服务.组织服务和组织数据服务)都不对,显示的都是http://机器名/XRMServices/2011/ -, 但这个url是访问不了的,正确的url应该是 http://xxx.cloudapp.net/XRMServices/2011/ - 下面介绍如何修改成正确的url.

Java基础08 继承(转载)

继承(inheritance)是面向对象的重要概念.继承是除组合(composition)之外,提高代码重复可用性(reusibility)的另一种重要方式.组合是重复调用对象的功能接口.继承可以重复利用已有的类的定义. 类的继承 我们之前定义类的时候,都是从头开始,详细的定义该类的每一个成员.比如下面的Human类: 从上面的类定义,我们可以了解该类的所有细节: 该类的数据成员,该类的方法,该类的接口. 现在要定义一个新的类,比如Woman类,并假设Woman与Human类相当类似: 可以像以

Dynamic CRM 2015学习笔记(5)CRM 2015 导入 OData Query Designer 解决方案

以前一直使用OData Query Designer来生成.验证odata查询字符串,本想把它导入到CRM 2015的环境里,但报错: 到MSDN上发现太老版本的solution确实不能再导入到crm 2015了: 因为这个工具是crm2011版本的,根据上面的图示,我们必须把它先导到crm 2013,再在crm 2013里导出成6.1version的,这时就可以导入到crm 2015里了.但我导到crm 2013里后,再想导出时问题来了,不能导出,因为是manage的solution.必须是u

【转换博客通知】(本博客2015.08.02停用)

2015.08.02 本博客停用,搬运至 http://tonyfang.is-programmer.com/ 感谢各位对我的支持!

我关注的一周技术动态 2015.08.30

服务化和资源管理技术 1. Docker基础技术:AUFS http://coolshell.cn/articles/17061.html 要点: 支持层次化镜像是 docker 的一大创新之一, 本文详细介绍了实现层次化镜像的技术手段之一 aufs 的使用方法, 读完之后你就会理解docker层次化镜像的奥秘了. 2. Docker基础技术:DeviceMapper http://coolshell.cn/articles/17200.html 要点: devicemapper 是支持 doc

User Friendly 2015 深圳 小记(0)

吃了下午饭,从学校慢悠悠到达广州南,踏上了这次会议的旅行. 作为一个半路出家(哦,不对,刚刚开始剃度)的PM,希望能够从这次会议中,快速进入用户设计者的一个角色,了解世界先进的设计思路.而且身为一名学生,看到可以这“低廉”的价格,就前来学习一下. 其实为什么我一个PM预备生居然去参加UX的会议呢?   才不是因为我看到user friendly这个标题后就觉得应该是和用户使用需求有关系,看到学生3折优惠,然后就直接报了名,定了酒店,最后才发现UX和PM的区别.....ORZ 作为本系列的第一篇,

2015/5/1 (二) 字符集和字符编码

首先,我们需要了解,计算机硬件是只会读取二进制文件的,但是,对于这些复杂的10110101101,这些东西所表达的意思,即使是高深的程序猿们,也未必看得懂,就更别说那些不是IT行业的人士了,但是,随着计算机的普及,自然而然地,就有人站出来解决这个人与计算机交流的问题了.第一个登场亮相的就是ASCII这个东西,全称American Standard Code for Information Interchange,即是美国标准信息交换代码  下面附图: 简单来说,这就是一个标准,跟语言一样,这个这

Visual Studio 2015 速递(4)——高级特性之移动开发

系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studio 2015速递(3)——ASP.NET 新特性 说是VS2015的高级特性,其实也高级不到哪里,看起来确实“高大上”,正如BUILD2015上演示的那样,你真的可以只用VS2015就可以“通吃”各种移动设备应用了,当然,是有条件的“通吃”,微软给了一系列的解决方案,来辅助完成这一目标. 首先我们来