css盒模型基础认知

一.什么叫盒子
（以标准盒模型为例）
一个元素在页面中真是占据的位置。
又分为五个部分：

1. 内容的宽
2. 内容的高
3. 内边距
4. 边框
5. 外边距
   宽：width px；
   高：heigth px；

   padding：内容和边框之间的距离。
   注：内边距是可以被背景色渲染的。
   可以给单边设置内边距

   为了更方便快捷书写，可以用简写的四值法
   单值：padding：50px
   上下左右都为50px。
   双值：padding：50px 50px
   书写顺序为：上下 左右
   三值：padding：50px 50px 50px
   书写顺序为：上 左右 下
   四值：padding：50px 50px 50px 50px
   书写顺序为：上 右 下 左（顺时针）

   二.边框
   三要素写法：
   宽度 样式 颜色
   宽度：即边框厚度 px
   样式：分为多种（本次展示三种，并非全部）
   1、double2、groove3、ridge三.外边距
   margin：外边距
   两个盒子之间的距离（px）
   margin-top：上边距
   margin-right：右边距
   margin-left：左边距
   margin-bottom：下边距

注：有一些标签会有默认样式
比如默认的边框
这时候我们可以先把清楚默认样式
然后再做调整
如：p{
margin：0；
padding：0；
}

四.补充项
盒子水平居中：（前提是：盒子有宽度）
margin：0 auto；

高度：
一般不设置高度，而是用内容去撑开盒子的高。避免大片留白和内容溢出

溢出内容隐藏：
overflow：hidden；

外边距塌陷：
垂直方向上相邻的两个盒子，如果都有外边距，则外边距相交的地方会出现外边距重合现象，也叫作外边距塌陷。
取值：margin相遇的部分，并不是两个margin值的和，而是为最大值。
如果两个margin值为负数，取值为绝对值最大的。如果一正一负，结果为两者之和。

居中方法：

1. 水平居中：
   text-align：center；
2. 垂直居中
   单文本line-height等于盒子的高

以上就是盒子的基础框架认识
学会这些就可以做一些简单的盒子模型了。

本文地址：https://blog.csdn.net/weixin_52250963/article/details/109583667