盒子的基本属性
来自CloudWiki
- 盒子属性是盒子模型的关键
目录
宽度与高度
盒子的宽度
- 固定值，例如：width：700px；width:80%;
- auto，盒子的宽度由内部内容的宽度或者浏览器窗口宽度或者该盒子所在父元素的宽度来确定。
width：auto；
盒子的高度
- 固定值。盒子中内容的总高度确定，则可以将盒子的高度设置为一个固定值；例如height:300px;
- auto。若盒子中内容的总高度并不确定，则通常将盒子的高度设置为auto，此时，盒子的高度将根据其实际内容的多少来确定。
- 注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值
边框属性
border-style
- border-style 属性用于设置元素边框的样式。
p
{
border-style:solid;
}
- 可能的值：
dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。
- 试一试：边框大集合
border-width
- 设置四个边框的宽度：
p
{
border-style:solid;
border-width:15px;
}
- "border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。
- 可能的值：
thin 定义细的边框。 medium 默认。定义中等的边框。 thick 定义粗的边框。 length 允许您自定义边框的宽度。
- 试一试：W3C实例
border-color
- 设置 4 个边框的颜色：
p
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
- 可能的值：
颜色名称 规定颜色值为颜色名称的边框颜色（比如 red）。 颜色代码 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 rgb值 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）
- "border-color" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。
- 试一试：W3C实例
内填充属性
- 设置 p 元素的 4 个内边距：
p{
padding:2cm 4cm 3cm 4cm;
}
- 可能的值：
length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的填充
- 可以使用综合的样式属性padding同时设置四个方向的填充，具体用法如下：
padding:四个方向统一值; padding:上下值 左右值; padding:上 左右 下; 值1设置上填充，值2设置左右填充，值3设置下填充。 padding:上 右 下 左; 四个值分别设置上、右、下、左四个方向的填充。
- 想一想：以下分别在哪个方向设置填充值？
padding:10px 5px 15px 20px; padding:10px 5px 15px; padding:10px 5px; padding:10px;
- 试一试：W3C实例
- 终极大杀器：如果忘了padding几个方向的排放次序，可以用下面的几个属性：
padding-top: 上填充; padding-bottom:下填充; padding-left: 左填充; padding-right: 右填充;
外边距属性
- 围绕在元素边框的空白区域是外边距(margin)。设置外边距会在元素外创建额外的“空白”。
- 设置一个p元素的所有四个边距：
p{
padding:2cm 4cm 3cm 4cm;
}
- 可能的值：
auto 浏览器计算外边距。 length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 % 规定基于父元素的宽度的百分比的外边距。
- 可以使用综合的样式属性margin同时设置四个方向的边距，具体用法如下：
margin:四个方向统一值; margin:上下值 左右值; margin:上 左右 下; 值1设置上边距，值2设置左右边距，值3设置下边距。 margin:上 右 下 左; 四个值分别设置上、右、下、左四个方向的边距。
- 想一想：以下分别在哪个方向设置填充值？
margin:10px 5px 15px 20px; margin:10px 5px 15px; margin:10px 5px; margin:10px;
- 试一试：W3C实例
- 终极大杀器：如果忘了margin几个方向的排放次序，可以用下面的几个属性：
margin-top margin-right margin-bottom margin-left
- 思考：
- 如何让网页页面随着浏览器窗口的缩小而缩小？
- 如何让网页页面在页面窗口居中？
背景属性
background-color 背景颜色
body
{
background-color:yellow;
}
- 试一试：W3C实例
background-image 背景图片
body
{
background-image: url(bgimage.gif);
background-color: #000000;
}
- 试一试：W3C实例
background-repeat 如何重复
repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。
例子：
body
{
background-image: url(stars.gif);
background-repeat: repeat-y;
}
- 试一试：W3C实例
background-position：背景定位
- 例子:
body{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
- 可能的值
top left top center top right center left center center center right bottom left bottom center bottom right
x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。
- 试一试：W3C实例
返回 网页设计与开发
