div+css网页布局笔记:盒子模型(框模型)

分类:编程时间:2024-07-30 20:05:31 浏览:1554 评论:0 小中大全屏

一个盒子我们会分为几个部分:

内容区:content

内边距:padding

边框:border

外边距:margin

盒子占用空间的大小

可见尺寸=指定宽高+边框宽度+内边距宽度+外边距宽度

盒子的内边距特性:

元素的背景颜色会延伸到内边距

<style>
.box1{
width: 200px;
height: 200px;
background-color:Blue;
border:10px solid red;

padding:0px 10px 20px 30px;
}

.box2{
width:100%;
height:100%;
background-color:#FFFF00;
}
</style>


<div class="box1">
	<div class="box2"></div>
</div>

盒子的外边距特性

盒子的左和上外边距会影响自己的位置,盒子的右和下外边距会影响其他盒子的位置

<style>
.box1{
width: 200px;
height: 200px;
background-color:yellow
;
margin:10px 50px 100px 200px;
}

.box2{
height:200px;width: 200px;
background-color:red;
}
</style>


<div class="box1">盒子的左和上 外边距会影响自己的位置,盒子的右和下外边距会影响其他盒子的位置</div>
<div class="box2"></div>

外边距垂直方向重叠问题

在网页中垂直方向的相邻外边距会发生外边距的重叠

所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

<style>
.box1,.box2{
width: 200px;
height: 200px;

}

.box1{
background-color:yellow;
margin-bottom:200px;
}
.box2{
background-color:red;
margin-top:200px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

注意:

如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

例如:要求:子元素向下移动100个像素,父元素不动

<style>
.box1{
width: 400px;
height: 400px;
background-color:yellow;
/*解决方法一:border:1px solid Black;*/
/*解决方法二: padding:1px;*/
}
.zi{
width: 200px;
height: 200px;
background-color:red;
margin-top:100px;
}
</style>
<!--
因为父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素,所以父元素也下来了
-->
<div class="box1">
	<div class="zi">
	</div>
</div>

解决方法1:不让他们相邻.给(box1)父元素加一个边框: border:1px solid Black;

解决方法2:不让他们相邻,给(box1)父元素加一个内边距: padding:1px;

解决方法3:给父元素上内边距设置为100 高度减去100

解决方法4:用一个空的<table>标签将他们隔开(div没用,只能用table)

以上四种方式都不是最好的解决方式

最终解决方法:

.clearfix:before,
.clearfix:after{
content:"";
display:table;
clear:both;
}
/*
把 clearfix加到父元素的 class里
既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
*/

内联元素的特性

内联元素不能设置宽高

内联元素可以设置水平方向的内边距、和边框(会正常影响左右的布局)

内联元素可以设置垂直方向的内边距、和边框(但是不会影响页面的布局)

内联元素可以设置水平方向的外边距(水平相邻的外边距不会重叠,会累加)

内联元素不支持垂直方向的外边距

文档流:

(div,H,P等)块元素特性::主要用来做页面布局

在文档流里独占一行(无论宽度设置的多窄,它也会独占一行)

在文档流里默认宽度的值是auto(父元素的100%),默认高度被文档撑开.

在文档流里当宽度为auto时,指定内边距不会影响可见框的大小,而是自动修改宽度,易适应内边距

(span,a,iframe等)行内元素(内联元素)特性:主要用来选择文本来设置样式

只会占用自身的大小,不会占用一整行