目录
1. margin 特性总结
2. 几道笔试题
1. margin 特性总结
1.1. 横向格式化
示例1:利用 margin 实现块级元素水平居中;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: rgba(0, 0, 0, 0.1);
}
.center {
width: 300px;
height: 300px;
border: 5px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
示例2:利用负外边距实现竖直居中;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* demo */
.dateinput {
border: 1px solid blue;
}
/* dateinput */
.dateinput {
position: relative;
display: inline-block;
}
.dateinput label,
.dateinput input {
font-size: 16px;
}
.dateinput input {
box-sizing: border-box;
width: 150px;
padding: 0;
line-height: 1.5;
padding-right: 20px;
}
.dateinput img {
position: absolute;
top: 50%;
right: 5px;
width: 16px;
height: 16px;
margin-top: -8px;
}
</style>
</head>
<body>
<div class="dateinput">
<label>日期:</label><input type="text" value="2020-01-01"/><img src="date.png">
</div>
</body>
</html>
1.2. 纵向格式化
示例1:未明确声明容纳块高度,百分数高度将被重置为 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.outer {
border: 2px solid green;
}
.inner {
border: 2px solid blue;
}
.inner {
height: 100%;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Hello Webj2ee!
</div>
</div>
</body>
</html>
示例2:百分比margin、padding都是相对于父元素的width;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.outer {
border: 2px solid green;
width: 400px;
height: 200px;
}
.inner {
border: 2px solid blue;
margin: 10%;
padding: 10%;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Hello Webj2ee!
</div>
</div>
</body>
</html>
示例3:非替换行内元素行高不会被上下边距、边框影响;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-color: green;
width: 200px;
height: 200px;
}
span {
padding: 30px 0;
margin: 30px 0;
}
</style>
</head>
<body>
<div>
<span>line-height,font-size 帮助我们确定行内框(inline box)的高度。
line box的高度是最高的inline box的顶部到最低(这里指显示位置)的inline box的底部之间的距离。
</span>
</div>
</body>
</html>
2. 几道笔试题
题目01:
题目02:
题目03:
参考:
《CSS 权威指南 第四版》 《前端程序员 面试笔试真题与解析》