CSS盒子模型

满分观察网友z

已于 2024-03-24 08:16:59 修改

阅读量1.1k

点赞数 23

分类专栏： CSS 文章标签： css 前端

于 2024-03-19 12:02:27 首次发布

本文链接：https://blog.youkuaiyun.com/dongxiaod1/article/details/136838104

版权

文章目录

1. 元素的显示模式
2. CSS 属性书写规范
3. 盒子模型

记住一句话： 万物皆盒子！！！

所有 HTML 元素可以看作一个盒子，盒子包括：内容区（content）、内边距（padding）、边框（border）、外边距（margin））四个属性。

1. 元素的显示模式

1.1. 块元素（block）

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。

1.1.1. 语法

display:block

1.1.2. 特点

在页面中独占一行。
默认宽度是容器的 100%。
默认高度是由内容撑开。
宽高可以由 CSS 设置。

1.2. 行内元素（inline）

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。

1.2.1. 语法

display:inline

1.2.2. 特点

在页面中不独占一行，排满一行，会自动换行。
默认宽度和默认高度是由内容撑开的。
无法用 CSS 设置宽高。

1.3. 行内块元素（inline-block）

1.3.1. 语法

display:inline-block

1.3.2. 特点

在页面中不独占一行，排满一行，会自动换行。
默认宽度和高度由内容撑开。
可以通过 CSS 设置宽高。

1.3.3. 弊端

如果元素换行，中间会有间隙，如果不换行，代码的可读性比较差，不利于维护。

1.4. 修改元素的显示模式

可以通过 CSS 的 display 来设置，常用值如下：

值	描述
none	元素被隐藏
block	转为块级元素
inline	转为行内元素
inline-block	行内块元素

1.5. 代码演示

1.5.1. 默认显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-盒子模型-行盒和块盒互转</title>
    <style>
      span {
     
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      div {
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <span>行内元素</span>
    <span>行内元素</span>
    <div>块级元素</div>
    <div>块级元素</div>
  </body>
</html>

1.5.2. 行内元素设置块级元素

span {
   
  width: 100px;
  height: 100px;
  background-color: pink;
  display: block;
}

1.5.3. 块级元素设置行内元素

div {
   
  width: 100px;
  height: 100px;
  background-color: skyblue;
  display: inline;
}

1.5.4. 行内元素设置行内块元素

行内块元素拥有行内元素和块级元素的属性。

span {
   
  width: 100px;
  height: 100px;
  background-color: pink;
  display: inline-block

最低0.47元/天解锁文章