一、各种元素的width height margin padding 特性(具体css元素的分来参看二)

1.块级元素

width、 height、 margin的四个方向、 padding的四个方向都正常显示,遵循标准的css盒模型。例如:div

2.行内替换元素

width、 height、 margin的四个方向、 padding的四个方向都正常显示,遵循标准的css盒模型。 例如:img

2.行内非替换元素(重点)

width、 height不起作用,用line-height来控制高度。

padding左右起作用,上下不会影响行高,但是对于有背景色和内边距的行内非替换元素,背景可以向元素上下延伸,但是行高没有改变。因此视觉效果就是与前面的行重叠。(《css权威指南》 P249)

margin左右作用起作用,上下不起作用,原因在于:行内非替换元素的外边距不会改变一个元素的行高(《css权威指南》 P227)。

二、css元素的分类

1. 替换和不可替换元素

从元素本身的特点来讲,可以分为替换和不可替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;

又例如:根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 不可替换元素

(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

2. 显示元素

除了可替换元素和不可替换元素的分类方式外,CSS 2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。

a) 块级元素

在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。

典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。

通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。

但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。

b) 行内元素

行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>、<strong>等,都是典型的行内级元素。

display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。

不过元素的类型也不是固定的,通过设定CSS 的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性的更多相关文章

  1. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

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

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

  3. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

  4. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  5. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  6. CSS行内块元素(内联元素)

    一.典型代表 input img 二.特点: 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶 ...

  7. img、input到底是行内还是块级元素?

    一.img.input属于行内替换元素.height/width/padding/margin均可用.效果等于块元素.      行内非替换元素,例如, height/width/padding to ...

  8. CSS行内元素

    一.典型代表 span a ,strong em del, ins 二.特点: 在一行上显示 不能直接设置宽高 元素的宽和高就是内容撑开的宽高. <style type="text/c ...

  9. CSS——行内元素的margin与padding

    行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...

随机推荐

  1. JDBC技术总结(三)

    1. 数据库连接池 JDBC部分的前两个总结主要总结了一下JDBC的基本操作,而且有个共同点,就是应用程序都是直接获取数据库连接的.这会有个弊端:用户每次请求都需要向数据库获得连接,而数据库创建连接通 ...

  2. php url路由伪静态

    RewriteEngine on RewriteBase /RewriteRule ^([a-zA-Z]{1,})/([a-zA-Z]{1,})$ webim2/operator/users.php? ...

  3. c#关于路径的总结(转) 虚拟路径波浪号~和斜杠/的区别

    c#关于路径的总结(转)   来源:http://www.cnblogs.com/yugongmengjiutian/articles/5521165.html 前一段时间写代码时经常遇到获取路径问题 ...

  4. linux下的3种DDOS软件介绍

    什么是TFN2K? TFN2K 的作者是著名的德国黑客mixter. http://mixter.void.ru/papers.html TFN2K通过主控端利用大量代理端主机的资源进行对一个或多个目 ...

  5. 涛哥的Python脚本工具箱之生成带Logo的二维码

    近期须要在二维码上加Logo,网上没有找到好用的,于是自己用python写了一个. 须要安装qrcode,PIL库 二维码简称 QR Code(Quick Response Code),学名为高速响应 ...

  6. 禁止"Windows Media Player Network Sharing Service"服务自动启动

    开始 -> 运行 -> gpedit.msc -> 计算机配置 -> 管理模板 -> Windows 组件 -> Windows Media Player -> ...

  7. IDEA中配置svn

    反正这个命令行我是勾选了的,软件占用内存不大,我就都选了. 然后是配置IDEA 试一下效果,果然阔以,哈哈.

  8. k8s部署nginx集群

    环境: 两台虚拟机, 10.10.20.203 部署docker.etcd.flannel.kube-apiserver.kube-controller-manager.kube-scheduler ...

  9. centos7防火墙--firewall

    centos7的防火墙变成firewall了 systemctl start firewalld.service#启动firewallsystemctl stop firewalld.service# ...

  10. Selenium+Python :WebDriver设计模式( Page Object )

    Page Object 设计原理 Page Object设计模式是Selenium自动化测试项目的最佳设计模式之一,强调测试.逻辑.数据和驱动相互分离. Page Object模式是Selenium中 ...