Div+CSS布局相关属性
1.div和span
div和span在整个HTML标记中没有任何意义,他们存在就是为了应该CSS样式
div和span区别就是在于,span是内联元素,div是块级元素
例子:
<div>
div和span在整个HTML标记中没有任何意义,他们存在就是为了应该CSS样式
div和span区别就是在于,span是内联元素,div是块级元素
</div>
<span>div和span在整个HTML标记中没有任何意义,他们存在就是为了应该CSS样式
div和span区别就是在于,span是内联元素,div是块级元素</span>
</body>
div{
background-color: chartreuse;
}
span {
background-color: red;
}
2.盒模型
margin:盒子外边距
padding:盒子内边距
border:盒子边框宽度
width:盒子宽度
height:盒子高度
3.布局相关的属性
3.1 position定位方式
relative:相对定位
1.使用相对定位的盒子,会相对于它原本的位置,通过偏移制定的距离,到达新的位置。
2.使用相对定位的盒子仍在标准流中,它对父兄盒子没有任何影响。
absolute:根据父元素进行定位
1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
2.绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。
注意:
fixed:根据浏览器窗口进行定位
static:没有定位
inherit:继承定位
3.2定位
只有定义了相对属性,position:relative或者position:absolute,才可以定位以下属性
与页面定点的距离:
left:10px
right:10px
top:10px
bottom:10px
3.3 z-index层覆盖先后顺序(优先级)
z-index:0 默认
z-index:x x 数值比0大则覆盖在上面
3.4display显示属性
none:不显示,隐藏
block:块状显示,在元素后面换行,显示下一个块元素
inline:内联显示,多个块可以显示在一行内
注意:可以把div块元素通过display显示属性转换为内联元素span, display:inline
可以把span内联元素通过display显示属性转换为块元素div, display:block
3.5 float浮动属性
left:左浮动
right:右浮动
3.6 clear清除属性
clear:both
3.7overflow溢出属性
hidden:隐藏超出层大小的内容
scroll:无论内容是否超出层大小都添加滚动条
auto:超出时自动添加滚动条
4.兼容性问题
5.DIV+CSS页面布局实战
超链接去除下划线: a { text-decoration:none;}
列表去除样式: li { list-style:none;}
列表左排列 : li { float : left ;}
(用小条截图重复成背景色)加背景色:background: url(" ../image/ hover.jpg") repeat-x;
快捷键:div.logo+Tab键 即为 <div class="logo">
h1>a>img+Tab键 即为 <h1><a href=" "><img src=" " alt=" "/></h1>