Css排版布局

好的网页不但要功能齐全还要好看，页面想要好看排版布局少不了

布局的常用方法

(一)
position；定位且又分为绝对定位和相对定位。固定定位等

a. relative：相对定位 相对与自身调整位置 top上值 left左值 bottom下值
right右值

b. absolute绝对定位 在父级或上级元素没有想对定位情况下就相对浏览器来定位 值同上

c. fixed：固定定位 相对与浏览器绝对定位 永远显示在最上层

(二)
float;浮动分左浮动 float：left ；右浮动
float：right

a. float：left ；在上级元素左对齐

b. float：right；在上级元素右对齐

(三)
margin和padding

a. top上值 left左值 bottom下值 right右值

b. margin外边距 四个值 上左下右 也可单独赋值

c. padding内边距 四个值 上左下右 也可单独赋值

² 注意事项

1. 使用position后行内元素会自动变成块级元素。

2. float也是一样 且两者都会是元素脱离普通文档流。

a) 普通文档就是块元素会独占一行且由上而下由左到右排列

b) 脱离后元素会悬浮与文档流上方并且下面的元素自动补上

c) 这样就会使下面的元素被非文档流元素遮挡

d) margin和padding 不会使元素脱离文档流

一、
下面是实例：

附图1

1. 仅使用margin 使div 位于浏览器中间排列，后用padding 使盒子撑开变大

附图2

使用了左float 使其脱离了文档流 不在居中垂直排列 而是以外层盒子左边横向排列而右浮动就和左浮动相反。

附图3

如过感觉沾在一起不好看可以使用margin使其分离详细代码看图5

附图4

附图4的代码

附图5

附图6
附图7

5. 因为相对定位是相对自身 如果不赋值就不会移动 所以赋值 上10px 左 10px 所以a，b，c三个元素 离左10xp的距离，离上也是10xp的距离
   
   附图8

绝对定位下adc脱离了父级元素

附图9

6. 可以看到这时候a，b，c都重叠在一起了这是因为 他的上级元素没有相对定位所以他脱离了父级元素
   相对浏览器的位置开始定位 而重叠是因为三个元素都要在浏览器

7. 左10px上10px的位置

附图10

因为浮动使a脱离文档流且b自动补上a原来的位置，则b被悬浮的 a遮挡住了，

2. 在后面元素中添加overflow:
   hidden;即可清除浮动

3. 不过行为a元素已经脱离了文档流不会独占一行所以bc元素会在a后面排列，效果看图11

附图11

附图12

附图13

9）结合上述 就可以做出在指定位置居中分开的排版布局了

附图14