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；有啥区别"
image.png
div 标签，块级元素，display属性默认为block，span标签，行内元素，display属性默认为inline
标签是指在HTML中，元素是指在浏览器中
类选择器和分组选择器
.block 是一个类选择器，区别在于前面的符号 .，标签可以通过class属性使用。
image.png
.block,.inline 是分组选择器，区别在于前面的符号 ,，表示.block和.inline 共有的样式
可以通过开发者工具查看
image.png
width、 height、margin、padding 表象的不同
div和span 有用同样的width、 height、margin、padding
然而在span中，width、 height 是完全失效的。
margin 只有水平方向起作用
image.png
橙色代表margin,绿色代表padding
而padding在span中的表象是不同于div的
通过开发者工具为元素写临时的内联样式
可以在开发者工具的element.style 体验下，等同于在标签上写内联样式
image.png
输入p 后 会给出提示，本身自带过滤功能。
可以通过键盘的上下方向键选择，蓝色背景表示当前选中，按下tab键快速填充属性，接着输入100px
可以通过上下方向键调节属性值的大小，同时按住ctrl，幅度为100，同时按住shift ，幅度为10，同时按住alt幅度为0.1
padding 和 100px 都可以再次点击，完全删除任何一个，都会删除整个声明。
image.png
image.png
同样的改变作用div为
image.png
关于padding 可看 http://www.w3school.com.cn/cssref/pr_padding.asp
彩蛋
<div style="text-align: center">
<span class="inline" style="padding:10px">
display:inline;
</span>
</div>
通过开发者工具不断改变padding的值
上一章 - 3 document.body为什么是null
网友评论