margin设置负值后，会怎样？有何应用？
margin负值有什么效果？
- margin-left 负值，元素自身向左移动
- margin-top 负值，元素自身向上移动
- margin-right 负值，右边的元素向左移动
- margin-bottom 负值，下边的元素向上移动
margin负值的应用
- 增加宽度
- 圣杯布局
- 双飞翼布局
演示代码
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px;
border: 5px solid red;
}
.div1 {
width: 200px;
height: 200px;
background: green;
/*
margin-left: -50px;
margin-right: -50px;
margin-top: -50px;
margin-bottom: -50px;
*/
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
</div>
</body>
</html>
如何实现圣杯布局
什么是圣杯布局
两边固定宽度，中间自适应宽度
难点
-
margin-left:-100%; 100% 是父级宽度的100%，即位移到父级的最左边
-
margin-right:150px; 其他元素当他宽度少了150px，其他元素就会自动向那边以位移等方式补齐
演示代码
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
padding-left: 200px;
padding-right: 150px;
background-color: #ccc;
}
.item {
float: left;
color: #fff;
font-size: 20px;
}
.content {
width: 100%;
height: 200px;
background-color: green;
}
.left-item {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: red;
}
.right-item {
width: 150px;
margin-right: -150px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="content item">@说人话的前端-bilibili</div>
<div class="left-item item">left-item</div>
<div class="right-item item">right-item</div>
</div>
</body>
</html>
如何实现双飞翼布局
什么是双飞翼布局
左右宽度固定，中间宽度自适应，中间的内容优先加载
演示代码
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.item {
float: left;
color: #fff;
font-size: 20px;
}
.container {
width: 100%;
background-color: #ccc;
}
.content {
margin-left: 200px;
margin-right: 150px;
height: 200px;
background-color: green;
}
.left-item {
width: 200px;
margin-left: -100%;
background-color: red;
}
.right-item {
width: 150px;
margin-left: -150px;
background-color: blue;
}
</style>
<body>
<div class="container item">
<div class="content">@说人话的前端-bilibili</div>
</div>
<div class="left-item item">left-item</div>
<div class="right-item item">right-item</div>
</body>
</html>
如何清除浮动？手写clearfix
清除浮动的方法
- 父级加 overflow:hidden
- 父级设置 clearfix
- 父级也浮动
手写clearfix
.clearfix:after {
content: "";
display: block;
clear: both;
}
演示代码
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
<style>
/* .clearfix:after {
content: "";
display: block;
clear: both;
} */
.clear {
clear: both;
}
.box {
/* overflow: hidden; */
/* float: left; */
width: 500px;
margin: 50px auto;
border: 5px solid red;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left">left</div>
<div class="clear"></div>
</div>
</body>
</html>
手写垂直水平居中
常见的垂直水平居中方法
- position+margin负值的方法（宽高固定）
- position+margin:auto （固定宽高)
- display:table-cell + vertical-align:middle （固定宽度）
- position+transform（不需要固定宽高）
- flex （不需要固定宽高）
演示代码
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 500px;
height: 500px;
border: 5px solid red;
}
.item {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -150px;
width: 200px;
height: 300px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="item">@说人话的前端 - bilibili</div>
</div>
</body>
</html>
