web前端入门到实战：CSS盒子模型

一、什么叫框模型

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

10多年的贵阳网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整贵阳建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“贵阳网站设计”,“贵阳网站推广”以来，每个客户项目都认真落实执行。

二、外边距

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

语法：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外边距的大小

标题名称：web前端入门到实战：CSS盒子模型
文章起源：http://shouzuofang.com/article/gpjpis.html