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

使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding

时间:2017-06-03 14:11:09      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:pad   指定   head   示例   应该   继承   ext1   需要   text   

  • 默认情况下,内部元素(如:input)的宽度或高度,是不会包含元素的边框和内边距的,这是就需要使用 box-sizing 属性设置该元素。

 

  • box-sizing 是 CSS3 的属性,可以设置以上值:
  1. content-box: 元素 size 不包含 border 和 padding,默认值。
  2. border-box: 元素 size 包含 border 和 padding。
  3. inherit: 指定box-sizing属性的值,应该从父元素继承。

 

1)   示例1(不使用 box-sizing 属性):

  1. HTML
  2. 效果如图:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style type="text/css">
        #div1{
            width: 300px;
            height: 100px;
            border: solid 1px blue;
        }
        #text1, #text2{
            width: 100%;
        }
        #text2{
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <input type="text" id="text1" value="abc"/>
        <input type="text" id="text2" value="abc"/>
    </div>
</body>
</html>

 

  1. 可以发现,内部元素的宽度已经超过父元素宽度。

 

2)   示例2(使用 box-sizing 属性):

  1. 只需要加入如下样式
  2. 效果如图:
#text1, #text2{
    width: 100%;
    box-sizing: border-box;
}

 

  • 总结:木有^_^,会用就行。。

使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding

标签:pad   指定   head   示例   应该   继承   ext1   需要   text   

原文地址:http://www.cnblogs.com/abeam/p/6936964.html

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