css之display样式,padding,margin

最新推荐文章于 2023-10-18 15:49:39 发布

weixin_30483013

最新推荐文章于 2023-10-18 15:49:39 发布

阅读量155

点赞数

原文链接：http://www.cnblogs.com/momo8238/p/7410957.html

版权

1. 块级标签变成行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color:red;display:inline;">123</div>
    <span style="background-color:red">123</span>
</body>
</html>

效果：

2. 行内标签变成块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color:red;display:inline;">123</div>
    <span style="background-color:red;display:block;">123</span>
</body>
</html>

运行结果：

3. display:none; 让标签消失。display:block/inline;标签恢复。

display: inline;

display:block;

display:inline-block; 兼有两者的属性（具有inline,默认自己有多少占多少；具有block，可以设置高度，宽度等。）

行内标签：无法设置高度，宽度，边距，padding, margin

块级标签：可以设置高度，宽度，边距，padding, margin。默认占父亲标签的100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="display:inline-block;background-color:red;height:50px;width:70px;">Alex</span>
    <a style="background-color:red;">Eric</a>
</body>
</html>

运行结果：