display 属性规定元素应该生成的框的类型。
下面主要围绕display:block; 和 display:inline-block,以及width、 height、margin、padding 展开
基本代码如下
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<style>
body {
margin: 0;
}
.block {
background: red;
}
.inline {
background: yellow;
}
.block,
.inline {
width: 200px;
height: 50px;
margin: 10px;
padding: 10px;
}
</style>
</head>
<script>
</script>
<body>
<div class="block">
display:block
</div>
<div class="block">
display:block
</div>
<span class="inline">
display:inline
</span>
<span class="inline">
display:inline
</span>
</body>
</html>
复制代码对html和css熟练标准=>看到代码能够想到界面的样式
上面的代码作为面试题要好于生硬的问道:" display:block；和 display:inline；有啥区别"
div 标签，块级元素，display属性默认为block，span标签，行内元素，display属性默认为inline
标签是指在HTML中，元素是指在浏览器中
类选择器和分组选择器
.block 是一个类选择器，区别在于前面的符号 .，标签可以通过class属性使用。
.block,.inline 是分组选择器，区别在于前面的符号 ,，表示.block和.inline 共有的样式
可以通过开发者工具查看
width、 height、margin、padding 表象的不同
div和span 有用同样的width、 height、margin、padding
然而在span中，width、 height 是完全失效的。
margin 只有水平方向起作用
橙色代表margin,绿色代表padding
而padding在span中的表象是不同于div的
通过开发者工具为元素写临时的内联样式
可以在开发者工具的element.style 体验下，等同于在标签上写内联样式
输入p 后 会给出提示，本身自带过滤功能。 可以通过键盘的上下方向键选择，蓝色背景表示当前选中，按下tab键快速填充属性，接着输入100px
可以通过上下方向键调节属性值的大小，同时按住ctrl，幅度为100，同时按住shift ，幅度为10，同时按住alt幅度为0.1
padding 和 100px 都可以再次点击，完全删除任何一个，都会删除整个声明。
同样的改变作用div为
关于padding 可看 www.w3school.com.cn/cssref/pr_p…
彩蛋
<div style="text-align: center">
<span class="inline" style="padding:10px">
display:inline;
</span>
</div>
复制代码通过开发者工具不断改变padding的值
上一章 - 3 document.body为什么是null
下一章 - 5 css中的border属性