css中行内元素和块级元素的区别

如题所述

一、块级元素:block element

每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;

块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。

DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

二、行内元素:inline element

也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。


对行内元素,需要注意如下

设置宽度width 无效。

设置高度height 无效,可以通过line-height来设置。

设置margin 只有左右margin有效,上下无效。

设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2017-11-23
块级元素会换行,就是块级元素后的都会换行。
行级元素,后面的元素不会换行,就是在一行本回答被网友采纳

CSS内嵌元素和块元素的区别
1 css中块元素和行内元素的区别 :行内元素会再一条直线上,是在同一水平线布局的 ; 块级元素各占一行,是垂直方向布局的。2 第一步把概念说了一下,下面以实际的例子来看行内元素和块元素的区别:标签是一个行内元素 是一个块元素。从下面的代码中可以看出,两个标签里面的内容明显是没有填...

行内元素与块级元素有什么区别
块级元素1、总是从新行开始2、高度、行高、外边距以及内边距都可以控制3、宽度默认是浏览器的100%4、可以容纳内联元素以及其他块元素行内元素1、和相邻元素在一行上2、高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效3、默认宽度就是它本身内容的宽度4、行内元素只能容纳文本或其他行...

css中行内元素和块级元素的区别
一、块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如只...

行内元素与块级元素比较全面的区别和转换
一、行内元素与块级元素的布局特点不同:- 行内元素:它们会在同一行水平排列,不会换行。- 块级元素:每个元素都会单独占据一行,垂直排列,且会在新行开始和结束。二、包含关系与使用限制的区别:- 块级元素:有能力包含行内元素以及其他块级元素。- 行内元素:不能包含块级元素,只能包含其他行...

CSS行内块元素与行内元素的区别?
它们的区别主要有以下几点:1、CSS有个属性叫做display,其取值可以为inline-block。W3CSchool中说display 属性规定元素应该生成的框的类型。2、display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性。3...

块级元素和行内元素怎么转换
块级元素和行内元素是CSS中的两种基本元素类型,它们在页面上的布局和属性表现有所不同。块级元素会独占一行,且其宽度默认填满其父元素,而行内元素则不会独占一行,它会和其他行内元素并排。不过,这种分类并不是绝对的,我们可以通过修改CSS的`display`属性来改变元素的默认显示方式,实现块级元素和...

浅谈CSS块级元素与行内元素的区别和联系
内联元素(inline element)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素有a和span。块元素与内联元素的区别?1.块元素,总是在新行上开始;内联元素,和其他元素都在一行上。2.块元素,能容纳其他块元素或内联元素;内联元素,只能容纳文本或者其他...

CSS块级元素与行内元素(内联元素)的区别和联系
块状元素特点:1、独占一行,在默认情况下,宽度自动填满父元素宽度 2、宽度和高度可以控制 3、margin和padding横向纵向设置都有效 4、可以通过display: inline; 转换为行内元素 5、除个别特殊元素外,可包含块状元素和行内元素 行内元素特点:1、不能独占一行 2、宽高由内容撑开 3、margin和padding横向...

在制作网页时,块级元素和行内元素分别有哪些?
1、块级元素 2、行内元素 扩展内容:1.块级元素特性 (1)总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示。(2)宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。2.行内元素特性 (1)和相邻的行内元素在同一行。(2)宽度(width)、高度(height)...

css怎么判断一个块元素是不是行内元素?
行内元素(Inline element):与块级元素相对应的是行内元素,如 、、 等。它们不会独占一行,而是会根据内容自动换行,无法设置宽度、高度等常见属性,只能设置文本相关的样式,如颜色、字体大小等。因此,在 CSS 中,我们可以通过 display 属性来区分块级元素和行内元素,具体如下:如果 display 属性...

相似回答