css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一、各种元素的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 特性的更多相关文章
- css 行内元素和块级元素
1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- 初学css 行内元素与块级元素
行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...
- C#基础-css行内元素、块级元素基础
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- CSS行内块元素(内联元素)
一.典型代表 input img 二.特点: 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶 ...
- img、input到底是行内还是块级元素?
一.img.input属于行内替换元素.height/width/padding/margin均可用.效果等于块元素. 行内非替换元素,例如, height/width/padding to ...
- CSS行内元素
一.典型代表 span a ,strong em del, ins 二.特点: 在一行上显示 不能直接设置宽高 元素的宽和高就是内容撑开的宽高. <style type="text/c ...
- CSS——行内元素的margin与padding
行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...
随机推荐
- window 服务(二)
接Window服务(一) ServiceController方法调用 public partial class Service1 : ServiceBase { public Service1() { ...
- 第九节: 利用RemoteScheduler实现Sheduler的远程控制 第八节: Quartz.Net五大构件之SimpleThreadPool及其四种配置方案 第六节: 六类Calander处理六种不同的时间场景 第五节: Quartz.Net五大构件之Trigger的四大触发类 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联
第九节: 利用RemoteScheduler实现Sheduler的远程控制 一. RemoteScheduler远程控制 1. 背景: 在A服务器上部署了一个Scheduler,我们想在B服务器上 ...
- Dephi泛型
TArray TEnumerator(抽象) TEnumerable(抽象) 实际使用:TList TQueue TStack TPair TDictionary ,内部都包含 TValueEnume ...
- 关于CDN对动态网站加速的一些看法
CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...
- 利用 apache bench 模拟并发请求
示意代码如下 ab -n 1000 -c 10 http://127.0.0.1/ -n 指的是总的请求,默认值是 1 -c 指的是并发数,默认值是 1 -t 指的是测试的总时间,测试所进行的最大秒数 ...
- Atitit.常见的4gl 第四代编程语言 与 dsl
Atitit.常见的4gl 第四代编程语言 与 dsl 1. 4gl dsl发展历史1 2. 4gl dsl的特点1 3. 常见的4gl 第四代编程语言 dsl2 4. 未来趋势与标准2 4.1.1 ...
- Atitit.rust语言特性 attilax 总结
Atitit.rust语言特性 attilax 总结 1. 创建这个新语言的目的是为了解决一个顽疾:软件的演进速度大大低于硬件的演进,软件在语言级别上无法真正利用多核计算带来的性能提升.1 2. 不会 ...
- SpringBoot Idea 启动报错 Process finished with exit code 1
问题描述:没有其他任何错误日志,只有Process finished with exit code 1 问题原因:Maven POM.xml问题造成 由于是properties是我直接从其他项目中拷贝 ...
- File类的源码学习
File类是Java中IO部分的一个类,用于表示文件或者目录的.关于File类有很多的常规操作这里就不介绍了,来看一下不常规的东西. File英文意思是文件,但是它也可以用来表示目录,文件的概念还是比 ...
- NOJ1167 丑陋数 想法题
题意 丑陋数n的意思是n的全部素数因子仅仅有2,3,5. 求出前1500个丑陋数. (第一个丑陋数是1) 思路 用一个数组维护全部的丑陋数. 一開始数组中仅仅有一个数就是1. 如今能够确定的丑陋数还有 ...