css块级元素和行内元素的区别是什么

这篇文章主要介绍了css块级元素和行内元素的区别是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

阿鲁科尔沁网站建设公司创新互联建站,阿鲁科尔沁网站设计制作,有大型网站制作公司丰富经验。已为阿鲁科尔沁上千多家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的阿鲁科尔沁做网站的公司定做!

css行内元素(inline element)

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

css行内元素的特点:

1、可以和其他元素处于一行,不用必须另起一行。

2、元素的高度、宽度及顶部和底部边距不可设置。

3、元素的宽度就是它包含的文字、图片的宽度,不可改变。

在介绍完css行内元素后,我们来看一看css行内元素有哪些?

css行内元素有哪些?

常见的css行内元素:

a:锚点
abbr:缩写
acronym:首字
b:粗体(不推荐)
bdo: bidi override
big :大字体
br : 换行
cite :引用
code:计算机代码(在引用源码的时候需要)
dfn:定义字段
em : 强调
font :字体设定(不推荐)
i : 斜体
img :图片
input :输入框
kbd:定义键盘文本
label : 表格标签
q : 短引用
s:中划线(不推荐)
samp :定义范例计算机代码
select :项目选择
small: 小字体文本
span:常用内联容器,定义文本内区块
strike : 中划线
strong: 粗体强调
sub:下标
sup : 上标
textarea :多行文本输入框
tt:电传文本
u: 下划线

接着,我们来看一看css块级元素和css行内元素的区别有哪些?

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

css块级元素和行内元素的区别之一:

块级元素:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度。

行内元素:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。



    区别
    


块级元素1
块级元素2
行级元素1 行级元素2

效果如下:

css块级元素和行内元素的区别是什么

css块级元素和行内元素的区别之二:

块级元素:块级元素可以设置宽高。

行内元素:行内元素不可以设置宽高。

实例:



    
    区别
    


        

块级元素一

块级元素二
行内元素一 行内元素二

效果如下:

css块级元素和行内元素的区别是什么

注意:块级元素即使设置宽度也还是独占一行。

css块级元素和行内元素的区别之三:

块级元素:块级元素可以设置margin,padding。

行内元素:行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。

实例:


    
    区别
    


        

块级元素一

块级元素二
行内元素一 行内元素二

效果如下:

css块级元素和行内元素的区别是什么

注意:行内元素竖直方向的如padding-top和margin-bottom不会产生边距效果。

css块级元素和行内元素的区别之四:

块级元素:块级元素对应display:block。

行内元素:行内元素对应display:inline。

最后说一个属性:display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性。

说明:可以通过修改元素的display属性来切换行内元素和块级元素。

感谢你能够认真阅读完这篇文章,希望小编分享css块级元素和行内元素的区别是什么内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!


网页题目:css块级元素和行内元素的区别是什么
文章出自:http://bzwzjz.com/article/ihoehh.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设公司 重庆网站制作 外贸营销网站建设 成都企业网站建设 成都网站设计 响应式网站设计 网站建设 外贸网站设计方案 定制级高端网站建设 网站建设公司 成都网站建设 定制网站建设多少钱 成都网站建设公司 宜宾网站设计 专业网站设计 营销网站建设 成都商城网站制作 重庆企业网站建设 高端网站设计 高端网站设计推广 成都网站制作 成都企业网站设计