WEB前端 -- 块元素与内联元素

标签: WEB前端 块级元素行内元素
94人阅读 评论(0) 收藏 举报
分类:

1.块级元素

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

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

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

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

2.行内元素

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

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

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

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

3.属性display

块级元素:display:block

行内元素:display:inline

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

例:

a转化为块元素:<a href = "#"></a>

p转化为行元素:<p style= "display:inline"></p>

4.1)常见的内联元素

a--锚点

b--粗体

big--大字体

em--强调

font--字体设置

i--斜体

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

input--输入框

label--提示标签

select--列表选择

small--小字体文本

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

strong--粗体强调

sub--下标

sup--上标

textarea--多行文本输入框

u--下划线

2)常见的块级元素

address--地址

div--常用块级容器

dl--定义列表

fieldset--控制组

form--交互表单

h1~h6--标题

hr--水平分割线

ol--有序列表

p--段落

pre--格式化文本

table--表格

ul--无序列表

查看评论

块状元素与内联元素的嵌套规则

小细节的问题终究会变成大麻烦,故好好分析了其中的原委。不错,下面大神前辈们的总结吸取过来,方便以后自己查询。 块状元素与内联元素的基本概念:   块状元素:一般是其他元素的容器,可容纳内联...
  • qq_29319817
  • qq_29319817
  • 2017-03-14 19:29:15
  • 383

内联元素(inline)和块级元素(block)

常见的内联元素(inline)和块级元素(block)内联元素(inline):a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) big – 大字体 br ...
  • u010645062
  • u010645062
  • 2016-10-25 10:44:20
  • 460

块级元素和内联元素的区别小结

块状元素: address - 地址  blockquote - 块引用  center - 居中对齐  dir - 目录列表  div - 常用块级容易,也是CSS layout的主要标签  dl ...
  • xxz_best
  • xxz_best
  • 2016-03-01 10:20:03
  • 1991

什么是块元素block和内联元素inline

  • 2009年11月22日 23:39
  • 4KB
  • 下载

内联元素和块元素的区别及转换

1.内联元素和块元素       内联元素:p、 div、 h1~h6        块元素:span、a   区别:内联元素占空间全部宽度,自动换行;        块元素必须首先设置其相应的宽度,...
  • zxy9602
  • zxy9602
  • 2016-08-24 16:46:40
  • 965

html之标签内联块元素的那些事

这几天经常看到inline和block元素,inline,block……那么我们索性就来了解一下html中哪些是内联元素,哪些又是块元素呢?我们来看一下常见的语义化标签 块级元素(block):自动...
  • anmoran
  • anmoran
  • 2015-09-14 10:12:23
  • 2813

CSS块级元素与行内元素(内联元素)的区别和联系

块元素是一个元素,占用了全部宽度,在前后都是换行符。 内联元素只需要必要的宽度,不强制换行。其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素,能...
  • JimTrency
  • JimTrency
  • 2017-03-28 19:56:15
  • 604

CSS之块元素,内联元素,内联块元素的理解

块元素、内联元素、内联块元素元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。块元素 块元素,也可以称为行元素,布局中常用的标签如:di...
  • qq_41672715
  • qq_41672715
  • 2018-03-20 12:44:54
  • 7

html中的块元素(Block)和内联元素(Inline)

我们首先要了解,所有的html元素,都要么是块元素(block)、要么是内联元素(inline)。下面了解一下块元素、内联元素各自的特点:  块元素(block)的特点:1、总是在新行上开始;2、高度...
  • zhll3377
  • zhll3377
  • 2011-07-23 23:20:48
  • 4112

CSS 块级元素/内联元素、继承与相关属性

什么是块级元素(Block-level elements)?  浏览器通常在元素之前和之后都使用换行符显示块级元素。您可以将其可视化为一堆框。   块级元素始终在新行上开始,并占用可用的全宽(尽可能...
  • cbkting
  • cbkting
  • 2017-09-23 00:51:00
  • 158
    个人资料
    持之以恒
    等级:
    访问量: 5705
    积分: 954
    排名: 5万+
    文章存档