云梦网络做网站,学做招投标的网站有哪些,链接交换公司,响应式网站要多久元素分类--内联元素
在html中#xff0c;span、a、label、 strong 和em就是典型的内联元素#xff08;行内元素#xff09;#xff08;inline#xff09;元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。…元素分类--内联元素
在html中span、a、label、 strong 和em就是典型的内联元素行内元素inline元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素从而使 div 元素具有内联元素特点。 div{display:inline;}......div我要变成内联元素/div
内联元素特点
1、和其他元素都在一行上
2、元素的高度、宽度及顶部和底部边距不可设置
3、元素的宽度就是它包含的文字或图片的宽度不可改变。
小伙伴们你们观查一下右侧代码段有没有发现一个问题内联元素之间有一个间距问题这个问题在本小节的 wiki 中有介绍感兴趣的小伙伴可以去查看。
!DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetgb2312 /
title行内元素标签/title
style typetext/css
a,span,em{background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
/style
/head
body
a hrefhttp://www.baidu.com百度/a
a hrefhttps://blog.csdn.net/weixin_43392489慕课网/a
span33333/span
span44444/spanem555555/em
/body
/html
运行结果 元素分类--内联块状元素
内联块状元素inline-block就是同时具备内联元素、块状元素的特点代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)img、input标签就是这种内联块状标签。
inline-block 元素特点
1、和其他元素都在一行上
2、元素的高度、宽度、行高以及顶和底边距都可设置。
提示下一小节是用视频动画来讲解css中的盒模型。
!DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetgb2312 /
title内联块状元素/title
style typetext/css
a{display:inline-block;width:20px;/*在默认情况下宽度不起作用*/height:20px;/*在默认情况下高度不起作用*/background:pink;/*设置背景颜色为粉色*/text-align:center; /*设置文本居中显示*/
}
/style
/head
body
a1/a
a2/a
a3/a
a4/a
/body
/html
运行结果
