当前位置：首页 > news >正文

前端入门学习之css盒子原则

news 2025/6/25 18:18:04

文章目录

前端入门学习之css盒子原则
- 引入块级元素：
- - 块级元素的特点
  - - 占据整行
    - 设置高度和宽度
    - 包含其他元素
- 盒子原则：
- - margin：
  - - 例子：
  - boder：
  - padding：

前端入门学习之css盒子原则

引入块级元素：

当一个html标签元素展示方式为 block，也就是它的 display 属性为 block，那么我们可以想象它像一个长方形盒子一样，这种展示方式也叫做块级元素

块级元素的特点

占据整行

占据整行：块级元素会独占一行，其后的元素会另起一行显示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{display: block;background-color: aqua;}</style>
</head>
<body><p >这是一个块级元素。</p></body>
</html>

在这里插入图片描述

设置高度和宽度

宽度与高度：块级元素可以设置宽度和高度属性。默认情况下，块级元素的宽度会占据其父元素的全部可用宽度（除非被其他CSS属性如max-width、min-width或width等覆盖）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{display: block;background-color: aqua;width: 900px;height: 900px;}</style>
</head>
<body><p >这是一个块级元素。</p></body>
</html>

在这里插入图片描述

包含其他元素

包含其他元素：块级元素可以容纳内联元素（inline elements）和其他块级元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{display: block;background-color: aqua;/* width: 900px;height: 900px; */}</style>
</head>
<body><p >这是一个块级元素。<h1>我是h1标题</h1> </p></body>
</html>

在这里插入图片描述
所以，到这里，我们可以把网页中的所有元素都看作是一个盒子，也就是长方形矩形，一个网页里面就是通过不同的盒子组建搭在一起的，也就是说，就好像搭建俄罗斯方块一样，我们可以以这样的思路去搭建一个网站。

盒子原则：

在css样式布局中，对于一个元素来说，有以下三个属性

margin：

外边距，顾名思义，盒子一和盒子二之间的距离就是外边距
在这里插入图片描述

例子：

第一幅图是 p 标签没有设置外边距的情况
在这里插入图片描述
当我们的 p 标签加上外边距呢

对于 p 元素的盒子四个方向的外边距都增加了 100 px

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}p{display: block;background-color: aqua;margin: 100px;}</style>
</head>
<body><p >这是一个块级元素。</p><h1>我是h1标题</h1> 
</body>
</html>