Learn HTML&CSS the hard way IX

Q:视频中的.main中的float是不是可以去掉呢,因为.ct已经清除浮动了。

Learn HTML&CSS the hard way IX_第1张图片

A:单纯的防止父元素塌陷的话可以不加,然而为了设置三栏式布局,之后需要将aside模块设置负边距,使其上移,如果main不设置float的话,aside就无法上移,因为块级元素都占了一行。

Q:视频中的第四个样式:.main .wrap可以删去main,直接设置wrap吧。

A:经测试删除后正常。


负边距在让元素产生偏移时和position: relative有什么区别?


负边距的设置像素时是相对自己偏移,按百分比设置偏移时是按照父容器的百分比,并且偏移后原始位置不保留。


Learn HTML&CSS the hard way IX_第2张图片


Learn HTML&CSS the hard way IX_第3张图片

如图,将父容器设置为1000px,main设置为50%,当column1设置负边距-20%时,移动了200px;所以是根据父容器的宽度设定的。

这里有个小问题,我对.mian添加了相对定位,再让column1偏移,蓝色的方块会被挡上,请问是为什么呢?


Learn HTML&CSS the hard way IX_第4张图片


Learn HTML&CSS the hard way IX_第5张图片
Learn HTML&CSS the hard way IX_第6张图片

相对定位是相对自己偏移,并且偏移后原始位置保留。

使用负 margin 形成三栏布局有什么条件?


1.三栏放在一个容器中,并且浮动。

2.中间窗体宽度100%,左右固定宽高。

3.两栏设置负边距。

圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤


1.父容器内设置三个浮动div,注意使用伪类清除浮动。

2.其中第一个主模块宽度设置为100%,其他两个宽度自定义。

3.父容器设置左右内边距,宽度为两边栏宽度。

4.左边栏设置margin-left:100%,右边栏设置margin-left:-宽度。

5.两边栏设置相对定位,分别左右移动自己宽度大小。

双飞翼布局的原理? 实现步骤?


1.父容器设置三个浮动div,第一个主盒子需增加一个div,注意使用伪类清除浮动

2.主盒子宽度100%,左右两边盒子宽高自定

3.左边的设置margin-left:-100%,右边的设置为margin-right:自己的宽度

4.为主盒子的子div设置左右外边距,大于左右两边盒子的宽度

代码


code1

code2

code3

code4

code5

本教程版权归INTERNALENVY和饥人谷所有,转载须说明来源

你可能感兴趣的:(Learn HTML&CSS the hard way IX)