任务12

作者: 饥人谷_dudu | 来源:发表于2016-08-29 08:05 被阅读0次

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

相关文章

  • 任务12

    浏览器兼容 什么是 CSS hack 根据不同厂商的浏览器,比如internet Explore、Safari、M...

  • 任务12

    什么是 CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safar...

  • 任务12

    什么是 CSS hack 由于不同厂商(如Internet Explorer,Safari,Mozilla Fir...

  • 任务12

    什么是 CSS hack 谈一谈浏览器兼容的思路 列举5种以上浏览器兼容的写法 以下工具/名词是做什么的 条件注释...

  • 任务12

    项目介绍简历

  • 任务12

    什么是 CSS hack Hack是针对不同浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针...

  • 任务12

    一、什么是CSS hack 二、 谈一谈浏览器兼容的思路 从产品的角度考虑产品的受众,及受众使用的个浏览器的比例,...

  • 任务12

    负边距在让元素产生偏移时和position: relative有什么区别?负边距让元素产生偏移会影响普通流;pos...

  • 任务12

    1. 什么是 CSS hack由于不同厂商的浏览器,或者是同一厂商的浏览器的不同版本,对CSS的解析认识不完全一样...

  • 任务12

    1、负边距在让元素产生偏移时和position: relative有什么区别? 1.负边距会改变元素在文档流中的位...

网友评论

      本文标题:任务12

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