html里面盒子计算大小,盒子大小 以及 常用元素居中方式说明演示

盒子大小：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:2pxsolid;

将背景色裁切到内容区，让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)

}

`

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盒子模型。

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

height:100vh;

border:2px solid red;

}

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

文档流：块元素是垂直排列，由上往下。 行内元素是从左向左排列，如果一行排不下换行继续。

用内容将元素的高度撑开，而不是直接设置高度。

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'

}