CSS 制作与操作(3)

1，块级元素block level

块级元素即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满 比如li占据一个矩形区域

2，行内元素inline

对于文字元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素为行内元素。比如标记仅在其他元素上指定范围标记 s标记与标记

是一个区块容器标记，即与之间相当于一个容器，可以容纳段落、标题。表格。图像等各种HTML元素。可以把与中的内容视为一个独立的对象，用CSS的控制。声明时只需要对进行相应的控制。其中各标记元素都会随之改变 是一个通用的块级元素

这是一个块级标记。

标记和标记一样 这两个起的作用都是独立出各个区块

区别，是一个块级元素，它包围的元素会自动换行而是一个行内元素，在它的前后不会换行元素

这是不同行的

这是同一行的

标记可以包含在标记中成为它的子元素，反过来不可以、 盒子在标准流中的定位原则 行内元素之间的水平marfin 当两个行内元素紧邻时，它们之间的距离 为第一个元素的margin-right加上第二个元素的margin-left

块级元素的竖直margin

当两个块级元素之间的距离不是margin-botton与margin-top的总和，而是两者中的较大者。这个现象称为margin的塌陷或合并

嵌套盒子之间的margin

当一个块包含在另一个块中时，便形成了典型的父子关系，其中子块的margin将以父块的内容为参考 在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸直至上一级盒子的限制位置。

margin属性可以设置为负值

当块之间是父子关系时，通过设置子块的margin参数为负数，可以使子块从父块分享出来。

盒子的浮动和定位

CSS中有一个float属性，默认为none，也就是标准流通常的情况，如果将float属性的值设置left为或right，元素就会向其父元素的左侧或右侧靠紧，同时默认的情况下，盒子的宽度不会伸展，而是收缩，根据盒子里面的内容的宽度来确定 。

这是浮动框外围的文字 ，这是浮动框外围的文字

设置第一个浮动 .son1{float:left;}

此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置。Box-2的左边框与Box-1的左边框重合。而文字会围绕着Box-1排列。

都设置为左浮动。把浏览器窗口慢慢变窄，Box-3会被挤到下一行中，但仍保持左浮动。文字 仍会自动排列

此外，搜索引擎是不管CSS有，它只根据网页的内容的价值来确定页面的排名。而对于一人HTL文档，越靠前的内容。搜索引擎会赋予越高的权重，因此把页面中最重要的内容放在前面。对于提高网站的搜索引擎的排名很有意义。

但如何在排版中实现某个盒子浮动，但使它后面的标准流中的盒子不爱它的影响。这就需要一个与float属性配合的属性clear，它的作用是为了消除浮动的盒子对其他盒子的影响

用clear属性消除浮动的影响

如果不希望文字围绕浮动的盒子，就需要 增加一行对clear属性的设置 .father p{border:1px dashes #11111; background-color:#90baff; clear:left; }

这样段落的上边界向下移动，直到文字不受左边的影响。

注意对clear属性的设置要放在文字所在的盒子中。例如一个P段落的CSS中。而不要放在对浮动盒子的设置里面。

扩展盒子的高度 文字被删除后，父div的范围缩成一条，是由padding和border构成的也就是说一个div的范围是由它里面的标准流内容决定 的，与里面的浮动内容无关。如果要使父div的范围包含这3个浮动盒子

在3个div的后面再增加一个div

然后为这个div设置样式，这里必须要指定其父div，并覆盖原来对margin/padding和border的设置 .father .clear{ margin:0; padding:0; border:0; clear:both;

}

盒子的定位

position 属性可以设置四个属性值

static这是默认的属性值，也就是该盒子按照标准流进行布局。

relative为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基准，然后使盒子相对它在原本标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

absolute绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这艰意味着它们对其后的兄弟盒子的定位没有影响。其他的盒子就好像这个盒子不存在一样。

fixed 固定定位 它和绝对定位相似，只是以浏览器窗口为基准进行定位。 相对定位

除了将position设置为relative之外，还需要指定一定的偏移量 #block{background-color:#fff0ac; border:1px dashed #00000; padding10px; position:relative; left:30px;

right:30px; 偏移量 向右向下分别移动了30

也就是说，left:30px;的作用是使BOX的新位置在它原来位置的左边框右侧30像素的地方。即各个边界与原来位置的距离。它对父块没有影响。

绝对定位 #block2{

position:absolute; top:30px; right:30px

这时的效果是以浏览器窗口为基准的，从左上角开始向下和向左各移动30 #father{

background-colorr:#a0c8ff; padding:15px; position:relative

这时的效果是以它的父div为基准的，从左上角开始向下和向左各移动30

使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移如果没有已经定位的祖先元素，那么会以浏览器窗口为基准。

绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位 没有影响，其他的盒子就好像这个盒子不存在一样。

所谓已经定位元素的含义是position属性被设置，并且被设置为不是static的任意一种方式，那么该元素就被定义为已经定位的元素。关于最近，在一个节点的所有祖先节点中，找出所有已经定位的元素，其中距离节点最近的一牙节点。

在父div没设置position属性时，BOX2这个div的所有祖先都不符合已经定位的要求，因此它会以浏览器窗口为基准来定位，而当父div将position属性设置为relative以后，它就符合已经定位的要求了，它又是祖先中惟一一个已经定位 的，也就满足最近这个要求，因

此就会以它为基准进行定位 。将绝对定位 的基准称为 包含块

如果设置了绝对定位，而没有设置偏移量，那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准流，而仍希望它保持在原来的位置的情况。

固定定位