html之div+css布局
2016-06-06 00:43
344 查看
div+css布局:
div为块级元素,占一行之后换行
span为内联元素
盒模型(对于div而言):
盒子外边距:margin:2px
盒子内边距:padding:2px
盒子边框宽度:border:soild 2px
盒子宽度,高度:width:2px height:2px
布局相关属性:
position定位方式:relative absolute fixed static
relative:正常定位 abosolute:根据父窗口定位 fixed:根据浏览器定位(下滑页面位置不变)
Static:脱离父窗口定位(换行显示)
定位方式(距离父窗口上下左右距离):left:2px right:2px top:2px bottom:2px
设置子窗口定位方式相对于父窗口时,父窗口需为relative定位方式
z-index层覆盖优先级问题:z-index:2>z-index:1 此时z-index:2显示在上
display显示属性:display:none;:窗口不显示
display:block窗口块状显示
display:inline内联显示
浮动属性:float:left right
清除浮动:clear:both
溢出处理:(溢出为当内容超出容器大小)
overflow:hidden隐藏超出层大小
overflow:scroll无论是否超出都添加滑动条(滑动条均在框架内)
overflow:auto超出时自动添加滑动条
div为块级元素,占一行之后换行
span为内联元素
盒模型(对于div而言):
盒子外边距:margin:2px
盒子内边距:padding:2px
盒子边框宽度:border:soild 2px
盒子宽度,高度:width:2px height:2px
布局相关属性:
position定位方式:relative absolute fixed static
relative:正常定位 abosolute:根据父窗口定位 fixed:根据浏览器定位(下滑页面位置不变)
Static:脱离父窗口定位(换行显示)
定位方式(距离父窗口上下左右距离):left:2px right:2px top:2px bottom:2px
设置子窗口定位方式相对于父窗口时,父窗口需为relative定位方式
z-index层覆盖优先级问题:z-index:2>z-index:1 此时z-index:2显示在上
display显示属性:display:none;:窗口不显示
display:block窗口块状显示
display:inline内联显示
浮动属性:float:left right
清除浮动:clear:both
溢出处理:(溢出为当内容超出容器大小)
overflow:hidden隐藏超出层大小
overflow:scroll无论是否超出都添加滑动条(滑动条均在框架内)
overflow:auto超出时自动添加滑动条
相关文章推荐
- 【转】SMACSS 学习笔记
- css annimate动画
- 'border:none' or 'border:0'
- 团队项目-广商百货-玩玩新样式
- 网页设计之初学CSS
- CSS初识
- 与border相关被遗漏的属性及图标制作
- css动效学习
- BFC 神奇背后的原理
- CSS水平居中/垂直居中的N个方法
- 实习入职第十六天:seekBar自定义样式
- gulp-mockapi
- css基础
- JQ promise详解
- css3
- 问 如何使用css将select的边框以及右边的小三角形去掉?
- CSS 中如何把 Span 标签设置为固定宽度
- css中 Span 元素的 width 属性无效果原因及多种解决方案
- 【转】CSS3 @font-face
- CSS学习笔记