零基础建站培训介绍

当前位置:

CSS行内元素与块元素的转换方法

以下为学做网站论坛关于“CSS行内元素与块元素的转换方法”讲解视频教程。

课程介绍

CSS行内元素与块元素的转换方法是由学做网站论坛录制或发布的css3视频教程的15756节。
CSS行内元素与块元素的转换方法主讲老师为来自学做网站论坛的张启亚老师发布。本课程已被学做网站论坛用户学习7,286次。
张启亚老师已在学做网站论坛发布了包括 CSS行内元素与块元素的转换方法 在内的1004节高质量视频教程。

行内元素与块级元素的区别:

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;

块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;

块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;

行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

行内元素与块元素的转换

转换的方式是用css的display属性

display:block; /*转换为块级*/
display:inline; /*转换为行内*/

还有一种是display:inline-block; /* 其实仍未行内元素,但是可以设置width及height属性等*/

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注