[上海|结业弟子]QA-谷勇亮|2019年07月07日的日报-技能树.IT修真院

发表于： 2019-07-07 23:59:12

1 925

今天完成的事：

试着做了一下深度思考

HTML文件里开头的Doctype有什么作用

<!Doctype>声明要位于文档的最前面，在<html>标签前面，作用是用来告诉浏览器HTML是用哪个版本编写的，如果不声明的话，有可能造成网页布局变乱。

<!DOCTYPE html>
<html lang="en">

如何理解盒模型及其content、padding、border、margin？

网页上的元素对象，可以看成一个盒子形状的抽象，从内到外，分别为content(内容）padding(填充） border(边框） margin（边距）

<style>
div {
background-color: orange;
width: 100px;
padding: 10px;
border: 20px solid blue;
margin: 30px;
}
</style>
</head>

<body>
<div>填充10px，边框20px，边距30px</div>

常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别

inline使元素变为行内元素，可以与其他行内元素共享一行

inline不能更改width，height，可以设置padding，但margin只能设置left和right。

<style>
p {
display: inline
}
</style>
</head>

<body>
<p>段落1</p>
<p>段落2</p>
</body>

block使元素变为块级元素，独占一行

block可以更改width，height，padding，margin

<style>
p {
display: block
}
</style>

inline-block既可以像inline与其他行内元素共享一行，也可以像block设置属性

但是两个行内元素之间会有间隙，原因是因为换行，解决方法是在父元素里添加{font-size:0}

明天要做的事：巩固一下学到的标签，属性，前面的有些遗忘了

问题：在div里设置了边框属性但不显示，添加了颜色才显示

<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px;
padding: 25px;
margin: 25px;
}
</style>
</head>

<body>

<div> 25px 内间距，25px 外间距、25px 边框。</div>

div {
background-color: lightgrey;
width: 300px;
border: 25px solid blue;
padding: 25px;
margin: 25px;
}
</style>
</head>

<body>

<div> 25px 内间距，25px 外间距、25px 边框。</div>