CSS盒子模型详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Cloudceky/article/details/73887947

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin（外边距）-清除边框区域。没有背景颜色，它是完全透明
Border（边距）- 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距）- 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容）- 盒子的内容，显示文本和图像

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Bxomodel(w3cschool.cn)</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<img src="/attachments/cover/cover_cssref.jpeg" width="250" height="250" />

<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body>
</html>

padding 内边距有上下左右四个方向：
padding-top ; padding-bottom ; padding-left ; padding-right;

准则：在使用css的时候，能够简写则简写
padding:10px 20px;
第一个值表示上下的padding
第二个值表示左右的padding
padding:10px 20px 30px; 上左右下
padding:10px 20px 30px 40px; 上右下左

border: 1px solid #ccc;

1px 边框的宽度
solid 边框的线型
#ccc 边框的颜色  英文单词 八进制表示 十六进制表示

border-width:边框的宽度
border-style:边框的线型
border-color:边框的颜色


margin  外边距
margin:10px 20px 30px 40px;

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

在使用margin时需要注意的点：
1. 塌陷
margin塌陷存在于块级元素之间，如果元素变成了行内块元素或者行内元素则不会塌陷，如果元素脱离了标准文档流则也不会塌陷；
2. 通过margin让盒子居中。
让盒子左右居中

margin:0 auto；

使用margin:0 auto;让盒子居中需要注意的点: