CSS盒子模型

由于制作课程设计的缘故，需要用到这个知识点，就特意上网搜索并学习了一下，同时为加深印象，在此记录。

Box Model

首先，box model是用来设计和布局的。

css盒模型本质上是一个盒子，里面塞的（又叫 ”封装“）是盒子周围的html元素，有四部分：边距、边框、填充、和实际内容。

• margin(外边距)-清楚边框外的区域，外边距是透明的；

• border(边框)-围绕在内边距和内容外的边框；

• padding(内边距)-清楚内容周围的区域，内边距是透明的；

• content(内容)-合资的内容，显示文本和图像。

标题

 

div{
    width:300px;
    border:25px solid red;
    padding:25px;
    margin:25px;
}

450像素空间：300+25+25+25+25+25+25

div {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0;
}

250像素空间：220+10+10+5+5

其他相关知识点暂时不写了，后续作品如有用到，会拓展更新。

 

border边框属性：用于指定边框的 样式 和 颜色

margin 外边距 属性-定义元素周围的空间

margin清楚周围的（外边框）元素区域。margin没有背景颜色，是完全透明的。

margin可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

padding填充属性-是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

 当元素的padding(填充)内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用padding属性可以改变上下左右的填充。