块级元素与行内元素
我们在做页面布局的时候,一般会将html元素分为两种,即块级元素和行内元素。
块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有a, em ,strong等。
例如:我们可以给div或p应用下面样式,但是a标签却无法应用下面的样式。
复制代码
代码如下:.test{width:100px; height:100px;}
当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时,元素将以块级方式呈现;当display值设为inline时,元素将以行内形式呈现。所以我们可以给a标签应用以下样式:
复制代码
代码如下:.test{display:block; width:50px; height:50px;}
另外,如果我们即想让一个元素可以设置宽度高度,又想让它以行内形式显示,这时我们可以设置display的值为inline-block。如:
复制代码
代码如下:a{display:inline-block; width:100px; height:100px;}
相关推荐
关于块级元素和行内元素的一些小知识点的总结
当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。 使用display属性能够将三者任意转换: (1)display:inline;转换为行内元素; (2)display:block;...
在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元
NULL 博文链接:https://maoting.iteye.com/blog/1722563
文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素(inline): 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 ...
Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文
元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使...
所有的行内、块级元素分类
精品资料欢迎下载
HTML块级元素行内元素学习
块级元素:(以下列举比较常用的块级元素,详情可在w3cschool查询) XML/HTML Code复制内容到剪贴板 定义文档中的分区或节 定义最大的标题 定义副标题 定义标题 定义标题 定义标题 定义...
对HTML中的各种元素进行分类,初学者不至于弄混行内元素和块元素
3、 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 二、行内元素和块级元素的相互转换 行内元素转化为块...
内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。 根据块级元素的概念我们可以...
网友设计与开发中的块元素与行内元素详解,需要的下载看看。
一、常见块级元素有哪些: button,div , dl ,dt ,form , h1 ,h2 ,h3 , h4 ,h5 ,hr ,li ,ul ,table系列,button; 二、常见行内元素有哪些: img ,a ,input ,textarea ,b ,br ,span, select ,label ,map ,strong ; 三...
与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。 您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素...