CSS布局 #01# 三栏-固定宽度（Fixed-Width）布局
饮水思源：Stylin' with CSS - third edition
“本节，我来教你创建三栏布局。只要掌握了创建三栏布局的技术，你想搞多少栏就能搞多少栏。”
一、初始页面——一个简单的单栏固定布局
主要是一个居中的办法，设置宽度，然后margin: 0 auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 5.1 Creating Columns</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|PT+Sans:400,700|Open+Sans:400,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> <style> * {margin:0; padding:0;} body { font-family:helvetica, arial, sans-serif; } #wrapper { /* 通过给整个外包装设定宽度值，并将其水平外边距设定为 auto，这 个单栏布局在页面上居中了。随着向里添加内容，这一栏的高度会相应增加。 */ width:960px; margin:0 auto; border:1px solid; } article { background:#ffed53; } article h1 { font-family:'Droid Sans'; font-weight:700; font-size:1.5em; letter-spacing:-.05em; color:#616161; } article h2 { font-family:'Droid Sans'; font-weight:700; font-size:1.25em; letter-spacing:-.05em; color:#616161; text-decoration:overline; margin:10px 0 0 0; } article p { font-family:'Open Sans Condensed'; font-weight:300; font-size:1em; color:#000; } </style> </head> <body> <div id="wrapper"> <article> <h1>knn分类_性别_身高cm_日常锻炼情况</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis.</p> <h2>标题2示例 letter-spacing</h2> <p>通过给整个外包装设定宽度值，并将其水平外边距设定为 auto，这 个单栏布局在页面上居中了。随着向里添加内容，这一栏的高度会相应增加。</p> <p>Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas.</p> <h2>输出结果1：模型参数</h2> <table border="1"><tr><th>参数名</th><th>参数值</th></tr><tr><td>数据切分</td><td>0.7</td></tr><tr><td>数据洗牌</td><td>否</td></tr><tr><td>交叉验证</td><td>否</td></tr><tr><td>搜索算法</td><td>auto</td></tr><tr><td>叶的数量</td><td>30</td></tr><tr><td>近邻数</td><td>5</td></tr><tr><td>近邻样本权重函数</td><td>uniform</td></tr><tr><td>向量距离算法</td><td>euclidean</td></tr></table> <h2>输出结果2：混淆矩阵热力图</h2> <p>Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas.</p> <h2>输出结果3：模型评估结果</h2> <p>Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas.</p> </article> </div> <!-- OK to remove the code between here and </body> --> <div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:#666;"> <p>A code example from <em>Stylin’ with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.</p> </div> </body> </html>
二、进化——添加导航栏，作为第二栏
核心在于，要精确计算宽度，让每个div都有合适的宽度，例如一行总共960 一个是150一个是810 ，150+810=960这样刚好，
两个div都float: left的话可以并排，多一个px例如151和810那么810就会跑到下一行去。按照这个办法可以任意多“栏”并排不赘述。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 5.2 Creating Columns</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|PT+Sans:400,700|Open+Sans:400,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> <style> * {margin:0; padding:0;} body { font-family:helvetica, arial, sans-serif; } #wrapper { width:960px; margin:0 auto; border:1px solid; overflow:hidden; } nav { width:150px; float:left; background:#dcd9c0; } nav li { list-style-type:none; } nav a { font-family:'Open Sans Condensed'; font-weight:700; font-size:1.2em; color:#616161; } article { width:810px; float:left; background:#ffed53; } article h1 { font-family:'Droid Sans'; font-weight:700; font-size:1.5em; letter-spacing:-.05em; color:#616161; } article h2 { font-family:'Droid Sans'; font-weight:700; font-size:1.25em; letter-spacing:-.05em; color:#616161; text-decoration:overline; margin:10px 0 0 0; } article p { font-family:'Open Sans Condensed'; font-weight:300; font-size:1em; color:#000; } </style> </head> <body> <div id="wrapper"> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> <article> <h1>Two-Column Layout</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis.</p> <h2>This is a Second-Level Heading</h2> <p>Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas.</p> </article> </div> <!-- OK to remove the code between here and </body> --> <div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:#666;"> <p>A code example from <em>Stylin’ with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.</p> </div> </body> </html>
三、当然，多栏布局通常都有与布局同宽的页眉和页脚，下面我们就来添加
顺便查了下“在CSS中*{margin:0;padding:0;}是什么意思”（来自https://zhidao.baidu.com/question/410069245.html）
是以前常见的一种 "重置" 样式 把所有网页内的元素都紧紧贴在一起的意思，因为浏览器的不同会产生不同的默认元素样式， 例如 <p> 就会自动默认(隐藏地)加上 margin: 0 0 1em; 所以 * { margin: 0; padding: 0; } 主要用途就是帮助你重置不同的浏览器默认样式，以达到不同浏览器显示网页的结果不会差太远的效果
这里的注意点header和footer默认就是和布局同宽的，但是footer在漂浮元素的后面会尽量往上移动，所以需要clear: left一下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 5.4 Creating Columns</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|PT+Sans:400,700|Open+Sans:400,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> <style> /* 重置样式 */ * {margin:0; padding:0;} /* 1 , 先整体居中一下 */ #wrapper { width: 900px; margin: 0 auto; } /* 2 设计一下 float ,固定宽度 100 + 600 + 200= 900px */ nav { background-color: aliceblue; width: 100px; float: left; } article { background-color: blanchedalmond; width: 600px; float: left; } aside { background-color: chartreuse; width: 200px; float: left; } /* 3 但是存在一个问题footer 页脚位于浮动元素后面，所以就会尽量往上移动。 */ footer { clear: both; /* clear : left 也行 因为只有左浮动元素 */ } </style> </head> <body> <div id="wrapper"> <header> <h1>A Fixed-Width Layout(一种固定宽度的布局)</h1> </header> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> <article> <h1>Three-Column Layout</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis.</p> <h2>This is a Second-Level Heading</h2> <p>Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas.</p> </article> <aside> <h3>This is the Sidebar</h3> <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </aside> <footer> <p>This is the footer. Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero.</p> </footer> </div> <!-- OK to remove the code between here and </body> --> <div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:#666;"> <p>A code example from <em>Stylin’ with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.</p> </div> </body> </html>
上面是相比课本教材删减版的。效果如下：
四、为栏设定内边距和边框
“总之，由此可以得出一个结论： 如果布局中的栏是浮动的，而且都设定了宽度，你就根本不要去动它！要动，就把 内容放在内部 div 里，动这个 div。”
就是说，这个时候固定宽度后再去动padding啥的容易影响原来的布局，一个办法是box-sizing，但是可能存在一些兼容性问题，一个简单的办法，里面套个inner，然后去动它的padding啥的，这样子原本的布局不会被影响，很舒服。
以中间的栏作为示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 5.4 Creating Columns</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|PT+Sans:400,700|Open+Sans:400,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> <style> /* 重置样式 */ * {margin:0; padding:0;} /* 1 , 先整体居中一下 */ #wrapper { width: 900px; margin: 0 auto; } /* 2 设计一下 float ,固定宽度 100 + 600 + 200= 900px */ nav { background-color: aliceblue; width: 100px; float: left; } article { background-color: blanchedalmond; width: 600px; float: left; } article .inner { background-color: aqua; padding: 20px; margin: 20px; } aside { background-color: chartreuse; width: 200px; float: left; } /* 3 但是存在一个问题footer 页脚位于浮动元素后面，所以就会尽量往上移动。 */ footer { clear: both; /* clear : left 也行 因为只有左浮动元素 */ } </style> </head> <body> <div id="wrapper"> <header> <h1>A Fixed-Width Layout(一种固定宽度的布局)</h1> </header> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> <article> <div class="inner"> <h1>Three-Column Layout</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis.</p> <h2>This is a Second-Level Heading</h2> <p>Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas.</p> </div> </article> <aside> <h3>This is the Sidebar</h3> <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </aside> <footer> <p>This is the footer. Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero.</p> </footer> </div> <!-- OK to remove the code between here and </body> --> <div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:#666;"> <p>A code example from <em>Stylin’ with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.</p> </div> </body> </html>
效果如下：
这样任意改变不影响总体布局！
五、预防过大元素
图片可能会把栏顶大
设计一个将来可能由他人维护的动态网站时，需要考虑得更长远一些。比如，应该预见到可能
出现一些过大的元素。如果将来有一张比浮动栏更宽的图片被放到栏中，就会导致布局变宽，
而 右 边 的 栏 又 会 滑 到 下 方 。 为 此 ， 一 个 简 单 的 预 防 措 施 就 是 添 加 一 条 .inner img
{max-width:100%;}声明，以便限制图片的宽度不超过其父元素（在此就是内部 div）。
另一个办法是给每个栏（或者内部 div，如果你用了的话）添加 overflow:hidden 声明。这条
声明不会缩小图片以适应父元素，而会将它（以及任何过大元素）超出容器边界的部分剪切掉。
动态网站中另一个潜在的问题是换行。HTML 只会在单词间空格的地方换行。一些长 URL，甚
至一些长单词，在栏比较窄的情况下，都会导致栏宽过大。因此，还应该给所有栏的外包装元
素应用 word-wrap:break-word 声明，以便所有栏及其内容继承这个设定。有了这条声明，浏
览器会把过长的词断开显示在不同行上。只是 word-wrap 没有定义在哪里断开，因此结果完全
是随机的，而且没有连字符。不过，这条规则只在需要时才会起作用，而且能保护布局不会被
长 URL 顶得支离破碎。建议你在每一栏中都用长 URL、大图片，以及包含内容过多的元素测试
一下布局，看看这些声明到底会不会起作用，并发现更多需要事先考虑保护措施的其他
漏洞。
