您现在的位置:首页 >> 前端 >> 内容

WEB前端知识讲解之块元素与内联元素

时间:2017/11/24 11:53:04 点击:

  核心提示:1.块级元素1)块元素一般独自占据一行,可以设定元素的宽和高。2)块级元素一般是其他元素的容器,可以容纳块级元素和行内元素.3)可设置4个方向的padding和margin值。4)常见的块级元素有p,...

1.块级元素

1)块元素一般独自占据一行,可以设定元素的宽和高。

2)块级元素一般是其他元素的容器,可以容纳块级元素和行内元素.

3)可设置4个方向的padding和margin值。

4)常见的块级元素有p,p,h1~h6等。

2.行内元素

1)不可以设置宽和高,但可以与其他行内元素位于同一行,行内元素尽量不要包含块级元素。

2)行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。

3)只能设置左右方向的padding和margin值,上下无法设置,因它是行内的行为。

4)常见的行内元素有a,em,strong等。

3.属性display

块级元素:display:block

行内元素:display:inline

块级元素与行内元素之间的转换:display

例:

a转化为块元素:

p转化为行元素:

 

 

4.1)常见的内联元素

a--锚点

b--粗体

big--大字体

em--强调

font--字体设置

i--斜体

img--图片(虽是内联,但是可以设置宽、高)

input--输入框

label--提示标签

select--列表选择

small--小字体文本

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

strong--粗体强调

sub--下标

sup--上标

textarea--多行文本输入框

u--下划线

2)常见的块级元素

address--地址

p--常用块级容器

dl--定义列表

fieldset--控制组

form--交互表单

h1~h6--标题

hr--水平分割线

ol--有序列表

p--段落

pre--格式化文本

table--表格

ul--无序列表

Tags:WE EB B前 前端 
作者:网络 来源:qq81496513