块状元素(block element)内联元素(inline element)

块状元素(block element)内联元素(inline element)

内联元素: 行内元素(只在行内起作用)
先看一看 块状元素(block element)内联元素(inline element) 的区别


是否独占一行 
能否设置宽高
竖直方向的margin,pading
水平方向的margin,pading
行内元素(span)                                                            




                                                                                                           不可以
                                                                               不可设置
                                                                                                可以
块元素(div)

                                                                                                                是                                                                                            

 可以可以
 


拓展1:元素分为三种 块元素 内联元素 可变元素

A)     blockelement    

1.      address 地址

2.      blockquote 块引用

3.      center 居中对齐块

4.      dir 目录列表

5.      div 分割

6.      dl 定义列表

7.      field  form-控制组

8.      form交互表单

9.      h1 大标题

10.  h2 副级标题

11.  h3 h4 h5 h6   3,4,5,6级标题

12.  hr 水平分割线

13.  isindex  input prompt

14.  menu 菜单列表

15.  noframes  frames 可选内容 (对于不支持frames的浏览器显示的此块内容)

16.  noscript  可选脚本内容(对于不支持script的浏览器显示此块内容)

17.  ol 排序表单

18.  p 段落

19.  pre 格式化文本

20.  table 表格

21.  ul 非排列元素

B)     inline

1.      a 锚点

2.      abbr 缩写

3.      b 粗体(不推荐)

4.      bso  bidi override

5.      big 大字体

6.      br 换行

7.      cite 引用

8.      code计算机代码 (引用源码的时候需要)

9.      dfn 定义字段

10.  em 强调

11.  font 字体设定(不推荐)

12.  i 斜体

13.  img 图片

14.  input 输入框

15.  kbd 定义键盘文

16.  label 表格标签

17.  q 短引用

18.  s中划线(不推荐)

19.  samp 定义范例计算机代码

20.  select 项目选择

21.  small 小字体文本

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

23.  strike 中划线

24.  strong 粗体强调

25.  sub 下标

26.  sup 上标

27.  textarea 多行文本输入框

28.  tt 电传文本

29.  u 下划线

30.  var 定义变量

C)     可变元素(根据上下语境决定为块元素还是内联元素)

1.      applet  java applet

2.      button 按钮

3.      del 删除文本

4.      iframe  inline frame

5.      ins 插入的文本

6.      map 图片区块

7.      object  object 对象

8.      script 客户端脚本


拓展2   内联与块状元素的转化

display :inline ; (改成内联元素)

display :block ; (改成块元素)

display :none ; (改成块元素)

 




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值