关于布局和结构

关于布局和结构

背景色满屏，固定宽度内容居中

.header>.inner-center
.banner>.inner-center
.container>.inner-center
.footer>.inner-center

// css
.inner-center{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

边栏固定宽度，内容栏流体

overflow:hidden

因为overflow本身也可能会产生bug，所以不建议大范围的布局，适合用于小区块结构，且超过区域范围没有内容显示（overflow：hidden）

.inner-center
	.aside
	.content

// css
.aside{
	float: left/right;
	width: 300px;
}
.content{
	overflow: hidden;
}

负margin

目前来说，该方案是最好的，不过就是需要多嵌套一层结构
原理: 实际上还是两个浮动元素 一个宽度是100% 另一个浮动元素为了还是在同一行使用负margin
而真正的浮动内容则在这个浮动的100%的容器中

http://jsbin.com/yededu/1

.inner-center
	.content > .content-inner
	.aside

// css
.content{
	float: left;
	width: 100%;
}
.content-inner{
	margin-right: 300px;
}
.aside{
	float: left;
	width: 300px;
	margin-left: -300px;
}

position:absolute

这个相对来说比较简单，一般用于小结构

.inner-center
	.content
	.aside

// css
.inner-center{
	position: relative;
	padding-right: 300px;
	box-sizing: border-box;
}
.aside{
	position: absolute;
	top: 0;
	right: 0;
}

直接margin

大概适用于左边单行的情况下，因为如果右边内容比较复杂出现clear:both情况就会掉下去

    .aside{
        float: left;
        width:200px;
        background-color: pink;
    }
    .content{
        margin-left: 200px;
        background-color: wheat;
    }
    .clear{
        clear: both;
    }

结构

<div class="inner-center">
    <div class="aside">
        <div class="placeholder">
            <p>sss</p>
            <p>sss</p>
            <p>sss</p>
            <p>sss</p>
        </div>
    </div>
    <div class="content clear">
        如果定宽的content使用了clear both 就会破坏布局
        <div class="placeholder">
            <p>sss</p>
            <p>sss</p>
        </div>
    </div>
</div>

flex 暂时不可用，不说

响应式布局

简单来说响应式布局分为两种：一种是图片比较多的我们一般采用固定宽度断点的方法如爱奇艺；一种是文字流的我们一般采用边栏国定内容流体的方法如w3cplus

固定宽度断点法

html代码如下：

.innner-center
	.content
	.aside

css代码如下：

.inner-center{
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}
.content{
	float: left;
	width: 720px;
	margin-right: 20px;
}
.aside{
	float: left;
	width: 240px;
}

// <= 980px 时inner-center距离左右为20px
@media only screen and (max-width: 980px){
	.inner-center{
		width: auto;
		margin-left: 20px;
		margin-right: 20px; 
	}
	.content{
		width: 100%;
		margin-right: 0;
	}
	.aside{
		display: none;
	}
}

// >= 1200px 时inner-center为1200px
@media only screen and (min-width: 1200px){
	.inner-center{
		width: 1200px;
	}
	.content{
		width: 880px;
	}
	.aside{
		width: 300px;
	}
}

流体内容断点法

html代码如下：

.innner-center
	.content>.content-inner
	.aside

css代码如下：

.inner-center{
	margin-left: 20px;
	margin-right: 20px;
}
.content{
	float: left;
	width: 100%;
}
.content-inner{
	margin-right: 320px;
}
.aside{
	float: left;
	width: 300px;
	margin-left: -300px;
}

// <= 768px 右边栏不显示
@media only screen and (max-width: 768px){
	.content-inner{
		margin-right: 0;
	}		
	.aside{
		display: none;
	}
}
// <= 1024px 右边栏宽度为240px
@media only screen and (max-width: 1023px){
	.content-inner{
		margin-right: 260px;
	}		
	.aside{
		width: 240px;
		margin-left: -240px;
	}
}
// >= 1241px 最大宽度为1200px
@media only screen and (min-width: 1241px){
	.inner-center{
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
}

media screen & media only screen
http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries