HTML的盒子模型、块级元素与行内元素的相互转换

最新推荐文章于 2023-04-27 15:38:11 发布

qq_31743965

最新推荐文章于 2023-04-27 15:38:11 发布

阅读量1.9k

点赞数

分类专栏： HTML 文章标签： HTML的盒子模型

本文链接：https://blog.csdn.net/qq_31743965/article/details/77995013

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

盒子模型：
1 边距（border)，外边距(margin)，填充(padding)：方向是上、右、下、左，高度(height):内容的高度（行内元素），宽度(width)：占满父盒子（行内元素）

这里写图片描述

2 块级元素与行内元素的转换：
块级元素:div、h1、p 他们独占一行，可以设置宽和高；
行内元素:span、a、input

定义一个块级元素和行内元素，并将他们的高与宽设为100像素，块级元素的背景是红色，行内元素的背景是灰色。代码如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .one{
                height: 100px;
                width: 100px;
                background-color: red;
            }
            .two{
                height: 100px;
                width: 100px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div class="one">块级元素</div>
        <span class="two">行内元素<</span>
    </body>
</html>

执行结果为：

display：block；将行内元素转换为块级元素
display：inline；将块级元素转换为行内元素

按照下面修改css样式：
<style type="text/css">
            .one{
                height: 100px;
                width: 100px;
                background-color: red;
                display: inline;
            }
            .two{
                height: 100px;
                width: 100px;
                background-color: gray;
                display: block;
            }
        </style>