CSS布局
div标签:
在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种
布局方式为 div + css 布局。
文档流:
文档流其实就是指浏览器生成页面的顺序。也是浏览器默认的显示规则。
Display(元素显示模式):
用来设置元素的显示方式。
display |
|
block |
块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其它的元素只能另起一行显示。 |
inline |
行间对象与block刚好相反,它允许其它元素在同一行显示 |
inline-block |
既有行内元素的特点,又有块级元素的特点 |
none |
隐藏对象 |
Float(元素的浮动)
用来控制元素是否浮动显示。
Left |
向左浮动 |
right |
向右浮动 |
none |
不浮动 |
浮动的时候元素的显示属性也变化了 变为 “行内元素”
Clear(清除浮动)
none |
默认值,允许浮动 |
left |
不允许左边浮动 |
right |
不允许右边浮动 |
both |
不允许浮动 |
position(元素定位)
static |
默认值,无定位 |
absolute |
绝对定位 |
relative |
相对定位 |
fixed |
固定定位 |
Absolute:
l 脱离文档流。
l 通过
top,bottom,left,right 定位。
l 如果父元素
position 为 static 时,将以body坐标原点进行定位。
如果父元素 position 为 relative 时,将以父元素进行定位。
Relative:
l 相对定位(相对自己原来的位置而言)
l 不脱离文档流
l 参考自身静态位置通过
top,bottom,left,right 定位。
Fixed:
固定定位实际上只是绝对定位的特殊形式;固定定位的元素是相对于浏览器窗口而固定,
而不是相对于其包含元素;即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一样的地方。
z-index(元素的层叠关系)
当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。
默认值为0.
CSS
reset(清除默认样式)
在HTML标签在浏览器里有默认的样式,在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。"覆盖"浏览器的CSS默认属性。也就是把浏览器提供的默认样式覆盖掉!