美文网首页
Learn HTML&CSS the hard way

Learn HTML&CSS the hard way

作者: INTERNALENVY | 来源:发表于2016-06-15 22:23 被阅读26次

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

相关文章

  • Learn HTML&CSS the hard way

    Q:视频中的.main中的float是不是可以去掉呢,因为.ct已经清除浮动了。 A:单纯的防止父元素塌陷的话可以...

  • Learn HTML&CSS the hard way

    如何调试 IE 浏览器 1.IE7+有自带调试工具,早期版本就手动添加边框颜色来观察盒模型吧。 2.采用模拟器,例...

  • Learn HTML&CSS the hard way

    盒模型包括哪些属性 marginpaddingbordercontentwidthheight text-alig...

  • Learn HTML&CSS the hard way

    CSS选择器常见的有几种? 元素选择器: divulolh1-6pa 类选择器: .class{} id选择器: ...

  • Learn HTML&CSS the hard way

    CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 因为一个网页可能会有很多图片,一个一个请求的话会影响到...

  • Learn HTML&CSS the hard way

    样式有几种引入方式? link 和 @import有什么区别 1. 标签: p { background-colo...

  • Learn HTML&CSS the hard way

    line-height有什么作用? 设置行高。使文本垂直居中(高度须与div一致,并且长度在一行之内)。 如何去查...

  • Learn HTML&CSS the hard way

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流就是普通流,没有定位浮动什么样式的最开始的那一个层面,...

  • Learn HTML&CSS the hard way

    在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 想出现外边距合并: ...

  • Learn HTML&CSS he hard way I

    有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如...

网友评论

      本文标题:Learn HTML&CSS the hard way

      本文链接:https://www.haomeiwen.com/subject/xslpdttx.html