双飞翼布局-浮动、负边距

最新推荐文章于 2020-10-02 11:42:00 发布

weixin_30810583

最新推荐文章于 2020-10-02 11:42:00 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/ch11ry/p/7833495.html

版权

一、参考文章

　　1.双飞翼布局和圣杯布局的对比(http://www.cnblogs.com/tinyphp/p/4743674.html)

二.双飞翼局中用到的属性：

　　1.浮动——float：设置浮动后，元素会脱离文档流，如果希望文档流按照布局顺序显示，那么需要用到“清除浮动”的hack

　　　　(1).left：将元素像右浮动

　　　　(2).right：将元素向左浮动

　　　　(3).none（默认值）：取消元素的浮动

　　2.清除浮动——clearfix hack（http://nicolasgallagher.com/micro-clearfix-hack/）：主要实现如下

1 .clearfix:before,
2 .clearfix:after{
3     content:" ";
4     display:table;
5 }
6 
7 .clearfix:after{
8     clear:both;
9 }

　　3.边距——margin

　　　　(1).此属性为正值时，用于设置元素的外边距。

　　　　(2).此属性为负值时，会将元素往前拉。

三.总结：

　　1.双飞翼布局的核心还是负边距的运用。

　　2.和圣杯布局不同的是，在不定宽元素中添加了一个div，使得左右两侧元素不用使用相对定位来处理偏移。

　　3.关键点拆分：

　　　　(1).中间不定宽元素放在最前。（目的是为了让不定宽元素最先渲染）

　　　　(2).中间不定宽元素中需要再多添加一个div来包裹自定义内容。（这是第一个和圣杯布局最大的不同）

　　　　(3).子元素浮动后，需要在父元素清除浮动

　　　　(4).利用负边距，将左侧和右侧元素拉到中间不定宽元素的两侧。（左右两侧的元素不用使用相对定位，这个任务交给不定宽元素中的div元素来搞定就可以了。这是第二个和圣杯布局最大的不同）

四.界面截图：

五.代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8   <title>Document</title>
  9   <style>
 10     * {
 11       margin: 0px;
 12       padding: 0px;
 13     }
 14 
 15     ul {
 16       list-style: none;
 17     }
 18 
 19     .clearfix:before,
 20     .clearfix:after {
 21       content: " ";
 22       display: table;
 23     }
 24 
 25     .clearfix:after {
 26       clear: both;
 27     }
 28 
 29     body {
 30       min-width: 800px;
 31     }
 32 
 33     header,
 34     footer {
 35       background: yellowgreen;
 36     }
 37 
 38     .container {
 39       background: gray;
 40     }
 41 
 42     .container>main {
 43       width: 100%;
 44       float: left;
 45       background: darkorange;
 46     }
 47 
 48     .container>main>.inner {
 49       margin: 0 150px;
 50     }
 51 
 52     .container>nav,
 53     .container>aside {
 54       background: deeppink;
 55       width: 150px;
 56       float: left;
 57     }
 58 
 59     .container>nav {
 60       margin-left: -100%;
 61     }
 62 
 63     .container>aside {
 64       margin-left: -150px;
 65     }
 66   </style>
 67 </head>
 68 
 69 <body>
 70   <header>
 71     this is header
 72   </header>
 73   <div class="container clearfix">
 74     <main class="main">
 75       <div class="inner">
 76         this is main content.
 77       </div>
 78     </main>
 79     <nav>
 80       <ul>
 81         <li>
 82           <a href="#">link1</a>
 83         </li>
 84         <li>
 85           <a href="#">link2</a>
 86         </li>
 87         <li>
 88           <a href="#">link3</a>
 89         </li>
 90         <li>
 91           <a href="#">link4</a>
 92         </li>
 93         <li>
 94           <a href="#">link5</a>
 95         </li>
 96         <li>
 97           <a href="#">link6</a>
 98         </li>
 99         <li>
100           <a href="#">link7</a>
101         </li>
102         <li>
103           <a href="#">link8</a>
104         </li>
105         <li>
106           <a href="#">link9</a>
107         </li>
108         <li>
109           <a href="#">link10</a>
110         </li>
111       </ul>
112     </nav>
113     <aside>
114       <ul>
115         <li>
116           <a href="#">link1</a>
117         </li>
118         <li>
119           <a href="#">link2</a>
120         </li>
121         <li>
122           <a href="#">link3</a>
123         </li>
124         <li>
125           <a href="#">link4</a>
126         </li>
127         <li>
128           <a href="#">link5</a>
129         </li>
130         <li>
131           <a href="#">link6</a>
132         </li>
133         <li>
134           <a href="#">link7</a>
135         </li>
136         <li>
137           <a href="#">link8</a>
138         </li>
139         <li>
140           <a href="#">link9</a>
141         </li>
142         <li>
143           <a href="#">link10</a>
144         </li>
145       </ul>
146     </aside>
147   </div>
148   <footer>
149     this is footer
150   </footer>
151 </body>
152 
153 </html>

转载于:https://www.cnblogs.com/ch11ry/p/7833495.html

weixin_30810583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局-浮动、负边距

一、参考文章　　1.双飞翼布局和圣杯布局的对比(http://www.cnblogs.com/tinyphp/p/4743674.html)二.双飞翼局中用到的属性：　　1.浮动——float：设置浮动后，元素会脱离文档流，如果希望文档流按照布局顺序显示，那么需要用到“清除浮动”的hack　　　　(1).left：将元素像右浮动　　　　(2).right：将元素向左浮动...
复制链接

扫一扫