任务12

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

1.负边距会改变元素在文档流中的位置,而且相邻的元素位置也会被改变。
2.position:relative相对定位,会使自身元素发生偏移,但是之前占用的文档流位置继续保留,相邻元素的位置不受影响。

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

子容器都要设置浮动;
位于左边栏的盒模型设置margin值为负的父容器宽度,然后在相对位移一个左边栏的宽度;
位于右边栏的盒模型设置margin值为负的子盒模型的宽度,然后在相对位移一个右边栏的宽度;
中间区域需要设定宽度为100%与父容器宽度保持一致;
父容器需要清除浮动,并设置一个相当于边栏宽度的padding值;

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

1.原理:圣杯布局是指左右两边侧边栏宽度固定,中间主内容区块宽度自适应的布局方式。左右侧边栏区块和中间主内容区块均设置浮动,然后中间主内容区块设置padding,使两边留出空白。左侧边栏区块设置margin-left:-100%,右侧边栏区块设置margin-left值为区块本身的宽度再配合相对定位(position:relative)即可。
第1步:先写出圣杯布局的DOM结构(三个块级元素包裹在父容器中,两边的侧边栏宽度固定,中间的主内容区块宽度自适应)。
第2步:父容器中的三个块级元素设置浮动,并设置父容器清理浮动。
第3步:设置第二个子元素margin-left:-100%,第三个子元素margin-left:-100px,侧边栏的两个子元素会往上覆盖中间主区块元素。
第4步:设置父容器的padding:0 100px,再分别设置左侧边栏相对定位position:relative;left:-100px;右侧边栏相对定位position:relative;left:100px。这样圣杯布局就完成了。


QQ截图20160828234032.jpg

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

原理:双飞翼布局与圣杯布局的不同点在于,它不是用主区块中设置padding来形成三栏的方式,而是在主区块中设置一个子元素,再对这个子元素设置外边距的值来形成三栏。

QQ截图20160829080629.jpg

推荐阅读更多精彩内容

  • 1.负边距在让元素产生偏移时和position:relative有什么区别? 通过负边距进行偏移的元素,它会放弃偏...
    饥人谷_任磊阅读 81评论 0 1
  • 一,负边距在让元素产生偏移时和position: relative有什么区别? 答:position:relati...
    kingBirds阅读 35评论 0 0
  • 1.负边距在让元素产生偏移时和position: relative有什么区别? 负边距在让元素产生偏移时,相邻元素...
    璐璐熙可阅读 28评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,839评论 1 88
  • 1.负边距在让元素产生偏移时和position: relative有什么区别? 使用负边距会改变元素在文档流中的位...
    小木子2016阅读 27评论 0 0