第03部分-CSS技术.pptVIP

本部分内容 CSS基础 CSS属性值与单位 CSS文本修饰应用 背景的控制 盒子模型与标准流定位 相对定位与绝对定位 盒子浮动 CSS+DIV布局 盒子的浮动 在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。 CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。 6.1 浮动——float 基本语法 float:left|right|none 语法说明 ? left表示浮动元素在左边，元素向左浮动的。 ? right表示浮动元素在右边，元素向右浮动的。 ? none表示不浮动，是默认值。 在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如图所示。使用“浮动”方式后，这种排列方式就会发生改变。 CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。 总结：一个盒子浮动后的特点 （1）浮动后的盒子将以块级元素显示，但宽度不会自动伸展。 （2）浮动的盒子将脱离标准流，即不再占据浏览器