web前端入门到实战：CSS盒子模型-创新互联

一、什么叫框模型

页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。

二、外边距

围绕在元素边框外的空白距离（元素与元素之间的距离）

语法：margin，定义4个方向的外边距

1、单边定义：margin-top/right/bottom/left

（1）取值：以px为单位， %占父级元素宽度的%比

正数：margin-left 元素向右移动，margin-top元素向下移动

负数：就是相反方向

取值 auto：自动计算块级元素的外边距，对于上下外边距无效,块级元素水平居中

2、简写方式

margin：value ；定义4个方向的值

margin：v1 v2； v1设置上下，v2设置左右

margin：0 auto：设置块级元素水平居中

margin：v1 v2 v3；v1设置上，v2设置左右，v3设置下

margin：v1 v2 v3 v4；上右下左

3、自带外边距的元素

h2~h7、p、body、ol、ul、dl、pre

一般在开发的时候需要重置具有外边距的元素

方案一：*{margin:0;padding:0}
方案二：参考淘宝

4、外边距的特殊效果

（1）外边距合并

当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个边距中较大的

(2)行内元素对外边距的表现

行内元素垂直外边距无效（img）除外

（3）行内块对外边距的表现

同一行中，一个行内块设置了垂直边距，同行其他行内会跟着变化

(4)外边距溢出

在特殊条件下，为子元素设置上外边距，会作用到父元素

特殊条件：

1.父元素上边框
2.为第一个子元素设置上外边框，任何一个 都会造成外边框溢出

解决方法：

为父元素添加边框，弊端：影响了父元素的实际高度
为父元素添加内边距，弊端 了父元素的实际高度
在父元素的 第一个子元素位置，添加一个空的table

三、内边距

不会影响其他元素，但是会影响自己的占地尺寸，视觉上感觉大小发生变化

语法：

padding：value ；设置4个方向的内边距

padding：v1 v2；v1设置上下，v2设置左右

padding：v1 v2 v3；v1设置上，v2设置左右，v3设置下

padding：v1 v2 v3 v4；设置上右下左

单方向设置：padding-top/right/bottom/left

box-sizing属性，设置框模型的计算方式

box-sizing：content-box；默认值，盒子模型计算，div设置的width，height为content的大小

    


专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

box-sizing：boder-box；div设置的width，height为border外边距的大小

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。