CSS布局 [css]

本篇文章主要总结css中与布局相关的一些概念和使用场景

[TOC]

一、定位元素

1.1 盒子模型

边框 (border)
内边距 (padding)
外边距 (margin)

1.2 浮动与清除浮动

1.2.1 浮动

概念：CSS 设计 float 属性的主要目的,是为了实现文本绕排图片的效果。然而,这个属性居然也成了创建多栏布局最简单的方式。

场景：在你浮动一张图片或者其他元素时,你是在要求浏览器把它往上方推,直到它碰到父元素(也就是 body 元素)的内边界。后面的段落(带灰色边框) 不再认为浮动元素在文档流中位于它的前面了,因而它会占据父元素左上角的位置。不过,它的内容(文本)会绕开浮动的图片

1.2.2 清除浮动

清除浮动原因：浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有时候并非我们想要的

方法一、给父元素添加 overflow: hidden BFC

22fc6a5d7bda51958d03c6612d77fbfbaabdc6a5

为父元素应用 overflow:hidden，以强制它包围浮动元素。

// css
section {border:1px solid blue; margin:0 0 10px 0; overflow: hidden;}
img {float:left;}
p {border:1px solid red;}
footer {border:1px solid red;}

// html
<section>
   <img src="images/1.jpg">
   <p>It's fun to float.</p>
</section>
<footer>
    Here is the footer element that runs across the bottom of the page.
</footer>

方法二、让父元素也浮动

浮动 section 以后，不管其子元素是否浮动，它都会紧紧地包围(也称收缩包裹)住它的子元素。因此，需要用 width:100% 再让 section 与浏览器容器同宽。由于 section 现在也浮动了，所以 footer 会努力往上挤到它旁边去。为了强制 footer 依然呆在 section 下方，要给它应用 clear:left。被清除的元素不会被提升到浮动元素的旁边

// css
section {border:1px solid blue; margin:0 0 10px 0; float: left; width: 100%;}
img {float:left;}
p {border:1px solid red;}
footer {border:1px solid red; clear: left;}

// html
<section>
   <img src="images/1.jpg">
   <p>It's fun to float.</p>
</section>
<footer>
    Here is the footer element that runs across the bottom of the page.
</footer>

方法三、添加非浮动的元素清除浮动

添加额外html元素

// css
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
p {border:1px solid red;}
footer {border:1px solid red; clear: left;}
.clear_me {clear:left;}

// html
<section>
   <img src="images/1.jpg">
   <p>It's fun to float.</p>
   <div class="clear_me"></div>
</section>
<footer>
    Here is the footer element that runs across the bottom of the page.
</footer>

通过class:after 伪元素 确保无宽高

// css 
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
p {border:1px solid red;}
footer {border:1px solid red; clear: left;}
.clearfix:after{content: '.'; height: 0; visibility: hidden;clear:both; display: block;}

// html
<section class="clearfix">
   <img src="images/1.jpg">
   <p>It's fun to float.</p>
</section>
<footer>
    Here is the footer element that runs across the bottom of the page.
</footer>

1.3 定位

CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。position 属性有 4 个值:static、relative、absolute、 fixed，默认值为 static。

静态定位 static

在静态定位的情况下,每个元素在处在常规文档流中。

相对定位 relative

相对的是它原来在文档流中的位置(或者默认位置). 此时拥有属性 top、right、bottom、left

绝对定位 absolute

绝对定位跟静态定位和相对定位比,绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来. 此时拥有属性 top、right、bottom、left

固定定位 fixed

固定定位元素的定位上下文是视口(浏览器窗口或手持设备的屏幕),因此它不会随页面滚动而移动. 此时拥有属性 top、right、bottom、left

二、布局

2.1 布局的概念

多栏布局有三种实现方式：固定宽度、流动、弹性

固定宽度： 大小不会随着浏览器窗口的缩放而改变

流动： 大小会随着浏览器窗口缩放而改变，内容不会改变大小

弹性： flex弹性布局,随着浏览器缩放而改变，不仅宽高改变，而且内容也改变

2.2 三栏-固定宽度

// css
*{padding: 0;margin: 0;}
#wrapper{width: 960px; margin: 0 auto; background: #eee;}
nav{width: 150px; background: red; float: left;}
article{width: 600px; background: blue; float: left;}
.inner{padding: 20px;}
.inner img{max-width: 100%;}
aside{width: 210px; background: pink; float: left;}
header{ background: green; text-align: center;}
footer{ background: yellow; clear: both; text-align: center;}

// html
<div id="wrapper">
    <header>header 内容</header>
    <nav>
        <div class="inner">
            总之，由此可以得出一个结论: 如果布局中的栏是浮动的，而且都设定了宽度，你就根本不要去动它!要动，就把 内容放在内部 div 里，动这个 div。
        </div>
    </nav>
    <article>
        <div class="inner">
            总之，由此可以得出一个结论: 如果布局中的栏是浮动的，而且都设定了宽度，你就根本不要去动它!要动，就把 内容放在内部 div 里，动这个 div。
        </div>
    </article>
    <aside>
        <div class="inner">
            <img src="1.jpg">
            总之，由此可以得出一个结论: 如果布局中的栏是浮动的，而且都设定了宽度，你就根本不要去动它!要动，就把 内容放在内部 div 里，动这个 div。
        </div>
    </aside>
    <footer>footer@baidu.com</footer>
</div>

说明：

1.清除浮动：利用clear:left 或者 clear: both

2.设定内边距和边框：添加内层div <div class="inner"></div>

Fangjian