您的位置：首页 > Web前端 > JavaScript

HTML5+CSS3+JS学习笔记-13-CSS3之box-sizing

2017-01-06 21:44 639 查看

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

代码：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>CSS3框大小</title>

<style type="text/css">

/*CSS3 box-sizing 属性在一个元素的 width

* 和 height 中包含 padding(内边距) 和 border(边框)。*/

* {

box-sizing: border-box;

}

.div1 {

width: 300px;

height: 100px;

border: 10px solid blue;

box-sizing: border-box;

}

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 10px solid red;

box-sizing: border-box;

}

.div3 {

width: 300px;

height: 100px;

border: 10px solid green;

}

</style>

</head>

<body>

<div class="div1"></div><br>

<div class="div2"></div><br>

<div class="div3"></div><br>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航