Test2

时间：2017-06-03 20:54:43 阅读：187 评论：0 收藏：0 [点我收藏+]

标签：body ext2 justify pre css3 idt 继承 test inpu

默认情况下，内部元素（如：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;
}

效果如图：

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

Test2

标签：body ext2 justify pre css3 idt 继承 test inpu

原文地址：http://www.cnblogs.com/abeam/p/6938337.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)

周排行