一、总结
块级元素设置padding,border改变布局,改变嵌套内容的框占据文档流中的范围(同样也影响背景的区域)。
行内元素设置padding,border在应用背景图片的时候会有显示,但是不改变垂直方向的布局。结果会出现设置后padding,border的背景会覆盖上面的元素的内容,下部被当做背景,被下级元素覆盖。
二、测试
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Test a border</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Content-Language" content="zh-CN" />
- <style type="text/css">
- <!--
- body {
- background-color: #9DD100;
- }
- a:link, a:visited {
- text-decoration: none;
- border: 1px dotted #000;
- }
- a:hover, a:focus, a:active {
- border-style: solid;
- }
- .one {
- border: 20px solid white;
- padding: 10px;
- }
- .one:hover {
- border: none;
- }
- -->
- </style>
- </head>
- <body>
- <br/>
- <a href="http://wef.com">baidu.com</a>
- <hr/>
- <span class="one">BAIDU</span>
- <span>GOOGLE</span>
- <p>YAHOO</p>
- </body>
- </html>
<2>鼠标经过时