css 1) calc() 函数的使用. 2)box-sizing:border-box

2021-07-19 15:54:58

calc() 是一个css 函数, 可以实现.计算

----------------------------

1. 每个div宽度是25%; 总共4个div. 同时前三个div 有 border-right 为 3px.

方案一:

前三个div 的width是 25% - 3px , border-right 是 3px; 最后一个,第四个 div 的width 是 25%, 没有 border-right.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>calc使用1</title>

     <style type="text/css">

         /***1: 初始样式设置*******/

         html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         /*******2: 清除浮动******/

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

         /***3: 超出长度显示省略号. 还需要设置width**/

         .ellipsis {

             text-overflow: ellipsis;

             overflow: hidden;

             white-space: nowrap;

         }

         /*********内容********/

         .all {

             width: 500px;

             height: 800px;

             margin: 0px auto;

             border: 1px solid black;

             position: relative;

         }

         .cell {

             width: calc(25% - 3px);

             background-color: blue;

             float: left;

             text-align: center;

             height: 30px;

             line-height: 30px;

             border-right: 3px solid red;

         }

         /*最后一个cell*/

         div.cell:nth-child(4) {

             width: 25%;

             border: 0px;

         }

     </style>

     <!-- 引入js文件 -->

     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

 </head>

 <body>

     <div class="all">

         <div class="footer floatfix">

             <div class="cell">按钮1</div>

             <div class="cell">按钮2</div>

             <div class="cell">按钮3</div>

             <div class="cell">按钮4</div>

         </div>

     </div>

 </body>

 </html>

效果:

这种: 第四个的宽度比前三个多 3px;

第一个: width 是 122px .border-right : 3px

第四个: width 125px;

方案二:

总的长度是 500px, 有 3个border-right . 3 * 3px = 9px . 所有每个 div 的width 是 ( 500px - 9px ) / 4 = 122.75px

这种方案比上面一种方案更适合题意.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>calc使用1</title>

     <style type="text/css">

         /***1: 初始样式设置*******/

         html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         /*******2: 清除浮动******/

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

         /***3: 超出长度显示省略号. 还需要设置width**/

         .ellipsis {

             text-overflow: ellipsis;

             overflow: hidden;

             white-space: nowrap;

         }

         /*********内容********/

         .all {

             width: 500px;

             height: 800px;

             margin: 0px auto;

             border: 1px solid black;

             position: relative;

         }

         .cell {

             width: calc((100% - 3 * 3px) / 4);

             background-color: blue;

             float: left;

             text-align: center;

             height: 30px;

             line-height: 30px;

             border-right: 3px solid red;

         }

         /*最后一个cell*/

         div.cell:nth-child(4) {

             border: 0px;

         }

     </style>

     <!-- 引入js文件 -->

     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

 </head>

 <body>

     <div class="all">

         <div class="footer floatfix">

             <div class="cell">按钮1</div>

             <div class="cell">按钮2</div>

             <div class="cell">按钮3</div>

             <div class="cell">按钮4</div>

         </div>

     </div>

 </body>

 </html>

width: calc((100% - 3 * 3px) / 4);

显示:

查看元素:

2. 兼容写法:

  .elm {

     /*Firefox*/

     -moz-calc(expression);

     /*chrome safari*/

     -webkit-calc(expression);

     /*Standard */

     calc();

  }

3.方法三: 通过设置box-sizing:border-box;进行设置

通常情况下:

1) 默认 box-sizing 是 content-box . 因此我们设置的高度 , 宽度指的是 content-box 的高度,宽度, ;

2) 如果将 box-sizing 设置为 border-box . 那么我们设置的高度 = 内容高度 + 边框高度 + 内边距高度

---------------------------------

这种前三个div 内容宽度是 122px, border-right是 3px;; 第4个内容宽度是 125px, 没有border .

------------------

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>box-sizing的使用</title>

     <style type="text/css">

         /***1: 初始样式设置*******/

         html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         /*******2: 清除浮动******/

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

         /***3: 超出长度显示省略号. 还需要设置width**/

         .ellipsis {

             text-overflow: ellipsis;

             overflow: hidden;

             white-space: nowrap;

         }

         /*********内容********/

         .all {

             width: 500px;

             height: 800px;

             margin: 0px auto;

             border: 1px solid black;

             position: relative;

         }

         .cell {

             -webkit-box-sizing: border-box;

             -moz-box-sizing: border-box;

             box-sizing: border-box;

             width: 25%;

             background-color: blue;

             float: left;

             text-align: center;

             height: 30px;

             line-height: 30px;

             border-right: 3px solid red;

         }

         /*最后一个cell*/

         div.cell:nth-child(4) {

             border: 0px;

         }

     </style>

     <!-- 引入js文件 -->

     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

 </head>

 <body>

     <div class="all">

         <div class="footer floatfix">

             <div class="cell">按钮1</div>

             <div class="cell">按钮2</div>

             <div class="cell">按钮3</div>

             <div class="cell">按钮4</div>

         </div>

     </div>

 </body>

 </html>