margin的布局剖析Word文件下载.docx
- 文档编号:13613218
- 上传时间:2022-10-12
- 格式:DOCX
- 页数:7
- 大小:19.04KB
margin的布局剖析Word文件下载.docx
《margin的布局剖析Word文件下载.docx》由会员分享,可在线阅读,更多相关《margin的布局剖析Word文件下载.docx(7页珍藏版)》请在冰豆网上搜索。
(图一)
相信对于这样一个网页呈现,你不会陌生。
那么你有多少种方案可以达成该布局?
我想,4至5种应该是保守估计吧?
这次,我们只看
是如何做的。
absolute+margin方式
HTML
<
headerid="
hd"
>
头部<
/header>
divid="
bd"
<
asideid="
aside"
侧边栏固定宽度<
/aside>
main"
主内容栏自适应宽度<
/div>
footerid="
ft"
底部<
/footer>
CSS
#aside{
position:
absolute;
top:
0;
left:
width:
200px;
}#main{
margin-left:
210px;
}
如上关键代码,我们即可实现
图一
布局,该布局有一个特点就是,#main
可以自适应可用空间。
假定
HTML
是给定的,我们来解读一下
代码:
我们知道块级元素的特性之一是换新行,也就是说,如果想让
#main
和
#aside
在同行显示,我们要么改变其显示属性为
inline-level(即之前说的inline-block布局方式),要么改变其流方式(absolute,float,flexandetc…)。
如上述代码,我们使用了
absolute,即让‘#aside’脱离常规流,通过绝对定位到想要的位置。
主内容栏自适应宽度
同时你会发现,我们并有改变
的显示属性或者流方式,也就是说其仍然具备块级元素的特性,所以它会自动适应剩余宽度,即我们常说的自适应宽度。
我们并不希望
区域会包含
在内,于是利用
给‘#aside’预留出足够其显示的空间,即可达成我们所要的布局。
可能你会问为什么是
margin-left:
210px
而不是
200px,实际确实应该是
200px,多出来的
10px
只是为了创建一个列间隙,与布局实现无关。
来看看具体的实现
DEMO1:
margin+absolute布局:
左栏固定主内容自适应
就这样,是不是很简单?
其实它还有亮点,那就是:
任意调整列顺序
在不修改
的情况下,只需简单的修改
CSS,我们即可让左右两栏的顺序调换,来看代码:
right:
margin-right:
其实现原理没变,同样看看
DEMO2:
右栏固定主内容自适应
主内容优先显示
可以更Cool一点,你觉得呢?
很多时候,你也许会考虑到,不论在何种情况下,总想保证主要的内容优先于次要的内容呈现给用户,那么,怎么做?
很简单,只需要将主要内容的HTML排在次要内容的HTML之前即可,因为它是顺序加载渲染的。
我们可以这样:
是的,我们只需要将
的HTML挪到
的HTML前面,令人兴奋的是,改变HTML之后,CSS不需要做任何改变。
我们来看
DEMO3:
左栏固定主内容自适应,主内容有限显示
当然,调正列顺序的
DEMO4:
右栏固定主内容自适应,主内容有限显示也同样简单,我们只需要写HTML时注意一下即可。
致命缺陷
列举了
absolute+margin
布局的很多优点,但只说一个问题,就足以让你在是否选用这种方式时深思熟虑,是什么呢?
我们知道
absolute
是定位流,脱离正常排版,也就是说绝对定位元素不影响其上下文的排版方式,你意识到我想说什么了么?
OK,用代码来演示:
侧边栏固定宽度,我的内容可能比主内容多,高度比主内容栏高<
看完代码,估计你猜到了。
是的,#aside
无法撑开父元素的高度,它将会溢出父元素区域,结果如下图:
(图二)
来看看这缺陷所导致的情况
DEMO5:
margin+absolute布局的致命缺陷
此时假设你设置父元素
overflow:
hidden
那么溢出部分将会被裁减,同样不符合布局意图,无法可破。
所以在内容量不可控的场景,不推荐使用这种方式。
float+margin方式
absolute+margin
方式一样,float+margin
方式一样是经典的利用来布局的方案,并且被更广泛使用。
我们仍然以
为例,来看代码:
float:
left;
float,即从图文环绕形态演变而来。
当
定义了
float,那么紧随其后的元素将会环绕在其周围。
不过环绕并不是我们想要的结果,我们想要的是‘#main’也自成封闭矩形,所以利用
留出足够
显示的空间,中断环绕即可。
当然,此时
也是自适应宽度的,来看具体实例
DEMO6:
margin+float布局:
它是否也具备可任意调整列顺序的特点?
何不一试?
right;
看过
DEMO7:
右栏固定主内容自适应,你会发现,是的,这种方式也支持任意调整列顺序,很棒。
从这种趋势看来,貌似
float+margin
的方式会成为黑马,不过遗憾的告诉你,这种方式无法支持主内容优先显示。
但我们有更Cool的解决方案。
float+负margin方式
接下来我要说的大家可能都猜到了,对,经典的圣杯布局。
至于圣杯的名字由来,大家可以自行Google,这里不做赘述。
恩,HTML当然是使用主内容优先显示的那种:
#bd{
padding-left:
}#aside{
relative;
-210px;
-100%;
100%;
如上代码,既是圣杯布局的核心Code,如果你看懂了,你会发现,这其实很简单,不是么?
简单解释一下上面的CSSCode,首先我们是在做一个左侧固定宽度,右侧自适应宽度的布局。
我们说过要让块级元素在同行显示的条件:
改变显示方式,改变流方式,这里我们选择了使用
float来将
变成浮动流。
OK,这时我们具备
能在同行显示的前置条件。
我们知道,浮动元素其宽度如果没有显式定义,则由其内容决定。
正好,#aside
是定宽的,所以显示给它定义width:
200px,但此时
该怎么办?
不设置
width
不对,因为宽度将被内容左右,设置
width:
100%
也不对,因为这样的话,就没有
的立足之地了,正确的应该是width:
calc(100%-200px),不是么?
可惜,这是新特性,只好作罢。
变通?
是的,有的时候稍微换个思路,你会觉得豁然开朗。
不是要自适应吗?
那就给它个
100%,怎么做?
我们在包含块
#bd
中就将
#aside的宽度刨除,宽度全部都给
#main。
恩,我们只需要这样
#bd{padding-left:
}(10px仍然是用来做间隙的),这时
就可以设置
了,由于
设置了padding,所以已在左边预留出了一块宽
的区域。
此时的问题在于如果将
挪到这个地方,你想对了,我们是在聊
负margin
布局,自然需要利用上。
#aside{margin-left:
}
这样可以了吗?
很明显,这样还不行,此时
和#main
的起始位置将会重合,因为
的
margin-left
计算值是相对包含块来计算的,而此时包含块的宽度等于
的宽度。
如何让
再向左偏移
210px?
显然
是不行了,因为我们已经用掉它了。
如果你看过之前的文章的话,你可能还记得,有一篇文章讲
margin系列之与相对偏移的异同。
恩,是的,这时我们可以借助相对偏移。
向左偏移
是件很简单的事:
#aside{position:
left:
}。
至此,你的布局OK了,这就是圣杯的实现方式。
来看已实现好的示例
DEMO8:
圣杯:
当然,圣杯布局必须可以任意调整列顺序,要不,怎么能说是更Cool些的方案呢?
padding-right:
200
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- margin 布局 剖析