1、 负边距在让元素产生偏移时和position: relative有什么区别?
- 元素使用负边距，是元素没有脱离文档流，会直接影响到后面元素的布局。
-
position：relative是对元素自身位置的发生偏移，不会影响到后面的元素，但是会遮挡后面的元素。
2、使用负 margin 形成三栏布局有什么条件?
- 1、三栏布局中的三个元素都使用浮动，但是中间的一栏的元素必须放到第一个位置。并且父容器要清除浮动（优先加载）
ct:after{
content: '';
display: block;
claer: both;
}
- 2、父容器要设置padding，padding值=左右两边侧边栏宽度。也就是说padding值是给侧边栏的宽度。
- 3、在左右两个侧边栏设置margin-left值，让三个浮动元素在同一行。
- 4、在左右两个侧边栏设置position：relative；对侧边栏进行定位，最后形成三栏布局。
3、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。
- 圣杯布局是三个元素进行浮动，设置两边元素的负margin值，最后设置position：relative值进行定位，形成圣杯布局。
.ct{ /*设置padding值，预留出两边栏的空间，左右分别对应两侧边栏的宽度*/
padding: 0 100px;
}
.ct:after{ /*为父容器ct清除浮动*/
content: '';
display: block;
clear: both;
}
/*三个栏设置左浮动*/
.main{ /*设置宽度100%形成自适应页面*/
width:100%;
min-height: 200px;
background-color: red;
float: left;
}
.left{
width: 100px;
min-height: 100px;
background-color: yellow;
float: left;
margin-left:-100%; /*通过负边距使left的位置在main的左上角*/
position: relative; /*通过相对定位，值为自身宽度，达到紧贴着main*/
left: -100px;
}
.right{
width: 100px;
min-height: 100px;
background-color: blue;
float: left;
margin-left: -200px; /*通过负边距使right的位置在main右上角*/
position: relative; /*通过相对定位，值为自身宽度，达到紧贴着main*/
left: 200px;
}
<body>
<div class="header">header</div>
<div class="ct">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
4、双飞翼布局的原理? 实现步骤?
- 双飞翼布局，在main元素里面加一个div，设置div的margin-left值和margin-right的值，为两边栏预留出空间。
.wrap{
margin:0 200px; /*设置margin给预留出空间，左右分别是左右侧边栏的宽度*/
background-color: green;
min-height: 300px;
}
.ct:after{ /*给ct元素周围清除浮动*/
content: "";
display: block;
clear: both;
}
/*三栏元素均需设置左浮动*/
.main{
width: 100%; /*宽度100%以适应页面*/
float: left;
}
.left{
width: 200px;
min-height: 300px;
background-color: red;
float: left;
margin-left: -100%; /*负margin定位到左上角，不需要使用相对定位*/
}
.right{
min-height: 300px;
width: 200px;
background-color: blue;
float: left;
margin-left: -200px; /*负margin定位到右上角，不需要使用相对定位*/
}
<body>
<div class="header">header</div>
<div class="ct">
<div class="main">
<div class="wrap">中间部分</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
网友评论