CSS布局 0x0 dispaly和margin

最新推荐文章于 2025-06-05 06:40:33 发布

原创最新推荐文章于 2025-06-05 06:40:33 发布 · 484 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#网页布局 #CSS布局 #CSS入门 #max-margin #dispaly

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

CSS

29 篇文章

订阅专栏

本文深入探讨CSS中的`display`属性，解释block、inline和none等基本概念，以及它们如何影响网页布局。同时，文章还介绍了如何使用`margin: auto;`实现元素的自动居中，帮助初学者更好地掌握CSS布局技巧。

"display"属性

CSS display 属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline

span 是一个标准的行内元素。一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

其他 display 值

margin: auto;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>margin</title>
        <style>
            #main{
                width: 600px;
                margin: 0 auto;
                background-color: #fa0;
            }
        </style>
    </head>
    <body>
        <div id="main">设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

                <br>唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。</div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>margin</title>
        <style>
            #main{
                max-width: 600px;
                margin: 0 auto;
                background-color: #fa0;
            }
        </style>
    </head>
    <body>
        <div id="main">设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
                <br>唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
                <br>在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
            </div>
    </body>
</html>