CSS盒子模型及属性

最新推荐文章于 2024-04-28 16:04:57 发布

小赵在练琴

最新推荐文章于 2024-04-28 16:04:57 发布

阅读量1.6k

点赞数 12

分类专栏： HTML&CSS 文章标签： html css3

本文链接：https://blog.csdn.net/annotation_PLZ/article/details/125898814

版权

大家好，今天来讲讲CSS盒子模型及属性。

一、盒子模型是什么？

盒⼦模型是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。

网页中的每一个元素都可以看做一个盒子模型

二、盒子模型介绍及相关属性

1.内容区/网页元素（content）

内容区是整个盒⼦模型的中⼼，其中存放了⽹⻚的主要元素，这些元素可以是⽂本、图像..

内容区有 width height overflow 三个属性，其中 width 和 height 属性⽤来指定盒⼦内容区域的宽度和⾼度。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        background-color: aqua;

最低0.47元/天解锁文章

小赵在练琴

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型及属性

盒⼦模型是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。...
复制链接

扫一扫