1.负边距在让元素产生偏移时和position: relative有什么区别?
负边距会改变元素在文档流中的位置,其他相邻元素的位置也会随之偏移;而相对定位只是相对自身原始位置进行偏移,不会影响相邻元素的位置。
2.使用负 margin 形成三栏布局有什么条件?
(1)形成三栏的块级元素都浮动;
(2)在三栏块级元素的父容器上添加after来清除浮动;
(3)左侧边栏设置margin-left: -100%;右侧边栏设置margin-left: -自身的宽度;
(4)在父容器上设置padding;
(5)给两边侧边栏设置相对定位,左侧边栏再设置为left: -padding值;右侧边栏设置为left: padding值。
第二种方法:在主内容里面添加一个区块,再设置两侧边栏的margin。
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
原理同使用负margin形成三栏布局是一样的,步骤:
(1)形成三栏的块级元素都浮动;
(2)在三栏块级元素的父容器上添加after来清除浮动;
(3)左侧边栏设置margin-left: -100%;右侧边栏设置margin-left: -自身的宽度;
(4)在父容器上设置padding;
(5)给两边侧边栏设置相对定位,左侧边栏再设置为left: -padding值;右侧边栏设置为left: padding值。
4.双飞翼布局的原理? 实现步骤?
(1)形成三栏的块级元素都浮动;
(2)在三栏块级元素的父容器上添加after来清除浮动;
(3)左侧边栏设置margin-left: -100%;右侧边栏设置margin-left: -自身的宽度;
(4)在主内容区域里添加一个容器,形成一个区块,以此覆盖原来的主内容区域,再设置两侧边栏的margin。