box-sizing
box-sizing让用户自己决定计算盒子大小的方式(要不要padding,border计算在内)
box-sizing:border-box设置盒子的长度值，将盒子的padding和border计算在长度内，这种盒子模型最早是由微软的IE浏览器实现的，称之为IE盒子模型。而这中IE盒子与w3C的标准盒子不一样，又被称为怪异盒模型
<style>*{/*全局使用IE盒子模型 border-box是元素设置宽高就包含padding和border*/box-sizing:border-box;}.box{width:20px;height:30px;background-color:violet;}.box{padding:5px;border:2px solid;background-clip:content-box;}</style><body><div class="box"></div></body>
元素高度：内容超出了怎么办？
文档流：是元素默认布局方式
当元素里内容过多，显示不出来时，可以设置overflow属性。overflow:visible显示溢出的内容。hidden隐藏溢出的内容。
常用元素居中方式
水平居中
1.行内或行内块水平居中
设置父元素的text-align:center;属性
2.块元素的水平居中
使用margin来实现块的水平居中，挤压式的居中
设置块元素的margin:0 auto;
垂直居中
1.行内或行内块垂直居中
设置line-height和父元素的height值一样。
2.块元素的垂直居中
使用padding属性，父元素不要设置高度，应该由padding挤出来。padding:值 0;padding的值视情况而定
<style>.box{width:15em;height:15em;border:1px solid #000;}/*行内或行内水平居中*/.box{text-align:center;}/* 2.块元素的水平居中 */.box>div{width: 5em;height: 5em;background-color: yellow;}/* 使用margin来实现块的水平居中,挤压式的居中 */.box>div{/* auto:这个值由浏览器根据上下文自动计算 */margin-left: auto;margin:0 auto;}/*行内元素垂直居中*/.box a{/*值跟父元素的height高一样大小*/line-height:15em;}/*块元素垂直居中*/.box{padding:5em 0;}</style><body><div class="box"><a>php.cn</a><div></div></div></body>
水平且垂直的解决方案
1.行内元素的水平且垂直
text-align+line-height
2.padding实现水平和垂直居中
让padding的四个值相等。
3.margin来实现
父元素的position:relative;
子元素的position:absolute;
top:0;left:0;right:0;bottom:0;margin:auto;
<style>/* 1.行内元素的水平且垂直 *//* text-align + line-height */.box{width: 15em;height: 15em;border: 1px solid #000;}.box{text-align: center;line-height: 15em;}/* 2.padding 实现水平和垂直居中 */.box{padding:5em;}.box>div{width: 5em;height: 5em;background-color: yellow;}/* 3.margin来实现 */.box{position: relative;}.box div{position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;}</style><body><div class="box"><a href="">php.cn</a><div> </div></div></body>