直接上代码: <!doctype html> <html>
<head>
<meta charset="utf-8" />
<title>css盒子</title>
<meta name="keywords" content="关键词,关键词" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div>我的css盒子测试模型</div>
</body> </html>
上面代码没有任何难度,只是写了一个div 标签,大家已经知道,div 标签是块级元素,所以会占满一行: 但是我们也注意到了图片的左侧其实还是有一些间隙的: 这个间隙在我们预期中是不应该存在的,这种间隙基本上就是出在`margin`或者`padding`或者`border`上。 我们先看开发者工具的右侧: 上面有一个element.style{} ,下面有一个div 标签的属性,默认display: block 。上面那个是干什么用的呢?我们修改一下代码: <div style="border: 1px solid red">我的css盒子测试模型</div>
然后再刷新页面看: 这下我们就知道了,这个element.style 就是我们写在代码里的属性。但是我们一般不会这么写,也就是大家在写代码的时候把所有属性都放到css 文件中为好,不要让这个element.style 有任何内容。 下面还有一个方框: 这个框就是目前这个css盒子的具体属性,比如宽度等信息。 margin:外边距 border:边框 padding:内边距
也就是说一个完整的盒子模型大小是由这三个参数值共同决定的。现在我们修改代码: lesson4.html
<div id="mydiv">我的css盒子测试模型</div>
原代码不变,只是给div 加一个id 。 index.css
*{}
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; }
然后我们刷新页面: 下面盒子区域也会随之变化: 我们看到内容区域大小变成了100*100 ,而padding、border、margin 都为0,我们来修改这三个值,再看效果: *{}
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px; }
盒子大小由原来的100*100 变为120*120 了。 padding 为内边距,我们看到文字和边缘有了10像素的距离:
从上面图片看到,padding 属性也是分为上下左右的,所以这个padding 其实是分为padding-left、padding-right、padding-top、padding-bottom 。 如果四个方向边距都不一样,我们写四个有点太累赘了,所以我们可以这样写: padding: 10px 20px 30px 40px;
可以看到,四个值从左到右分别代表:上、右、下、左,也就是顺时针 走的边距。只要这样写的方式,都是这种顺时针代表的。 如果你写 padding: 10px 20px;
就代表上下10px,左右20px。 这些大家试一下就知道了。
border 代表边框。
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border: 10px solid red; }
border: 10px solid red; 代表上下左右都是10像素、实线、红色。如果要四个边框不一样就只能一个一个写了:
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb; }
增加了border以后盒子大小也会变化:
|