box-size 属性

最新推荐文章于 2023-10-20 16:17:48 发布

w_y_d123456

最新推荐文章于 2023-10-20 16:17:48 发布

阅读量1.7k

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/w_y_d123456/article/details/62043634

版权

css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

css3 box-sizing属性

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

使用时：

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

栗子：


   
   
    
    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
       box-sizing:border-box;
  }
       .content{
        
         width:300px;
   height:300px;
   background-color:red;
   
   
   
   
    
        }
    .aside{
        width:100px;
     height:200px;
     background-color:green;
     float:left;
    }
    .article{
    
     width:200px;
     height:200px;
     background-color:blue;
     float:right;
     border:50px solid #ccc;
     padding:5px;
    }.section{
          position:fixed;
    left:400px;
    top:10px;
             border:1px solid black;
           width:100px;
   height:100px;
   float:right;
   background-color:yellow;
    }
  </style>
 </head>
 <body>
    <div class="content">
      <div class="aside">aside</div>
   <div class="article">article</div>
  
 
 </div>
  <div class="section">section</div>
 </body>
</html>

截图（ff）：

w_y_d123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
box-size 属性

css3 box-sizing属性box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width之内padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模
复制链接

扫一扫