1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > css元素显示模式(行内 块级 行内块)

css元素显示模式(行内 块级 行内块)

时间:2021-10-09 01:20:11

相关推荐

css元素显示模式(行内 块级 行内块)

1.块级元素

显示特点:

1、独占一行(一行只能显示一个)

2、宽度默认是父元素的宽度,高度默认由内容撑开

3、可以设置宽高

代表标签:

div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer

<style>div:nth-child(1) {/* 块级元素默认和父亲一样宽度 */height: 300px;background-color: pink;}</style></head><body><!-- 块级 --><div></div></body>

关于块级元素的一些想法

如果想让一个块级盒子,例如div在电脑上显示出来,可以不设置宽度,但是必须设置高度,否则在电脑屏幕上肉眼看不见

如果有二个盒子,只要子盒子有宽高,父盒子不用任何设置,都能被看到

例如:

<style>div{background-color: pink;}button{height: 100px;}</style></head><body><div><button></button></div></body>

2.行内元素

特点:

1、一行可以显示多个

2、高度和宽度默认由内容撑开

3、不可以设置宽高

代表标签:

a、span、b、u、i、strong、ins、em、del

<style>span {/* 行内不可以设置宽高 */width: 300px;height: 100px;background-color: red;}</style></head><body><!-- 行内 --><span>span</span><b>b</b><strong>strong</strong><u>u</u><i>i</i><s>s</s><del>del</del><em>em</em><ins>ins</ins></body>

3.行内块元素

显示特点:

1、一行可以显示多个

2、可以设置宽高

代表标签:

input、textarea、button、select

<style>img{width: 100px;height: 100px;}</style></head><body><!-- 行内块 --><img src="imgs/bg33.png"></body>

特殊情况:

img有行内块元素特点,但是chrome调试工具中显示的inline

4.显示模式转换

display: block;

display: inline-block;

display: inline;

5、html标签嵌套注意点

块级元素一般作为大容器,可以嵌套:文本级元素、行内元素、行内块元素等等.

但是: p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素

但是:a标签不能嵌套a标签

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。