“盒子的基本属性”的版本间的差异
来自CloudWiki
| 第2行： | 第2行： | ||
== 宽度与高度 == | == 宽度与高度 == | ||
| − | + | === 盒子的宽度 === | |
| + | #固定值，例如：width：700px；width:80%; | ||
| + | #auto，盒子的宽度由内部内容的宽度或者浏览器窗口宽度或者该盒子所在父元素的宽度来确定。 | ||
| + | width：auto； | ||
| + | |||
| + | === 盒子的高度 === | ||
| + | #固定值。盒子中内容的总高度确定，则可以将盒子的高度设置为一个固定值；例如height:300px; | ||
| + | #auto。若盒子中内容的总高度并不确定，则通常将盒子的高度设置为auto，此时，盒子的高度将根据其实际内容的多少来确定。 | ||
*注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值 | *注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值 | ||
== 边框属性 == | == 边框属性 == | ||
2017年10月16日 (一) 07:54的版本
- 盒子属性是盒子模型的关键
宽度与高度
盒子的宽度
- 固定值，例如：width：700px；width:80%;
- auto，盒子的宽度由内部内容的宽度或者浏览器窗口宽度或者该盒子所在父元素的宽度来确定。
width：auto；
盒子的高度
- 固定值。盒子中内容的总高度确定，则可以将盒子的高度设置为一个固定值；例如height:300px;
- auto。若盒子中内容的总高度并不确定，则通常将盒子的高度设置为auto，此时，盒子的高度将根据其实际内容的多少来确定。
- 注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值
边框属性
- border
内填充属性
- 设置 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
- 思考：
- 如何让网页页面随着浏览器窗口的缩小而缩小？
- 如何让网页页面在页面窗口居中？
阴影和背景属性
返回 网页设计与开发
