前端之CSS盒子模型

一、前言

        我们来继续更新CSS的内容，往期的内容可以到前端专栏里去看，也可以点下面的链接

HTML常用内容：

https://blog.csdn.net/AWSDN/article/details/136112174spm=1001.2014.3001.5501
CSS前言：

https://blog.csdn.net/AWSDN/article/details/136127534?spm=1001.2014.3001.5501

CSS选择器：

https://blog.csdn.net/AWSDN/article/details/136131947?spm=1001.2014.3001.5502
        我打算从4个部分来讲CSS的内容，分别是选择器、盒子模型、布局、style样式。那么本篇就来介绍CSS中盒子模型部分。顾名思义，盒子模型就是一种模板，它可以让盒子里的元素按照既定规则进行排列，它的作用其实是让我们更方便的去进行布局，有了盒子模型我们可以很轻松的完成各种我们想要的布局，下面我们就对各种盒子模型进行介绍。

二、内容

1、盒子模型分类

（1）块级盒子（块级元素）

• 独占一行，对宽度高度都支持
• 纵向布局
• div ul li p table h1~h6
• display：block（设置为块级盒子）

（2）内联级盒子（内联级元素）

• 不独占一行，对宽度高度不支持
• 横向布局
• a span
• display：inline（设置为内联级盒子）

（3）内联块级盒子

• 不独占一行，但对宽度高度都支持
• 横向布局
• img input

（4）弹性盒子

• 默认不管父级元素能否放下子元素，子元素都会横向布局（可手动设置）
• 本该纵向布局，父集中加入display: flex;变为横向布局，子元素自动压缩
• display:flex（设置为弹性盒子）

2、盒子属性

上右下左（没有设置默认和对称的一样，设置一个值即四方边距),单独设置一方面其他都为0px，不可省略

内容区：width，height

填充区：padding

边框区：border

• border-style: ；边框样式
• border-color：；边框颜色
• border-width：；边框宽度组成

简化写法无顺序要求

还可以单独对边框各部分宽度以及各部分颜色样式单独处理，例如:border-top-color

外边距：margin

• auto：居中（css中只能横向居中）（首先要有宽度width）

3、盒子宽高

• box-sizing:content-box ; 默认值
• box-sizing:border-box; 内容区宽高改为设置整个盒子大小，内容向内压缩

三、总结

虽然本期内容很少，但是这些绝对是最值得自己拿出时间来练习的部分，最重要的是弹性盒子模型，非常的好用实用。如果有错误欢迎指正，另外如果本文对你有帮助的话，希望关注点赞支持，谢谢各位😘😘😘