PHP教学-盒子模型与背景控制

* 默写盒模型的全部属性,并准确说出他们的应用场景 

width:宽度    height:高度    background:背景     padding:内边距    border:边框    margin:外边距

 * `box-sizing`: 解决了什么问题, 不用它应该如何处理 

使用box-sizing:使用box-sizing之后，盒子宽高不会改变，不管内边距边框外边距是多少，盒子最终大小都是css文件设置的最初的宽高。不会把盒子大小撑大！

/*盒模型*/

.box1 {
   border: 10px solid green;
}

.box1{
   width: 300px;
   /*width: 300px;*/
   height: 300px;
   background-color: lightblue;
}

/*!*300+10+10=320px*!*/

/*.box1{*/
/*    width: 240px;*/
/*    height: 240px;*/
/*}*/

.box1>img{
   width: 100%;
}

/*.box1{*/
/*    padding: 20px;*/
/*}*/

/*box-sizing*/
.box1{
   box-sizing: border-box;
}

不用box-sizing的话，要手动修改盒子的宽高：

/*盒模型*/

.box1 {
   border: 10px solid green;
}

.box1{
   width: 300px;
   /*width: 300px;*/
   height: 300px;
   background-color: lightblue;
}

/*300+10+10=320px*/

.box1{
   width: 280px;
   height: 280px;
}

.box1>img{
   width: 100%;
}

内边距增加20px之后：需要手动修改为

/*盒模型*/

.box1 {
   border: 10px solid green;
}

.box1{
   width: 300px;
   /*width: 300px;*/
   height: 300px;
   background-color: lightblue;
}

/*300+10+10=320px*/

.box1{
   width: 240px;
   height: 240px;
}

.box1>img{
   width: 100%;
}

.box1{
   padding: 20px;
}

-------------------------    

 * 盒子外边距之的合并是怎么回事,并实例演示

外边距不会影响盒子大小，只会影响到盒子在页面中的位置！

mb=margin-bottom，下外边距

mt-margin-top,上外边距

外边距合并是外边距塌陷，是.box1的下外边距和.box2上外边距同时存在时出现的外边距相加的情况

 * 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理

子盒子想要改变位置，要在父盒子中添加内边距pt=padding-top

外边距由内向外进行传递，如果想在子元素中添加外边距，要在父元素中添加内边距

div{
   box-sizing: border-box;
}

.box1{
   width: 100px;
   height: 100px;
   background-color: lightblue;
}
.box2{
   width: 150px;
   height: 150px;
   background-color: lightgreen;
}

.box1{
   /*添加下外边距*/
   margin-bottom: 20px;

}
/*添加上外边距*/
.box2{
   margin-top: 30px;
}

.box3{
   width: 200px;
   height: 200px;
   background-color: lightblue;

}
.box4{
   width: 150px;
   height: 150px;
   background-color: lightgreen;
}

.box3{
   /*margin-top: 30px;*/
   padding-top: 30px;
}

.box5{
   border: 2px solid gray;
}
.box6 {
   width: 300px;
   height: 150px;
   background-color: lightgreen;
}
.box6{
   /*margin-left: auto;*/
   margin: 10px auto;
   /*margin-right: auto;*/
}

 * 实例演示: 背景颜色的线性渐变的 

{
   box-sizing: border-box;
   width: 450px;
   height: 580px;
   border: 1px solid gray;
}

.box{
   background-color: lightblue;
}

 /*背景裁切*/

.box{
   /*background-clip: border-box;*/
   /*background-clip: padding-box;*/
   background-clip: content-box;
}


/*背景色的渐变*/

.box{
   /*从绿到白渐变,从左到右*/
   /*background: linear-gradient( to right,green,white);*/
   /*向右下方渐变*/
   /*background: linear-gradient(to right bottom,green,white);*/
   /*角度渐变*/
   /*background: linear-gradient(30deg,green,white);*/
   /*连续渐变 */
   background: linear-gradient(red,green,white,blue);
}
/*径向渐变*/
.box{
   /*background: radial-gradient(white,red,yellow,greenyellow);*/
   /*background: radial-gradient(100px 100px,white,red,yellow,greenyellow);*/
   background: radial-gradient(at left top,white,red,yellow,greenyellow);
}

* 例演示: 背景图片的大小与位置的设定

.box{
   box-sizing: border-box;
   width: 450px;
   height: 580px;
   border: 1px solid gray;
}

.box{
   background-color: lightblue;
}

.box{
   /*background-clip: border-box;*/
   /*background-clip: padding-box;*/
   background-clip: content-box;
}

.box{

}

/*背景色的渐变*/
.box{
   /*从绿到白渐变,从左到右*/
   background: linear-gradient( to right,green,white);
   /*向右下方渐变*/
   /*background: linear-gradient(to right bottom,green,white);*/
   /*角度渐变*/
   /*background: linear-gradient(30deg,green,white);*/
   /*连续渐变 */
   /*background: linear-gradient(red,green,white,blue);*/
}
/*径向渐变*/
.box{
   /*background: radial-gradient(white,red,yellow,greenyellow);*/
   /*background: radial-gradient(100px 100px,white,red,yellow,greenyellow);*/
   /*background: radial-gradient(at left top,white,red,yellow,greenyellow);*/
}

/*背景图片*/
.box{
   background-image: url("../images/dog.jpg");
   /*设置背景图片是否重复以及重复方向*/
   background-repeat: no-repeat;
   /*设置背景图片显示位置*/
   /*background-position: center center;*/
   /*background-position: left center;*/
   /*background-position: 75px 75px;*/
   /*background-position: 50% 50%*/
   /*设置图片大小*/
   /*background-size: cover;*/
   background-size: contain;
}

.box{
   background: lightblue url("../images/dog.jpg") no-repeat center center ;
}
.box{
   background-size: cover;
}