一、什么叫框模型
页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。
二、外边距
围绕在元素边框外的空白距离（元素与元素之间的距离）
语法：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、自带外边距的元素
h1~h6、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的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
box-sizing：boder-box；div设置的width，height为border外边距的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
自己是一个6年的前端工程师,希望本文对你有帮助！
这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术
点击：加入
网友评论