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

时间：2017-06-03 13:55:45 阅读：211 评论：0 收藏：0 [点我收藏+]

标签：html css3 bsp add width text tle ext1 idt

默认情况下，内部元素（如：input）的宽度或高度，是不会包含元素的边框和内边距的，这是就需要使用 box-sizing 属性设置该元素。
box-sizing 是 CSS3 的属性，可以设置以上值：

content-box: 元素 size 不包含 border 和 padding，默认值。
border-box: 元素 size 包含 border 和 padding。
inherit: 指定box-sizing属性的值，应该从父元素继承。

示例1（不使用 box-sizing 属性）：

HTML

<!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>

效果如图：
可以发现，内部元素的宽度已经超过父元素宽度。

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

只需要加入如下样式

#text1, #text2{

									width: 100%;

									box-sizing: border-box;
}

效果如图：

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

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

标签：html css3 bsp add width text tle ext1 idt

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行