css页面布局基础
2015-07-31 21:16
489 查看
1.盒模型:margin、padding、行高line-height
2.vertical-align:垂直对齐方式、行高居中
3.如果div没有设置高度,则会自动增加设置后,自动不变
4.绝对定位:
①使用position:absolute;声明;
②使用一个或多个偏移属性(top、right)相对于其容块的边缘进行定位,默认被设置为auto;
③绝对定位的元素完全从文档流中脱离出来,所占据的空间不保留,不再影响其他元素。
5.相对定位:
使用position:relative;声明
当设置了position:relative时,层的层叠级别高于默认的文本流级别;同等级别下将会按照文本流的顺序层叠显示。
6.容器块:
①根元素(html)创建的容器块叫做“初始化容器块”;
②对于被设置为静态或者相对定位的非根元素,容器块是它最近的父级元素、表格单元的内容区的边缘;
③对于如果祖先元素是内嵌元素,容器块为内容区的边缘。
7.处理溢出:
①overflow属性的取值有:visible是默认的,不裁剪内容,不添加滚动条,强制显示元素内容
②hidden表示裁剪内容,并不显示超出对象尺寸的内容
③scroll表示裁剪内容,同时提供滚动条
④auto表示只有在必要时才裁剪内容并添加滚动条
8.设置元素的可见性:
display属性的取值包括:
①none元素在页面上隐藏起来,元素也将退出当前的页面布局层,不占用任何的空间;
②强制将XHTML中的内嵌元素变为块级元素;
③inline:块级元素变为内嵌元素
2.vertical-align:垂直对齐方式、行高居中
3.如果div没有设置高度,则会自动增加设置后,自动不变
4.绝对定位:
①使用position:absolute;声明;
②使用一个或多个偏移属性(top、right)相对于其容块的边缘进行定位,默认被设置为auto;
③绝对定位的元素完全从文档流中脱离出来,所占据的空间不保留,不再影响其他元素。
5.相对定位:
使用position:relative;声明
当设置了position:relative时,层的层叠级别高于默认的文本流级别;同等级别下将会按照文本流的顺序层叠显示。
6.容器块:
①根元素(html)创建的容器块叫做“初始化容器块”;
②对于被设置为静态或者相对定位的非根元素,容器块是它最近的父级元素、表格单元的内容区的边缘;
③对于如果祖先元素是内嵌元素,容器块为内容区的边缘。
7.处理溢出:
①overflow属性的取值有:visible是默认的,不裁剪内容,不添加滚动条,强制显示元素内容
②hidden表示裁剪内容,并不显示超出对象尺寸的内容
③scroll表示裁剪内容,同时提供滚动条
④auto表示只有在必要时才裁剪内容并添加滚动条
8.设置元素的可见性:
display属性的取值包括:
①none元素在页面上隐藏起来,元素也将退出当前的页面布局层,不占用任何的空间;
②强制将XHTML中的内嵌元素变为块级元素;
③inline:块级元素变为内嵌元素
相关文章推荐
- CSS盒模型详解
- CSS核心技术总结
- css3导航下拉菜单
- 对css float 浮动的学习心得
- 7_31_html_css样式
- jsp页面解决IE浏览器兼容模式下css,js显示问题
- 【CSS学习】CSS 列表样式(ul)
- 【CSS学习】CSS 链接(link)
- CSS 的overflow:hidden 属性详细解释
- 【CSS学习】CSS Fonts(字体)
- css多行文本居中
- CSS让div背景透明
- 关于iOS控件全局样式统一设定问题
- CSS3 抛物线 加入购物车
- 20150726 CSS Sprite雪碧图应用
- 20150726 Web前端开发基础html+css
- 【CSS学习】CSS Text(文本)
- 20150724 CSS3学习笔记(下)
- 纯 CSS 实现 tab 页切换
- 20150723 CSS3学习笔记(中)