客户端网页编程--第五章

第五章  CSS页面布局基础

CSS盒模型：每个元素（不管是块级还是内嵌元素）都会产生一个矩形盒子围绕在元素内容之外，这个盒子称为元素盒。

A代表内容；

B代表内边距（padding），是内容区和边框之间的可选区域。取值可以是百分比或者固定值，但是不允许有负值。

C代表外边距（margin），外边距总是透明的，元素可以有负边框；会突破父元素的盒模型空间或者与页面上其他元素重叠。

元素的高度是自动计算的，并且只是大到足够容纳元素的内容。

边框（border）：

1、边框是围绕在内容区和padding区的一条线，border有三个特征可以指定：样式（style）、宽度（width）、颜色（color）；

2、边框画在元素的背景之上；

3、可替换元素的边框将影响行高。

元素的浮动;

float属性的取值包括：none（不浮动）、left（向左浮动）、right（向右浮动）

注意：float属性可以应用于任何元素，而不仅仅是图像。

浮动的行为;

1、如果元素向同一方向浮动，每个后续的浮动元素必须向该方向移动，直到碰到父级元素的内边缘或者碰到前面的浮动元素。这将导致多个浮动元素集聚在目标边缘。

2、如果没有足够的空间让浮动元素并肩出现，第二个浮动元素将向下浮动，直到有足够的空间来显示他而不覆盖第一个浮动元素。

清除浮动的影响;

clear属性的取值包括;

none：允许元素的两边都有浮动元素

left：不允许左边有浮动元素

right：不允许右边有浮动元素

both：不允许有浮动元素

定位类型：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）