盒子模型和div布局

时间:2020-12-10 05:28:35

盒子模型和div布局

background的覆盖范围是content区域加上padding区域加上border区域(border-color:transparent设置透明后可以看到)。

许多浏览器都有自己默认的margin和padding值,我们可以通过将元素的margin和padding设置为0来覆盖原本的浏览器样式。

* {
  margin: 0;
  padding: 0;
}


float:

当一个div容器里没有内容且不指明width时,他的宽度默认100%,但是当为这个div设置float:left时,width值变为0.

对于兄弟级别的div:

1.每个div原本都是独占一行的

                                                                  盒子模型和div布局
2.但是当前一个节点的div设置float:left;时,后div将出现在第一个div的下面。原因:第一个div漂浮起来了(float),它原本的位置就空出来了,于是第二个div就占据了第一个的位置,所以他们的状态是一种重叠的状态。

                                                                  盒子模型和div布局

3.当所有兄弟级别的div都设置float:left;时,每个div就失去了独占一排的状态,可以并排存在。

                                                                 盒子模型和div布局

对于父子级别的div:

1.如果不指定父元素的高度,则父元素的高度为0,因为子元素漂浮起来,并没有把父元素撑开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
     #father{
     	width: 250px;
     	background:purple;
     }
     #child1{
     	width: 100px;
        height: 100px;
     	background: orange;
     	float: left;
     }
     #child2{
     	background: green;
     	width: 200px;
     	height: 200px;
     	float:left;
     }
</style>
</head>
    <body>
         <div id = "father">
            <div id = "child1"></div>
            <div id = "child2"></div>
         </div>   
    </body>
</html>
                                                                           盒子模型和div布局

2.如果指定了父元素的高度,则父元素保持原高度不变.同理,子元素浮动并不能撑开父元素。

浮动子元素在父容器内的排列规则:浮动元素优先排一列,若宽度溢出父容器则另起一行排列。若竖排列子元素合高度若大于父元素高度,则向下溢出。
                                                                        盒子模型和div布局

3..如果子元素没有浮动效果且父元素高度没有指定大小,则父元素会被撑开

                                                                          盒子模型和div布局