Learn HTML&CSS the hard way IX

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

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

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

A:经测试删除后正常。


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


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



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

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



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

使用负 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和饥人谷所有,转载须说明来源

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 想出现外边距合并: ...
    INTERNALENVY阅读 2,929评论 4 0
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,909评论 0 6
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 4,560评论 0 2
  • CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...
    web前端学习阅读 5,521评论 1 38