CSS大小设置实例——盒子模型
2012-09-10 14:57
453 查看
一、浏览器效果和Dreamweaver设计视图:
二、HTML
三、CSS
【说明】
1、本实例中使用了css reset.css,在这里,主要重置了body和div的{margin: 0;padding: 0; }
2、在用CSS设计盒子时,可以设置盒子的宽(width)和高(height)属性,但是这个宽和高并不是盒子的实际宽和高,而是盒子内容的宽和高。
本例中,盒子的width和height是蓝色内容的宽和高,而盒子实际的宽和高是:
盒子的实际宽度=左边界+左边框+左填充+宽+右填充+右边框+右边界;
盒子的实际高度=上边界+上边框+上填充+高+下填充+下边框+下边界。
二、HTML
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <title>盒子模型</title> </head> <body> <div id="box"> <div id="content"></div> </div> </body> </html>
三、CSS
#box { width:200px; height:100px; margin:10px 20px 30px 40px; border:solid 10px red; padding:10px 20px 30px 40px; background-color:green; } #content { width:100%; height:100%; background:blue; }
【说明】
1、本实例中使用了css reset.css,在这里,主要重置了body和div的{margin: 0;padding: 0; }
2、在用CSS设计盒子时,可以设置盒子的宽(width)和高(height)属性,但是这个宽和高并不是盒子的实际宽和高,而是盒子内容的宽和高。
本例中,盒子的width和height是蓝色内容的宽和高,而盒子实际的宽和高是:
盒子的实际宽度=左边界+左边框+左填充+宽+右填充+右边框+右边界;
盒子的实际高度=上边界+上边框+上填充+高+下填充+下边框+下边界。
相关文章推荐
- CSS大小设置实例——盒子模型
- 【JavaWeb】CSS_css中的边框属性(盒子模型的边框设置)
- css3基础 box-sizing 设置盒模型(边线与padding不改盒子的大小)
- css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
- CSS基础学习十四:盒子模型补充之display属性设置
- 10-DIV+CSS-盒子模型实例
- CSS设置div对象盒子里部分文字加粗的实例介绍
- CSS 盒子模型(Box model)中的 padding 与 margin
- CSS——盒子模型
- 关于几种css字体大小的设置
- css(盒子模型)
- HTML+CSS基础课程之盒子模型
- 【CSS布局.1】盒子模型
- 盒子模型和css属性
- CSS核心--盒子模型
- css的盒子模型
- css-盒子模型
- word中字体大小(pt)和网页中css设置font-size时用的px大小对应关系
- iOS中通过设置CSS改变WebView字体大小,颜色,背景颜色
- CSS篇之1. CSS 盒子模型,绝对定位和相对定位