码迷,mamicode.com
首页 > Web开发 > 详细

【CSS3】css3:box-sizing属性

时间:2016-12-01 22:17:09      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:ted   version   contract   str   color   计算   支持   属性   mozilla   

本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围。

浏览器的支持情况

BrowserSupporedNotes
Internet Explorer Yes version 8.0
Mozilla Firefox Yes 29.0
2.0 -moz-
chrome Yes 10.0
4.0 -webkit-
opera Yes version 9.5
Safari Yes 5.1
3.2 -webkit-

 

box-sizing属性

 

box-sizing属性可以有三个值:content-box(defalut),border-box属性。

  1. content-box,border和padding不计算入width之内。
  2. border-box,border和padding计算入width之内。
技术分享
  <style>
      div{
        width:100px;
        height:100px;
        border:20px solid yellow;
        padding:20px;
        background:green;
        background-clip:content-box;

      }
      .content-box{
        box-sizing:content-box;
        }
      .border-box{
        box-sizing:border-box;
      }
    </style>
View Code

 


效果截图:

技术分享

【CSS3】css3:box-sizing属性

标签:ted   version   contract   str   color   计算   支持   属性   mozilla   

原文地址:http://www.cnblogs.com/HDK2016/p/6123529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!