css实现页面布局

ID：27874475

大小：946.34 KB

页数：22页

时间：2018-12-04

资源描述：

《css实现页面布局》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS实现页面布局第六章本章关键字float浮动div层span层absolute据对定位本章目标了解与页面布局相关的CSS属性理解CSS的盒状模型理解DIV标签和SPAN标签掌握CSS实现页面布局与页面布局相关的CSS样式属性外边距和内边距尺寸定位分类外边距和内边距属性说明margin-topmargin-rightmargin-bottommargin-left设置元素的顶、右、底、左外边距，即元素边框之外的空白。像素值或百分比，也可使用auto。margin依次设置顶、右、底、左外边距。padding-toppadding-rightpadding-bot

2、tompadding-left设置元素的顶、右、底、左内边距，即元素边框之内的空白。像素值或百分比，也可使用auto。padding依次设置顶、右、底、左内边距。外边距和内边距属性示例*{margin:0;padding:0;}body{background-color:#fedcba;}#outerDiv{border:1pxsolidblue;width:400px;margin:20px;padding:10px;background-color:#abcdef;}#innerDiv{border:1pxsoli

3、dred;width:300px;margin:20px;padding:10px;background-color:#cccccc;}p{border:1pxsolidgreen;}

这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。

4、dy>尺寸属性说明width设置元素内容区域的宽度。像素值或百分比。height设置元素内容区域的高度。像素值或百分比。line-height设置文本块的行间距。像素值或百分比。尺寸属性示例CSS样式属性_尺寸#mytable{height:180px;border:4pxdoubleblack;border-collapse:collapse;}#mytabletd{width:150px;border:1pxsolidgray;}p{line-height:28px;}

5、

段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字

单元格单元格

段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字

定位属性说明position设置元素的定位机制。s

6、tatic、relative、absolute、fixed。z-index设置元素在垂直浏览器窗口方向上的层叠顺序。数字值，越大越靠近浏览者。vertical-align设置行内元素在所在行上的垂直对齐方式，或用于设置单元格内容在单元格内的垂直对齐方式。baseline、top、middle、bottom、text-top、text-bottom、super、sub。overflow设置当元素内容所需占用的区域超出内容区域时，如何处理。auto、scroll、hidden、visible。top、right、bottom、left设置元素某边界相对于其包含块相应

7、边界的偏移量。像素值或百分比，默认auto。定位属性示例p{border:1pxsolidgray;}#p_pos_left{position:relative;left:20px;}#p_pos_top{position:relative;top:20px;}段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字

段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落

8、文字段落文字段落文字段落

css实现页面布局

css实现页面布局

相关文章

相关标签