一、各种元素的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. window 服务(二)

    接Window服务(一) ServiceController方法调用 public partial class Service1 : ServiceBase { public Service1() { ...

  2. 第九节: 利用RemoteScheduler实现Sheduler的远程控制 第八节: Quartz.Net五大构件之SimpleThreadPool及其四种配置方案 第六节: 六类Calander处理六种不同的时间场景 第五节: Quartz.Net五大构件之Trigger的四大触发类 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联

    第九节: 利用RemoteScheduler实现Sheduler的远程控制   一. RemoteScheduler远程控制 1. 背景: 在A服务器上部署了一个Scheduler,我们想在B服务器上 ...

  3. Dephi泛型

    TArray TEnumerator(抽象) TEnumerable(抽象) 实际使用:TList TQueue TStack TPair TDictionary ,内部都包含 TValueEnume ...

  4. 关于CDN对动态网站加速的一些看法

    CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...

  5. 利用 apache bench 模拟并发请求

    示意代码如下 ab -n 1000 -c 10 http://127.0.0.1/ -n 指的是总的请求,默认值是 1 -c 指的是并发数,默认值是 1 -t 指的是测试的总时间,测试所进行的最大秒数 ...

  6. Atitit.常见的4gl 第四代编程语言  与 dsl

    Atitit.常见的4gl 第四代编程语言  与 dsl 1. 4gl dsl发展历史1 2. 4gl dsl的特点1 3. 常见的4gl 第四代编程语言 dsl2 4. 未来趋势与标准2 4.1.1 ...

  7. Atitit.rust语言特性 attilax 总结

    Atitit.rust语言特性 attilax 总结 1. 创建这个新语言的目的是为了解决一个顽疾:软件的演进速度大大低于硬件的演进,软件在语言级别上无法真正利用多核计算带来的性能提升.1 2. 不会 ...

  8. SpringBoot Idea 启动报错 Process finished with exit code 1

    问题描述:没有其他任何错误日志,只有Process finished with exit code 1 问题原因:Maven POM.xml问题造成 由于是properties是我直接从其他项目中拷贝 ...

  9. File类的源码学习

    File类是Java中IO部分的一个类,用于表示文件或者目录的.关于File类有很多的常规操作这里就不介绍了,来看一下不常规的东西. File英文意思是文件,但是它也可以用来表示目录,文件的概念还是比 ...

  10. NOJ1167 丑陋数 想法题

    题意 丑陋数n的意思是n的全部素数因子仅仅有2,3,5. 求出前1500个丑陋数. (第一个丑陋数是1) 思路 用一个数组维护全部的丑陋数. 一開始数组中仅仅有一个数就是1. 如今能够确定的丑陋数还有 ...