社区首页 >专栏 >框模型

框模型

十月梦想

发布于 2018-08-29 02:26:12

71900

代码可运行

文章被收录于专栏：十月梦想十月梦想

运行总次数：0

代码可运行

框模型(盒子模型)

1. 框模型(box model)定义了元素框

处理内容，外边距，内边距，边框的方式

框：页面元素皆为框

<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>