css元素显示模式（行内、块级、行内块）

2024-05-06 07:17:40

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标签

css元素显示模式（行内、块级、行内块）相关推荐

【CSS】CSS元素显示模式display + 网页单行文字垂直居中小技巧
写在前面,作者首页有前端专栏,详细分享相关知识,有兴趣的不妨点个收藏 ~~~~ CSS元素显示模式display 标签显示模式是标签以什么方式进行显示.HTML标签一般分为块标签和行内标签两种类型,它 ...
CSS学习笔记（3）【CSS元素显示模式以及背景设置】
CSS基础学习一.CSS元素的显示模式(了解) 在HTML中将所有标签分为容器级和文本级两类在CSS中将所有的标签分为块级元素和行内元素 1.什么是块级元素和行内元素? 块级元素会独占一行而行内元 ...
块级、内联、内联块级
在html元素中,元素会有display属性. display属性默认值是block,那么该元素是块级元素. display属性默认值是inline,那么该元素是内联元素. 没有元素的display默 ...
5.html基础标签:块级+行级元素+特殊字符+嵌套规则
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
c语言块级作用域_块级作用域问题ES5 ES6
ES5: 1. 没有块级作用域在其他类C语言中,由花括号封闭的代码块都有自己的作用域(如果用ECMAScript的话来说,就是它们自己的执行环境), 所以支持根据条件来定义变量. if(true) ...
css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
CSS块级元素与行内元素的区别和联系
块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方. 默认情况下块元素,是独占一行的常见 ...
css块级元素变行内元素,css块级元素和行内元素
块级元素: 1.display为block 2.会独占一行,导致换行 3.可以设置宽高 4.margin外边距设置都有效 5.padding内填充都有效 6.可以容纳行内元素和块级元素,也可以容纳内联 ...
详解块级元素、行内元素、行内块级元素类型、区别及相互转化
1)块级元素特点: 1.总是从新的一行开始 2.高度.宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大 ...

最新文章

热门文章