框模型
框模型(盒子模型)
1. 框模型(box model)定义了元素框
处理内容，外边距，内边距，边框的方式
框：页面元素皆为框
<a>sss</a>
<div>ewrewr</div>
内容区域的
width：宽
height：高
增加了内外边距和边框不会影响内容区域的大小，
但是会改变元素框的大小
元素框的实际宽度：width+左右外边距+左右border边框+左右内边距
元素框的实际高度：height+上下外边距+上下边框+上下内边距
2.外边距
1.围绕在元素周围的空白区域，
默认是不能被其他元素所占据
2.作用
主要是用来拉开元素之间的距离
3.属性
margin:20px;
单边设置
margin-方向
top：
right：
bottom：
left：
取值
1. px
2. %
3. auto 自动
4. 负值
4.取负值
让元素反方向移动
通常只设置
margin-top:负值
margin-left:负值
5.auto
能自动计算外边距(左右)
特点：
控制 非行内元素 水平居中的使用
input
前提：必须加宽和高
6.外边距简便写法
margin:值; 代表4个方向
margin: 值1 值2;
上下 左右
margin:值1 值2 值3;
上 左右 下
margin:值1 值2 值3 值4;
上 右 下 左
<html lang="en">
<head>
<style>
body{border:1px solid black;}
div{
width:200px;
height:200px;
background-color: yellowgreen;
/*margin:30px; */ /* margin：值默认四个方向*/
margin:10px 50px 40px; /*三个值分别是 （10px）上 左右（20px） 下（40px）*/
/*margin：10px 20px;*/
/*两个值表示 （10px）上下的值 （20px）左右的值*/
/* margin:10px 20px 40px 50px */
/* 四个值表示：上 右 下 左方向 */
}
.d1{
width:200px;
height:80px;
background-color: blue;
margin:0;
}
</style>
</head>
<body>
<div></div>
<div class="d1"></div>
<a href="">行元素</a>
</body>
</html>注意：top：正值元素向下移动，bottom：正值向上运动，right：正值向左运动，left：正值向右移动；负值与正值方向移动相反。
style>
#d1{width:500px;
height: 500px;
border:1px solid gray;}
#d1>div{
width:200px;
height:200px;
background-color: yellowgreen;
margin-top:50px;/*元素下移50px*/
margin-bottom:100px;/*元素上移100px*/
margin-left:200px;/*元素友移200px*/
margin-right:500px;/*元素左移500px*/
}
</style>7.具有默认外边距的标记
body,h1-h6,ul,ol,dl,dd,p都有默认的外边距
通过css重写的方式统一
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,dt{
margin:0;
}
<style>body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,dt{
margin:0;
}</style>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<ul>
<li>one</li>
<li>1</li>
</ul>
<ol>
<li>你好</li>
<li>hello</li>
</ol>
<dl>
<dt>一二三四五</dt>
<dd>六七八九十</dd>
</dl>
</body>
</html>body,h1-h6,ul,ol,dl,dd,p都有一定的外边距（margin） 可以通过css统一将外边距去除。
8.特殊情况
1.外边距合并
当两个垂直外边距相遇时，会合并成一个外边距
合并后的外边距高度是两个外边距中最大的那个值
2.外边距溢出
子债父还
在特定情况下,给子元素设置边距时，
效果会作用到父元素身上
特定情况
1.上下外边距 会产生溢出
2.父元素没有设置边框，并且设置
第一个子元素的上外边距
或者
给最后一个元素设置下外边距
特殊情况1：
#d1{width:500px;
height:500px;
background-color: yellow;
margin-bottom: 200px;}
#d2{width:500px;
height:500px;
background-color: green;
margin-top: 20px;}/* 垂直时候外边距一致只默认一次，如果不同默认值比较大的*/
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>特殊情况2：
#d1{width:200px;
height:100px;
background-color: yellow;
margin-bottom: 200px;}
#d2{width:200px;
height:100px;
background-color: green;
margin-top: 20px;}
#d3{
width:300px;
height:228px;
background-color: black;
}
p{width:150px;
height:108px;
background-color: goldenrod;
margin-top:30px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">
<p></p>
</div>
</body>此情况下，给p（子元素）标记进行设置外边距则 d3（父元素）会跟随进行移动，margin的效果则作用在父元素上。
#d3{
width:300px;
height:228px;
background-color: black;
border: 1px solid green;给d3（父元素）加上border则可解决问题，父元素则不会受影响。
解决方案
1.给父元素添加一个边框
2.由父元素的内边距来取代子元素的外边距
9.注意
1.上下(margin-top/magin-bottom)外边距 对行元素无效
2.上下(margin-top/magin-bottom)外边距，对行内块元素有特殊的效果
（一行都会受到影响）
<style>
input{margin-top:100px;} 行内块元素使用则整行元素都会被作用，不管改行的行元素或者块元素。
/* a {margin-top:100px;}*/ a标记外边距无效果，不能作用于行元素
</style>
</head>
<body>
<a href="">我是超链接标记</a>
<input type="text">
</body>
</html>3.内边距
内容区域离边框的距离
扩大内边距会影响整个盒子的大小
语法
padding:值;
padding:值 代表四个方向
padding:值1 值2;
上下 左右
padding:值1 值2 值3;
上 左右 下
padding:值1 值2 值3 值4;
上 右 下 左
注意
内边距的效果只会影响本身
用法与外边距margin类似，但是内边距的内容区域不影响，影响的内容区域与边框的距离。
padding（内边距）的实际作用如下图：
腾讯云开发者
