查看“盒子的基本属性”的源代码
←
盒子的基本属性
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
*盒子属性是盒子模型的关键 == 盒子模型的结构 == *一个典型的盒子的结构: *[[文件:w2-14.png|500px]] === 盒子的宽度和高度=== *CSS样式规则中使用width和height *注意:'''标准盒子模型的width仅指块级元素的内容区域大小''' *[[文件:w2-15.png|500px]] == 盒子的其他属性== *border(边框):盒子外壳本身的厚度 *padding(内填充):内容与边框间的距离 *margin(外边距):盒子与其他盒子之间的距离 *box-shadow(阴影):盒子的阴影 *background(背景):盒子的背景颜色 *[[文件:w2-14.png|500px]] === 内填充属性 === 盒子的padding属性,指盒子的内边距(或内填充) *可能的值: <nowiki>length 规定以具体单位计的填充值,比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的填充</nowiki> [[文件:web4-4.png]] *可以使用综合的样式属性padding同时设置四个方向的填充,具体用法如下: padding:四个方向统一值; padding:上下值 左右值; padding:上 左右 下; 值1设置上填充,值2设置左右填充,值3设置下填充。 padding:上 右 下 左; 四个值分别设置上、右、下、左四个方向的填充。 *想一想:以下分别在哪个方向设置填充值? <nowiki><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .ex1 {padding:15%;border:solid;} .ex2 {padding:5% 15%;border:solid;} .ex3 {padding:5% 15% 7%;border:solid;} .ex4 {padding:5% 10% 15% 7%;border:solid;} </style> </head> <body> <div class="ex1">这个文本两边的填充边距一样。每边的填充边距为15%。</div> <div><p>盒子1</p></div> <div class="ex2">这个文本的顶部和底部填充边距都为5%,左右的填充边距为15%。</div> <div><p>盒子2</p></div> <div class="ex3">这个文本的顶部内边距都为5%,底部内边距为7%,左右的填充边距为15%</div> <div><p>盒子3</p></div> <div class="ex4">这个文本的顶部内边距都为5%,底部内边距为7%,左填充边距为10%,右填充边距为15%</div> <div><p>盒子4</p></div> </body> </html></nowiki> *试一试:[http://www.w3school.com.cn/tiy/t.asp?f=csse_padding W3C实例] *'''终极大杀器''':如果忘了padding几个方向的排放次序,可以用下面的几个属性: padding-top: 上填充; padding-bottom:下填充; padding-left: 左填充; padding-right: 右填充; === 外边距属性 === *围绕在元素边框的空白区域是外边距(margin)。设置外边距会在元素外创建额外的“空白”。 *可能的值: auto 浏览器计算外边距。 length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 % 规定基于父元素的宽度的百分比的外边距。 [[文件:web4-5.png]] *可以使用综合的样式属性margin同时设置四个方向的边距,具体用法如下: margin:四个方向统一值; margin:上下值 左右值; margin:上 左右 下; 值1设置上边距,值2设置左右边距,值3设置下边距。 margin:上 右 下 左; 四个值分别设置上、右、下、左四个方向的边距。 *想一想:以下分别在哪个方向设置填充值? <nowiki><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .ex1 {margin:5%;padding:3%;border:solid;} .ex2 {margin:5% 15%;padding:3%;border:solid;} .ex3 {margin:5% 15% 7%;padding:3%;border:solid;} .ex4 {margin:5% 10% 15% 7%;padding:3%;border:solid;} </style> </head> <body> <div class="ex1">这个文本两边的外边距一样。每边的填充边距为5%。</div> <div><p>盒子1</p></div> <div class="ex2">这个文本的顶部和底部外边距都为5%,左右的外边距为15%。</div> <div><p>盒子2</p></div> <div class="ex3">这个文本的顶部外边距都为5%,底部外边距为7%,左右的外边距为15%</div> <div><p>盒子3</p></div> <div class="ex4">这个文本的顶部外边距都为5%,底部外边距为7%,左外边距为10%,外填充边距为15%</div> <div><p>盒子4</p></div> </body> </html></nowiki> *试一试:[http://www.w3school.com.cn/tiy/t.asp?f=csse_margin W3C实例] *'''终极大杀器''':如果忘了margin几个方向的排放次序,可以用下面的几个属性: margin-top margin-right margin-bottom margin-left *思考: **如何让网页页面随着浏览器窗口的缩小而缩小? **如何让网页页面在页面窗口居中? *思考:'''在IE6以上浏览器中使用W3C标准时,设置某个块级元素的样式为{width:600px; margin:30px; padding:20px; border:2px solid #f00;},该块级元素的总宽度是多少 ?''' 例1:不设置box-sizing属性时,需对每个盒子的宽度精打细算: <nowiki><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} .layer2{width:100%;} .layer2-1{width:20%; padding:5%;margin:5%;height:200px; background:red;text-align:center;float:left;} .layer2-2{width:40%; padding:5%;margin:5%; height:200px; background:orange;text-align:center;float:left;} .clear{clear:both;} </style> </head> <body> <div class="layer2"> <div class="layer2-1"><h2>盒子2-1</h2></div> <div class="layer2-2"><h2>盒子2-2</h2></div> <div class="clear"></div> </div> </body> </html></nowiki> 例1:设置box-sizing属性时,只需考虑每个盒子总的宽度即可。 ====CSS3 box-sizing 属性==== box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。 *[[盒子的box-sizing属性]] http://www.runoob.com/cssref/css3-pr-box-sizing.html === 边框属性border === border 简写属性在一个声明设置所有的边框属性。 可以按顺序设置如下属性: border-width border-style border-color 例: <nowiki>p { border:5px solid red; }</nowiki> 其中border-style可能的值为:dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线) 如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。 ====border-style==== [[文件:web4-2.png]] *border-style 属性用于设置元素边框的样式。 <nowiki>p { border-style:solid; }</nowiki> *可能的值: dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 *试一试:[http://www.w3school.com.cn/tiy/t.asp?f=html_basic w3c编辑器]、[http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style 边框大集合] *代码: <nowiki><html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p> <p class="solid">A solid border</p> <p class="double">A double border</p> <p class="groove">A groove border</p> <p class="ridge">A ridge border</p> <p class="inset">An inset border</p> <p class="outset">An outset border</p> </body> </html></nowiki> ====border-width ==== *[[文件:web4-1.png]] *设置四个边框的宽度: <nowiki>p { border-style:solid; border-width:15px; }</nowiki> *"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 *可能的值: thin 定义细的边框。 medium 默认。定义中等的边框。 thick 定义粗的边框。 length 允许您自定义边框的宽度。 *试一试:[http://www.w3school.com.cn/tiy/t.asp?f=csse_border-width W3C实例] ====border-color ==== [[文件:web4-3.png]] *设置 4 个边框的颜色: p { border-style:solid; border-color:#ff0000 #0000ff; } *可能的值: 颜色名称 规定颜色值为颜色名称的边框颜色(比如 red)。 颜色代码 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。 rgb值 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0)) *"border-color" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 *试一试:[http://www.w3school.com.cn/tiy/t.asp?f=csse_border-color W3C实例] ==案例== <nowiki><html> <head> <title>我的第一个 HTML 页面</title> <style type="text/css"> div { border:3px solid red; padding:5% 6% 7% 8%; margin:5% 6% 7% 8%;} </style> </head> <body> <div>body 元素的内容会显示在浏览器中。</div> </body> </html></nowiki>
返回至
盒子的基本属性
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息