html-02

盒子模型

• body有个天生的8px
• 盒子壁 border给盒子加边框，可以设置4个方向
• 内边距 padding内边距之间不能放内容，可以设置4个方向
• 盒子内容 width+height
• 内容区
• 盒子模型大小计算 margin外边框不可视，所以不用计算
• 如果进行计算，可以解决远视图问题

.content1{
    width: 10px;
    height: 10px;
    background-color: #fff;
}
.content{
    width: 10px;
    height: 10px;
    background-color: #0f0;
    padding: 10px;


}
.box{
    width: 30px;
    height: 30px;
    background-color: #fff;
    padding: 10px;
}
.wrapper{
    width: 50px;
    height: 50px;
    background-color: #0f0;
    padding: 10px;
}

层模型

• 元素属性有一个属性叫position,将值改为absolute，同时有top和left两个属性定位位置，即距离上边距多少，距离下边距多少，叫做绝对定位，特点，脱离原来位置进行定位，相对于最近有定位的父级进行定位，如果没有就相对于文档进行定位

*{
    margin: 0px;
    padding: 0px;
}
.demo{
    position:absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.5;
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

• position属性变成relative，保留原来位置进行定位，相对于原来位置进行定位
• 属性变为fixed，广告定位，不受滑块影响

div{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: -50px;
    margin-top: -50px;
}

• 实例：

  <div class="color">
          <div class="blue"></div>
          <div class="yellow"></div>
          <div class="black"></div>
          <div class="green"></div>
          <div class="red"></div>
      </div>
*{
    margin: 0px;
    padding: 0px;
}
.blue{
    width: 100px;
    height: 100px;
    border: 10px solid blue;
    border-radius: 50%;
    position: absolute;
    right: 125px;
    bottom: 0px;
    z-index: 0;
}
.yellow{
    width: 100px;
    height: 100px;
    border: 10px solid yellow;
    border-radius: 50%;
    position: absolute;
    right: 50px;
    top: 50px;
    z-index: 1;
}
.black{
    width: 100px;
    height: 100px;
    border: 10px solid black;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 0;
}
.green{
    width: 100px;
    height: 100px;
    border: 10px solid green;
    border-radius: 50%;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 1;
}
.red{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 50%;
    position: absolute;
    left: 125px;
    bottom: 0px;
    z-index: 0;
}
.color{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background-color: white;
    margin-left: -50px;
    margin-top: -50px;
}

• 第二种方法

*{
    margin: 0px;
    padding: 0px;
}
.red,.green,.black,.yellow,.blue{
    position: absolute;
    width: 100px;
    height: 100px;
    border: 10px solid black;
    border-radius: 50%;
}
.blue{
    border-color: blue;
    left:0px;
    top: 0px;
}
.yellow{
    border-color: yellow;
    left: 130px;
    top: 0px;
}
.black{
    border-color: black;
    left: 260px;
    top: 0px;
}
.green{
    border-color: green;
    left: 65px;
    top: 70px;
}
.red{
    border-color: red;
    left: 195px;
    top: 70px;
}
.color{
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -190px ;
    margin-top: -93px;
    width:380px;
    height:186px;
}

• 两栏布局，先写定位元素，后写其他元素
• 垂直方向的margin会父子融合，解决方法，margin塌陷

一给父元素加框，强行解决，给上面加蓬
二用bfc，在特殊的盒子里进行规则改变
如何触发一个盒子的bfc(改变渲染规则)
1. position:absolute
2. display: inline-block
3. float:left/right
4. overflow:hidden

• 横向是区域分开，纵向区域是合并的，举个例子就是你设置同行之间块之间相差15px距离，实际上相差的是30px，如果你同样设置上下块之间的话，就是15px

1. 解决方法是在上面加盖，加父元素： overflow:hidden添加这个属性
2. 直接通过数学计算就行
.box1{
    background-color: green;
    margin-right: 100px;
}
.box2{
    background-color: red;
    margin-left: 100px;
}
.demo1{
    background-color: red;
    margin-bottom: 100px;
}
.demo2{
    background-color: green;
    margin-top: 100px;
}