Time: 20200205
截屏2020-02-05下午10.35.57.png依据盒模型,如果我们在单个元素上,想浮动标记一下虚框,则可用margin来做。
在中心是内容元素,注意在border和element中间是padding
负责的区域。
margin
是与其他盒子进行的隐形边界。
Play with box model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>test</p>
<p>test</p>
<a href="http://">test</a>
<a href="http://">test</a>
</body>
</html>
可以看到:
截屏2020-02-05下午11.15.32.png 截屏2020-02-05下午11.15.42.png块元素和行内元素的不同,一个默认占据父元素的全部空间,另一个则是只占一行的部分空间。
如果修改样式:
p, a{
width: 50%;
margin: 20px;
padding: 30px;
border: 2px solid black;
}
会得到失控的效果,因为a
本身是行内元素,不是块元素。
将行内元素改成块元素即可:
p, a{
width: 50%;
margin: 20px;
padding: 30px;
border: 2px solid black;
display: block;
}
截屏2020-02-05下午11.23.02.png
如果将样式改为inline-block
:
p, a{
width: 20%;
margin: 20px;
padding: 30px;
border: 2px solid black;
display: inline-block;
}
显示效果如下:
截屏2020-02-05下午11.24.27.png这种行内块元素不会占据父元素的一整行空间。
END.
网友评论