1.负边距在让元素产生偏移时和position: relative有什么区别?
- 负边距使元素发生偏移时,元素未脱离文档流,相邻元素也会受影响。
- position:relative使元素偏移时,只改变自身的位置,其在文档流中的位置不会改变,不会影响相邻元素的位置。
2.使用负 margin 形成三栏布局有什么条件?
- 父元素里有三个子元素,都浮动,然后父元素清除浮动。左右栏设置宽度。
- 左侧栏设置
margin:-100%;
- 右侧栏
margin:自身宽度的负值;
- 中间栏宽度100%,自适应
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
原理:利用负边距,相对定位来实现。
1.父元素里有三个子元素,都浮动,然后父元素清除浮动。
2.左侧栏设置margin:-100%;
3.右侧栏margin:自身宽度的负值;
4.中间栏宽度100%,自适应,
5.给左右侧栏一个position:relative;来控制位置。
4.双飞翼布局的原理? 实现步骤?
原理:给中间的内容块加一个子元素,痛苦设置margin值形成三栏布局。
1.设置一个父元素里三个子元素,中间栏宽度自适应,左右栏设置宽度。
2.三个子元素动浮动,父元素清除浮动。
3.左侧栏设置margin:-100%;
,右侧栏margin:自身宽度的负值;
4.给中间栏加一个子元素,通过设置左右margin值,形成三栏布局