css基本功 内联元素详解

html-css03

css基本功 内联元素详解,第1张

行内元素基本定义:

HTML4中,元素被分成两大类: inline (内联元素)与 block(块级元素)。一个行内元 素只占据它对应标签的边框所包含的空间。 常见的行内元素有 a b span img strong sub sup button input label select textarea

列表

划重点

1.上标 下标

上小标这两个标签容易混淆,怎么记呢?这样记:b的意思是bottom:底部

2.<span>和<div>唯一的区别在于:<span>是不换行的,而<div>是换行的。

span里面不能放p、h、ul、dl、ol、div。

其他就不介绍了~偷个懒

其实就是a,img,label,b,br等元素.

这些元素内不能放款块元素,一般都是放文字或者其他内联元素.如:

而不能

1

.

块元素里面可以放块元素和内联元素

1

内联元素:

*

a

-

锚点

*

abbr

-

缩写

*

acronym

-

首字

*

b

-

粗体(不推荐)

*

bdo

-

bidi

override

*

big

-

大字体

*

br

-

换行

*

cite

-

引用

*

code

-

计算机代码(在引用源码的时候需要)

*

dfn

-

定义字段

*

em

-

强调

*

font

-

字体设定(不推荐)

*

i

-

斜体

*

img

-

图片

*

input

-

输入框

*

kbd

-

定义键盘文本

*

label

-

表格标签

*

q

-

短引用

*

s

-

中划线(不推荐)

*

samp

-

定义范例计算机代码

*

select

-

项目选择

*

small

-

小字体文本

*

span

-

常用内联容器,定义文本内区块

*

strike

-

中划线

*

strong

-

粗体强调

*

sub

-

下标

*

sup

-

上标

*

textarea

-

多行文本输入框

*

tt

-

电传文本

*

u

-

下划线

*

var

-

定义变量

html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

设置display:block;可以将元素转换块级元素。

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>

设置display:inline可以将块状元素转换为内联元素