CSS盒子模型
2020-02-05 本文已影响0人
钢笔先生
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本身是行内元素，不是块元素。
截屏2020-02-05下午11.22.10.png
将行内元素改成块元素即可：
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.
