<!--
* @Author: your name
* @Date: 2020-08-20 10:27:53
* @LastEditTime: 2020-08-20 11:27:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \democ:\Users\12768\Desktop\calendar_pro\src\views\indexCss.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html/css</title>
<style type="text/css">
/*
*内部盒子垂直居中方法一：
*外层盒子固定宽高，内层盒子继承于外层盒子的宽高，设置为百分之百，
*外层盒子给定一个内边距（padding），就能够使得内层盒子垂直水平居中于外层盒子
*/
.parentBox{
width: 200px;
height: 100px;
padding: 30px;
border: 1px solid #000;
}
.parentBox .childrenCbox{
width: 100%;
height: 100%;
/* 宽高必须一样，才可以实现水平垂直居中 */
background-color: aquamarine;
}
/*案例二*/
/* box-sizing:border-box最早兼容到ie-8 */
.box{
width: 200px;
height: 200px;
padding: 30px;
border: 10px solid #000;
box-sizing: border-box; /*将200px*200px 变成120*120 */
-moz-box-sizing: border-box;
/* firefox */
-webkit-box-sizing: border-box;
/* chrome safari */
-ms-box-sizing:border-box;
/* IE8以下 */
-moz-box-sizing: border-box;
/* presto opera */
}
.box .box1{
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<!-- 内部盒子垂直居中方法一 -->
<div class="parentBox">
<div class="childrenCbox"></div>
</div>
<hr/>
<!-- 案例二 box-sizing: border-box; 用法 -->
<div class="box content-box">
<div class="box1"></div>
</div>
</body>
</html>
** 设置box-sizing:border-box 后**
* padding:30px 20px 10px 5px
* 上 右 下 左
*padding: 30px 20px 10px
* 上 左右 下
*padding: 20px 10px
* 上下 左右
*padding: 30px
* 上下左右
*/
box-sizing: border-box; 将200px200px 变成120120 （把边框跟内边距收到盒子里面去绘制，这样能够准确设定外层盒子的宽高，有利于布局的，不然很容易布局出问题）
*ul,
*li,
*div{
* box-sizing: border-box; //统一设置
* }
* 也就是在盒子内部绘制内边距和边框
* 使用box-sizing:content-box; 还原
* box {
* box-sizing:content-box;
* }
* 实际开发中可以给一个专门处理这个的类(每次遇到这种综合问题的时候，要想到写一个类或者（div）标签样式初始化，这样写才能够服用高),如下：
* .content-box {
* box-sizing: content-box;
* -moz-box-sizing: content-box;
* -webkit-box-sizing:content-box ;
* -ms-box-sizing:content-box;
* -moz-box-sizing:content-box ;
* }
* <div class="box content-box">
* <div class="box1"></div>
* </div>
