Css盒子模型

一.基本结构

1.内容区域（content）：盒子中呈现实际内容的部分，例如文本、图片等。
2.内边距（padding）：内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。
3.边框（border）：包围内容区域和内边距的线条，可以设定边框的样式、宽度和颜色等。
4.外边距（margin）：盒子与周围元素之间的空白区域，用于控制盒子与其他元素之间的距离。

二.属性

1.宽度 高度

width，height

像素（px）：像素是最常用的单位，表示屏幕上的一个像素点。它是固定的，具有确定的大小。例如，width: 200px;将元素的宽度设置为200个像素。

百分比（%）：百分比单位相对于父元素的尺寸进行计算。例如，width: 50%;将元素的宽度设置为父元素宽度的50%。

视窗宽度单位（vw）：视窗宽度单位表示相对于视口（浏览器窗口）宽度的比例。例如，width: 50vw;将元素的宽度设置为视口宽度的50%。

视窗高度单位（vh）：视窗高度单位表示相对于视口高度的比例。例如，height: 75vh;将元素的高度设置为视口高度的75%。

2.背景颜色

background-color

颜色名称：可以使用预定义的颜色名称来表示颜色，例如：background-color: red;表示红色背景。RGB表示法：RGB表示红、绿、蓝三种颜色的组合值。可以使用十进制或十六进制表示。例如：十进制表示法：background-color: rgb(255, 0, 0);表示红色背景。
十六进制表示法：background-color: #FF0000;表示红色背景。
RGBA表示法：RGBA在RGB的基础上增加了第四个参数，即alpha通道，用于控制颜色的透明度。取值范围是0到1，其中0表示完全透明，1表示完全不透明。例如：background-color: rgba(255, 0, 0, 0.5);表示红色半透明背景。

3.背景图片

background-image:url(具体路径)

重点.1. margin:外边距

与边框内容的距离

margin-top margin-right margin-left margin-bottom

复合写法 margin：10px 10px 10px 10px

2,padding:内边距 

边框内部扩大

padding+像素px

说明margin与padding的上下左右原理一样

使用内减模式 box-sizing: border-box; 可以减少使用margin和padding的盒子撑大