盒子大小 以及 常用元素居中方式说明演示

盒子大小

：root{font-size；10；}
.box{width:20em
height:15em
background-color:red}

上述代码此时盒子大小宽200px 高150px

影响盒子大小的因素

给盒子添加padding(内边距)，border(边框)
.box{padding:1em border:2px solid; }

盒子最大尺寸的计算公式：

width/height+ padding2 +border2

box-sizing 控制盒子计算方式

.box
{width:20em;
height:15em;
background-color:violet;
}
给盒子添加padding 内边距，border 边框
.box
{
padding:1em;
border:2px solid;

将背景色裁切到内容区，让padding可视化
background-clip: content-box; }
盒子尺寸的计算公式
width/height+padding2+border2
宽度200+102+22=114
高度150+102+22=174
希望这两个参数是固定值，不受这两个参数之外的影响。

    width:calc(20em - 24px)
    height:calc(15em - 24px)
}
`
<div class="box"></div>
<div class="box"></div>

css制定了新属性来定义盒子大小。
box-sizing:让用户决定盒子的大小，不将padding border计算在内。

box-sizing: content-box； W3C标准盒子模型，高宽不含padding和border.
box-sizing: border-box； IE盒子，直接到边框的。包含边框和内边距。

margin对盒子位置的影响

.box{
width:20em;
height:15em;
background-color:violet;
padding:1em
box-sizing:border-box;
}

margin对水平排列的元素的位置的影响
水平方向：margin累加
垂直方向：margin折叠，折叠之后，大者胜出。
margin只会对页面中的元素的位置或多个元素的排列产生影响，对盒子大小无影响。

    float:left;
}
.boxfirst-of-type{
    margin:2em;}
.box:first-of-type+*{
    margin:3em;}

全局的盒子大小的设置

全局使用IE盒子模型。

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    height:100vh;
    border:2px solid red;
}
<style>

元素的高度:内容超出怎么办？

文档流：块元素是垂直排列，由上往下。 行内元素是从左向左排列，如果一行排不下换行继续。
用内容将元素的高度撑开，而不是直接设置高度。

min-height:5em
只限制最小高度未限制最大高度
当内容超过最小高度时，自动伸展。
当内容不足时使用最小高度，保证页面不会塌陷

max-height:5em
这时我设置了最大高度，超过了这个高度的内容就溢出
overflow: auto

水平居中问题

.box{width:15em; height:15em; border:1px solid #000;}

1、行内或行内块水平居中
.box{
text-align:center;
}
2、块元素的水平居中
.box{
width:5em;
height:5em;
background-color:yellow;

使用maring来实现块的水平居中,挤压式的居中。

.box>div 这个值由浏览根据上下文自动计算。
margin-left: auto；
margin-right: auto;
margin:0 auto; 于上两行代码效果一样。
}

垂直居中问题:行内元素

行内元素行高 和 容器高度设置一样就可以实现行内元素的垂直居中，但图片无效。

块元素垂直居中：
使用padding来居中，不要设置高度，让它自己撑开。
.box{padding: 5em 0;}

水平且垂直的解决方案

1、行内元素的水平垂直
text-alingn 加 line-height

2、
padding实现水平垂直居中

.box{
width:auto;
height:auto;
padding:5em;}

3、margin来实现

position:relative;
.box.div{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0'
    margin:auto'
}