search

博客列表 >盒模型与常用的居中方式

盒模型与常用的居中方式

咸鱼老爷
咸鱼老爷原创
2021年02月28日 12:54:182558浏览

盒模型

影响盒子大小的因素

padding内边距
border边框

  1. 将背景色裁切到内容区,让padding可视化
  2. background-clip:content-box

盒子尺寸多大小的计算公式:width/height + padding2 +border2
一般减去padding和border的值就是盒子内容 calc();

ie盒模型

box-sizing:让用户自己决定计算盒子大小的方案

  1. .box{
  2.     box-sizing:content-box;标准盒模型  不计算border,padding
  3.     box-sizing:border-box;ie盒模型 padding,border计算在盒子大小内
  4. }
  1.  <style>
  2.         .box {
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: cyan;
  6.             padding: 5px 10px 15px 20px;
  7.             background-clip: content-box;
  8.             border: 1px solid #ddd;
  9.             box-sizing: border-box;
  10.         }
  11.     </style>
  13. <body>
  14.     <div class="box"></div>
  15. </body>

效果图

marigin 对盒子位置的影响

margin:上 右 下 左
margin塌陷 大者胜出
margin只会对页面中的元素的位置或者多个元素的排列产生影响,对盒子大小无影响

常见居中方式

行内居中

水平居中

无论是行内元素还是行内块元素 使用text-align: center都可以实现居中；

  1.  <style>
  2.         .box {
  3.             width: 15em;
  4.             height: 15em;
  5.             border: 1px solid #ccc;
  6.         }
  7.         .box {
  8.             text-align: center;
  9.         }
  10.     </style>
  11. <body>
  12.     <div class="box">
  13.         <a href="">这是内容</a>
  14.     </div>
  15. </body>

效果图

垂直居中

设置一个行高等于容器的高度即可，

  1. <style>
  2.         .box {
  3.             width: 15em;
  4.             height: 15em;
  5.             border: 1px solid #ccc;
  6.         }
  7.         .box {
  8.             text-align: center;
  9.             line-height: 15em;
  10.         }
  11.     </style>
  13.     <body>
  14.         <div class="box">
  15.             <a href="">这是内容</a>
  16.         </div>
  17.     </body>

效果图

块元素居中

水平居中

使用maigin：0 auto;意味上下间距为0，左右间距自动

  1. <style>
  2.   .box {
  3.             width: 15em;
  4.             height: 15em;
  5.             border: 1px solid #ccc;
  6.         }
  7.         .box>div {
  8.             width: 5em;
  9.             height: 5em;
  10.             background-color: yellow;
  11.             margin: 0 auto;
  12.         }
  13.     </style>
  14. <body>
  15.     <div class="box">
  16.         <div></div>
  17.     </div>
  18. </body>

效果图

垂直居中

1、padding方法：父容器不要设置高度，由子元素撑开，给父元素设置上下相等的内边距即可实现垂直居中

  1.  <style>
  2.         .box {
  3.             width: 15em;
  4.             border: 1px solid #ccc;
  5.             padding: 5em 0;
  6.             box-sizing: border-box;
  7.         }
  8.         .box>div {
  9.             width: 5em;
  10.             height: 5em;
  11.             background-color: yellow;
  12.             margin: 0 auto;
  13.         }
  14.     </style>
  16.     <body>
  17.         <div class="box">
  18.             <div></div>
  19.         </div>
  20.     </body>

效果图

2、margin方法 使用定位

  1. <style>
  2. .box {
  3.             position: relative;
  4.             width: 15em;
  5.             border: 1px solid #ccc;
  6.             padding: 5em 0;
  7.             box-sizing: border-box;
  8.         }
  9.         .box>div {
  10.             width: 5em;
  11.             height: 5em;
  12.             background-color: yellow;
  13.             position: absolute;
  14.             top: 0;
  15.             left: 0;
  16.             right: 0;
  17.             bottom: 0;
  18.             margin: auto;
  19.         }
  20.     </style>
  22.     <body>
  23.         <div class="box">
  24.             <div></div>
  25.         </div>
  26.     </body>

效果图

上一条：定位的类型与应用场景和使用条件下一条：rem 、em、vh、 vw
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多