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
2.
使⽤了左float 使其脱离了⽂档流 不在居中垂直排列 ⽽是以外层盒⼦左边横向排列⽽右浮动就和左浮动相反。
附图3
3.
如过感觉沾在⼀起不好看可以使⽤margin使其分离详细代码看图5
附图4
4.
附图4的代码
附图5
附图6
附图7
5. 因为相对定位是相对⾃⾝ 如果不赋值就不会移动 所以赋值 上10px 左 10px 所以a，b，c三个元素 离左10xp的距离，离上也是
10xp的距离
css固定定位
附图8
绝对定位下adc脱离了⽗级元素
附图9
6. 可以看到这时候a，b，c都重叠在⼀起了这是因为 他的上级元素没有相对定位所以他脱离了⽗级元素
相对浏览器的位置开始定位 ⽽重叠是因为三个元素都要在浏览器
7. 左10px上10px的位置
附图10
1.
因为浮动使a脱离⽂档流且b⾃动补上a原来的位置，则b被悬浮的 a遮挡住了，
2. 在后⾯元素中添加overflow:
hidden；即可清除浮动
3. 不过⾏为a元素已经脱离了⽂档流不会独占⼀⾏所以bc元素会在a后⾯排列，效果看图11
附图11
附图12
附图13
9）结合上述 就可以做出在指定位置居中分开的排版布局了
附图14

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。