float布局:圣杯布局和双飞翼布局

圣杯布局和双飞翼布局:是什么,实现,比较

一.比较

float布局:圣杯布局和双飞翼布局_第1张图片

二. 圣杯布局

float布局:圣杯布局和双飞翼布局_第2张图片

  1. html结构:
   <body>
        <header>headerheader>
        <div class="container">
            <div class="main float">maindiv>
            <div class="left float">leftdiv>
            <div class="right float">rightdiv>
        div>
        <footer class="clearfix">footerfooter>
    body>

2.核心流程:
上中下 && (左中右,中先出来)
① 内部左中右float:left;footer清除浮动
② 外部container的左右各padding 150px;
③ 左:
margin-left :-100%; //即向右移动父盒子的宽width,不包括padding
position relative, right:自身的宽px
//为什么这里要相对定位?
因为左盒子 margin-left右移的值没有包括父盒子的 padding,所以这里相对于自己定位后再左移自身的宽(也即父盒子padding-left的值)
④ 右 margin-right:-自身的宽 ;
//为什么这里使用margin-right?
因为mr为负自身的值,则这个盒子在父盒子的外界来看不占位置,自然,右盒子就挤入到父盒子的留白区了.(在这里无论你把宽值设置得多大,右盒子都不会超出container留白区,覆盖main区域)

3.实现

 

三.双飞翼布局

在这里插入图片描述

1.html结构

 <body>
    <div class="main float">
        <div class="main-content">maindiv>
    div>
    <div class="left float">leftdiv>
    <div class="right float">rightdiv>
body>

2.核心流程
左中右 ,中先出来

  1. 中间内层 : margin左右为左右盒子的宽
  2. 左:margin-left :-100%;
  3. 右:margin-left :-自身的宽 ; //为什么不是margin-right?因为右盒子的父盒子是body

3.代码实现

  

你可能感兴趣的:(前端面试常考题,css)