ruorbb自用|前端学习6——CSS的元素显示模式

最新推荐文章于 2024-11-18 08:41:09 发布

xswdexgz

最新推荐文章于 2024-11-18 08:41:09 发布

阅读量128

点赞数

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/weixin_45976685/article/details/127017903

版权

作用：为了更好的让我们布置页面

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>

HTML元素一般分为块元素（div）和行内元素（span）两种类型

1、块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的

特点：1.比较霸道，自己独占一行

2.高度、宽度、外边距以及内边距都可以设置

3.宽度默认是父级宽度的100%

4.是一个容器及盒子，里面可以放行内或块级元素。

【注意】文字类元素不能存放块级元素

<p>标签主要用于存放文字，因此<p>里面不能放块级元素，尤其是<div>，

同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2、行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<u>、<ins>、<span>，其中span最典型。有时也将行内元素称为内联元素。

特点：1.一行可以显示多个

2.高度、宽度直接设置是无效的

3.宽度默认是本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

【注意】链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

3、行内块元素：<img />、<input />、<td>同时具有块元素和行内元素的特点

特点：1.一行可以显示多个，但它们之间会有缝隙

2.宽度默认是本身内容的宽度

3.高度、宽度、外边距以及内边距都可以设置

4、元素显示模式转换

简单理解：一个模式的元素需要另外一种模式的特性

行内元素转换为块元素——display：block

块元素转换成行内元素——display：inline

行内元素转换为行内块级元素—— display：inline-block


        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a 转换为块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把块元素div转换成行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: inline-block;
        }



<body>
    <a href="#">我是行内元素</a>
    <a href="#">我是行内元素</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>