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

默认情况下，内部元素（如：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.   效果如图：

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

 

2)   示例2（使用 box-sizing 属性）：

1.   只需要加入如下样式

#text1, #text2{

    width: 100%;

    box-sizing: border-box;

}

2.   效果如图：

?  总结：木有^_^，会用就行。。

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

 

 

 

 

 

 

转http://www.mamicode.com/info-detail-1838257.html