search

博客列表 >盒模型 我想认识你

盒模型 我想认识你

培(信仰)
培(信仰)原创
2020年12月21日 22:39:26466浏览

盒模型

padding & margin

可以通过width和height来设置盒子的大小
但是padding和border也影响盒子的尺寸

  1. <div class="box"></div>
  1.     <style>
  2.         :root{
  3.             font-size: 10px;
  4.         }
  5.         .box{
  6.             width: 20em;
  7.             height: 15em;
  8.             background-color: violet;
  9.             /* 给盒子添加padding(内边距),border(边框) */
  11.             padding: 1em;
  12.             border:2px solid;
  13.             /* 将背景裁切到内容区，让padding可视化 */
  14.             background-clip: content-box;
  15.         }
  16.         /* 盒子尺寸的计算公式：width/height + padding*2 + border*2 */
  17.         /* 宽度：200 + 10*2 + 2*2 = 224px
  18.         高度：150 + 10*2 + 2*2 = 174px */
  19.         /* 要想盒子的尺寸不因padding和border值而变化就需要使用IE盒子或者称之为怪异盒子 */
  20.         /* 以前需要加padding和border就把width和height减下去
  21.         .box{
  22.             width: calc(20em - 24px);
  23.             height: calc(15em - 24px);
  24.         }
  25.          */
  27.         .box{
  28.             /* 让用户自己决定计算盒子的方式 
  29.             要不要将padding和border计算在内*/
  30.             /* w3c标准盒子模型，width和border不含padding，border */
  31.             /* box-sizing: content-box; */
  33.             /* 将padding和border计算在盒子尺寸内 */
  34.             box-sizing: border-box;
  35.         }
  36.     </style>

margin只会对页面中的元素位置或多个元素的排列产生影响，对盒子的大小没有影响

  1.     <div class="box"></div>
  2.     <div class="box"></div>
  1.     <style>
  2.         :root {
  3.             font-size: 10px;
  4.         }
  6.         .box {
  7.             width: 20em;
  8.             height: 15em;
  9.             background-color: violet;
  10.             padding: 1em;
  11.             border: 2px solid;
  13.             box-sizing: border-box;
  14.         }
  16.         /* margin对水平排列元素的位置影响 */
  17.         /* margin在水平方向会累加 */
  18.         .box {
  19.             float: left;
  20.         }
  21.         /* margin对垂直排列元素的位置影响 */
  22.         /* 垂直方向是折叠塌陷，大者胜出。 */
  23.         /* margin只会对页面中的元素位置或多个元素的排列产生影响
  24.         ，对盒子的大小没有影响 */
  25.         .box:first-of-type {
  26.             margin:2em;
  27.         }
  29.         .box:first-of-type + * {
  30.             margin:3em;
  31.         }
  33.     </style>

注意 margin在水平方向会累加,垂直方向折叠塌陷，大者胜出.

一般都会对全局的盒子进行设置，为了保证在所有的浏览器上都看上去差不多会去掉所有的margin,padding
记住这三行代码

  1.         * {
  2.             margin:0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }

盒子的高度问题

开发中，尽量不要直接设置高度，用内容将元素撑开

需要设置高度的时候，注意内容溢出问题，根据需要选择不同的设置。

  1.     <div class="box">
  2.         近几年来,随着社会的发展与进步,科技发展迅速,软件技术逐渐得到认可并成为主流技术.软件复用是因在软件开发过程中的劳动重复,因此,利用软件复用的手段帮助提高软件开发的效率和质量.软件复用和软件构件技术一直受到行业内部的关注,笔者就对此进行了探究,分别研究了软件复用和软件构件技术,探讨了两者之间的关系,并对未来进行了展望,希望能够为软件行业发展提供有效思路.
  3.     </div>
  1.     <style>
  2.         :root {
  3.             font-size: 10px;
  4.         }
  6.         .box {
  7.             width: 20em;
  8.             height: 15em;
  9.             background-color: lightcyan;
  10.             border: 1px solid #000;
  11.             /* visible:默认值，默认显示溢出内容：*/
  12.             overflow: visible;
  14.             /* hidden:隐藏溢出内容  */
  15.             overflow: hidden;
  17.             /* 使用滚动条查看被隐藏的内容 */
  18.             /* 几乎不用 */
  19.             overflow: scroll;
  20.             /* 用的少 */
  21.             /* overflow-y: scroll;
  22.             overflow-x: scroll; */
  24.             /* 当内容少时滚动条消失 */
  25.             overflow: auto;
  26.         }
  27.     </style>

注意：
overflow: hidden;
overflow: auto;

容器最小高度与最大高度

  1.     <div>
  2.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  3.     </div>
  4.     <div>
  5.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  6.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  7.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  8.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  9.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  10.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  11.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  12.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  13.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  14.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  15.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  16.     </div>
  17.     <div>
  18.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  19.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  20.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  21.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  22.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  23.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  24.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  25.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  26.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  27.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  28.         截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
  29.     </div>
  1.        body > * {
  2.             margin:1em;
  4.         }
  6.         body div {
  7.             border: 1px solid #000;
  8.             /* 默认高度由内容撑开 */
  9.             height: auto;
  10.         }
  12.         body div:first-of-type {
  13.             height: auto;
  14.         }
  15.         body div:nth-of-type(2){
  16.             min-height: 5em;
  17.             /* 只限制最小高度未限制最大高度
  18.             当内容超过最小高度时会自动伸展
  19.             当内容不足时使用最小高度，
  20.             保证页面不会塌陷 */
  21.         }
  22.         body div:nth-of-type(2)+*{
  23.             max-height: 6em;
  24.             overflow: auto; 
  25.         }
  26.         /* 与上面等效 */
  27.         /* body div:nth-of-type(3){
  28.             max-height: 6em;
  29.             overflow: auto;
  30.         } */
  31.     </style>

注意： 使用max-height时一定要考虑内容溢出问题

水平居中问题

  1. <   div class="box">
  2.         <a href="">php.cn</a>
  3.         <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png"  alt="这是行内块元素img">
  4.     </>
  1.         .box {
  3.             width: 15em;
  4.             height: 15em;
  5.             border: 1px solid #000;
  7.         }
  8.         /* 1. 行内或者行内块水平居中 */
  9.         .box {
  10.             text-align: center;
  11.         }
  12.         img {
  13.             width: 10em;
  14.         }
  1. 行内元素或行内块元素可以直接设置父元素的text-align: center;
  1.     <div class="box">
  2.         <div></div>
  3.     </div>
  1.         /* 使用margin来实现块元素的水平居中 */
  2.         .box>div {
  3.             /* auto:这个值由浏览器根据上下文自动计算
  4.             将父元素左边的空间尽可能给自己的margin-left，也就是说本元素停靠右边
  5.             同理：margin-right就尽可能给自己的右边也就是说元素停靠左边 */
  6.             /* margin-left: auto; */  
  8.             /* 所有向左向右挤可以水平居中 */
  9.             /* margin-left: auto;
  10.             margin-right: auto; */
  12.             /* 一般不这么写，可以直接margin：0 auto; */
  13.             margin: 0 auto;
  14.             /* 二值法：第一个是上下，第二个是左右 */
  15.         }
  1. 行内块元素使用margin来设置,margin: 0 auto;以后都使用这种方法。

垂直居中

方法：行内元素不能设置高，一定要设置父元素的高，只要将行内元素的 line-height 的值与父元素一样就可以实现垂直居中 ，但是行内块元素无效

  1.         .box a {
  2.             line-height: 15em;
  3.         }

img 当块元素处理，此时父元素一定不能给高度，由padding挤出来。

  1. <div class="box">
  2.         <!-- <a href="">php.cn</a> -->
  3.         <div></div>
  4.         <!-- <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt=""> -->
  5.     </div>
  1.         .box {
  2.             padding: 5em 0;
  3.         }
  4.         .box div {
  5.             width: 5em;
  6.             height: 5em;
  7.             background-color: yellow;
  9.         }

水平和垂直都居中

行内元素

  1. 通过设置父元素的,text-align: center;
    和line-height 等于父元素的高即可
  1. <div class="box"><a href="">php.cn</a></div>
  1.     <style>
  2.     /* 1. 行内元素的水平居中，设置父元素的 text-align: center; */
  3.     .box {
  4.         width: 15em;
  5.         height: 15em;
  6.         border: 1px solid #000;
  7.         text-align:center;
  8.         line-height: 15em;
  9.     }
  10.     </style>
  1. 通过父元素的padding,撑出居中的效果
  1.     <div class="box">
  2.         <div></div>
  3.     </div>
  1.     .box {
  2.         width: 6em;
  3.         border: 1px solid #000;
  4.         padding:5em;
  5.     }
  6.     .box > div{
  7.         width: 2em;
  8.         height: 2em;
  9.         background-color: violet;
  10.     }
  1. 通过子元素的margin，撑出居中效果；使用相对定位。
  1.     <div class="box">
  2.         <div></div>
  3.     </div>
  1.     .box {
  2.         height: 5em;
  3.         position: relative;
  4.         border: 1px solid black;
  5.     }
  6.     .box > div{
  7.             width: 2em;
  8.             height: 2em;
  9.             background-color: violet;
  11.             position: absolute;
  12.             top: 0;
  13.             left: 0;
  14.             right: 0;
  15.             bottom: 0;
  17.             margin: auto;
  18.     }

注意 使用定位和margin时需要设置子元素的top,left,right,bottom为0；

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

相关文章

查看更多