《2018年9月7日》【连续339天】
标题:盒子模型和层模型;
内容:
早起了。
盒子模型:
<body>
<!-- 盒子模型 -->
<!-- 盒子的四大部分:
盒子的组成部分:
盒子壁:border
内边距:padding
盒子内容:width+height;
margin +border +padding +(content) -->
<div>香菜!</div>
</body>
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding: 100px;
margin: 100px;
}
求可视区宽高:
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding: 10px 20px 30px;
margin: 10px 20px;
}
/*realWidth:160px
realHeight:160px*/
绝对定位:
<!-- 绝对定位 -->
<!-- 1.脱离原来位置(层)进行定位 -->
<div class="demo"></div>
<div class="box"></div>
*{
margin: 0; /*body有初始margin韦8px;*/
padding: 0;
}
.demo{
position: absolute; /*绝对定位;*/
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.box{
width: 150px;
height: 150px;
background-color: green;
}
相对定位:
<!-- 相对定位 -->
<!-- 2.保留原来位置进行定位; -->
<div class="demo"></div>
<div class="box"></div>
demo{
position: relative; /*绝对定位;*/
left: 100px;
top:100px;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.box{
width: 150px;
height: 150px;
background-color: green;
}
<!-- absolute相对于最近的定位父级元素定位,如果没有,相对于文档定位; -->
<!-- relative相对于自己原来位置定位 -->
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
.wrapper{
margin-left: 100px;
width: 200px;
height: 200px;
background-color: orange;
}
.content{
margin-left: 100px;
width: 100px;
height: 100px;
background-color: black;
}
.box{
position: absolute;
left: 50px;
width: 50px;
height: 50px;
background-color: yellow;
}
一般有relative当作基底,absolute定位。