目录
4-1 HTML5为了使img元素可拖放，需要增加什么属性？
0、前言
因为任务3的内容太多了，我将其分为基础任务的上下和扩展任务加自测内容共三个部分，该部分主要记录的是扩展任务和自测内容。
一、CSS盒子模型
1-1 深⼊理解CSS盒⼦模型多层次含义
CSS盒子模型理论：页面中所有元素都可以看成一个盒子，并且占据一定的页面空间。
如图所示，为一个CSS盒子模型的具体结构
一个页面由许多这样的盒子组成。这样的盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：
- 一是理解单独一个盒子的内部结构（往往是padding）；
- 二是理解多个盒子之间的相互关系（往往是margin）；
可以把每个元素都看成一个盒子，盒子模型是由四个属性组成的：content(内容)、padding(内边距)、margin(外边距)和border(边框)。此外，在盒子模型中，还有宽度（width）和高度(height)两大辅助性属性。记住所有的元素都可以看成一个盒子。
从上面我们知道，盒子模型的组成部分有四个，如下表所示：
| 属性 | 说明 |
| content(内容) | 内容，可以是文本或图片 |
| padding(内边距) | 内边距，用于定义内容与边框之间的距离 |
| margin(外边距) | 外边距，用于定义当前元素与其他元素之间的距离 |
| border(边框) | 边框，用于定义元素的边框 |
1-2 内容、边框、边距
1、内容区
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容。这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他三个部分都是可选的。
内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言的，并不包括padding部分。
当内容过多，超出width和height时，可以使用overflow属性来指定溢出处理方式。
2、内边距
内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。关于内边框的属性有5种：padding-top、padding-bottom、padding-left、padding-right，以及综合了以上4个方向的简写内边距属性padding。使用这5种属性可以指定内容区与各方向边框之间的距离。
3、外边距
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑的连接在一起，是CSS布局的一个重要手段。
外边距的属性也有5种：margin-top、margin-bottom、margin-left、margin-right,以及综合了以上四个方向的简写外边距属性margin。
同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此产生盒子的重叠效果，这就是传说中的"负margin技术"。
4、边框
在CSS盒子模型中，边框和我们之前学过的边框是一样的。边框属性有border-width、border-style、border-color，以及综合了这三类属性的简写边框属性border。
其中，border-width指定边框宽度，border-style指定边框类型，border-color指定边框颜色。
二、标准⽂档流（浮动与定位）
2-1 正常文档流
什么叫文档流？简单的来说，就是指元素在页面中出现的先后顺序。那什么叫正常文档流呢？
正常文档流，又称为普通文档流或普通流，也就是W3C标准中所说的"normal flow"。我们先来看一下正常文档流的简单定义：”正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。“，也就是说，正常文档流指的是默认情况下页面元素的布局情况
举例：
正常文档流的HTML代码如下，，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div></div>
<span></span><span></span>
<p></p>
<span></span><i></i>
<img />
<hr />
</body>
</html>分析图：
分析：对于div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此如果两个行内元素相邻就会位于同一行，并且从左到右排列。
2-2 脱离文档流
脱离文档流，指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说，如果我们想要改变正常文档流，可以使用两种方法：浮动和定位。
1、浮动
在图书的排版中，文本可以按照实际需要围绕图片排列。我们一般把这种方式称为"文本环绕"。在前端开发中，使用了浮动的页面元素其实就像在图书排版里被文字包围的图片一样。这样对比，就很好理解了。
浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。例如，我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本围绕着这个元素。
语法：
float:取值;说明：
float属性取值只有2个，如下表所示
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义父元素样式*/
#father{
width;300px;
background-color: #0C6A9D;
border: 1px soild silver;
}
/*定义子元素样式*/
#father div{
padding:10px;
margin: 15px;
}
#son1{
background-color:hotpink;
}
#son2{
background-color:#FCD568;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*定义父元素样式*/
#father{
width;300px;
background-color: #0C6A9D;
border: 1px soild silver;
}
/*定义子元素样式*/
#father div{
padding:10px;
margin: 15px;
}
#son1{
background-color:hotpink;
}
#son2{
background-color:blue;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
</body>
</html>
浏览器预览效果如图：
分析：
在这个代码中，定义了3个div块：一个是父块，另外两个是它的子块。为了便于观察，我们为每一个块都加上了背景颜色，并且在块与块之间加上了一定的外边距。
从上图可以看出，如果两个子块都没有设置浮动，由于div是块元素，因此会各向右延伸，并且自上而下排列。
1、设置第一个div浮动
#son1{
background-color:hotpink;
float:left;
}浏览器预览效果如图所示
分析：
由于box1设置向左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。接着相邻的下一个div元素（box2）就会紧贴着box1，这是由于浮动而形成的效果。
2、设置第2个div浮动
#son2{
background-color:#FCD568;
float:left;
}浏览器预览效果
分析：
由于box2变成了浮动元素，因此box2也和box1一样，宽度不再延伸，而是由内容确定宽度。
浮动，可以使元素移向左边或者右边，并且允许后面的文字或者元素环绕它。浮动最常用于实现水平方向上的并列布局，如两列布局、多列布局，也就是说，如果你想要实现两列并排或者多列并排的效果，首先可以考虑的是使用浮动来实现。
2、定位
CSS定位使你可以将一个元素精确地放在页面指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4中方式。
固定定位（fixed）、相对定位（relative）、绝对定位（absolute）、静态定位（static），这四种方式都是通过position属性来实现的。
三、完成下图的CSS盒子模型布局
3-1 任务分析（包含我的思路过程）
首先刚开始看到这张盒子模型分布，我是不懂得如何去实操的。因此跟随指引，先去看了CSS盒子模型的基本知识，包括边框、边距和标准文档流以及布局模式。看完之后于一个任务整体仍然没有清晰的想法，但是总不能拖着不做吧！硬着头皮开始一点一点的去做。然后在过程中再一点点的学习。当然整个过程我就不详述了，不然废话太多，下面是完成任务之后整个的破题思路。
首先我们应该创建一个父元素，我定义为div，为div完成初始化的参数配置，包括宽、高、颜色和边框。之后在创建两个子元素，我定义为div_1和div_2，div_1用来装1（div1）、2(div2)两个盒子，div_2用来装3(div3)、4(div4)、5(div5)、6(div6)四个盒子。也就是说div_1作为div的子元素，同时又作为div1和div2的父元素。不过对于div_1和div_2是作为块元素的，按照标准文档流，是从上到下排列占据div的两行，并不符合我们想要达成的div_1和div_2从左到右排列。因此因使其脱离文档流排列。之后采取同样的思路就可以完成剩下的小的布局。
3-2 任务全部代码
PS：因我只做了少量的注释，如果读者在阅读程序中遇到什么问题，可以在评论区留下问题，我闲时会解答。
<!--index.html--完成CSS盒⼦模型布局-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div{
background-color:rgb(252,221,156);
overflow: hidden;/*对整个盒子隐藏超出盒子div的部分*/
width:820px;
height:610px;
border:solid;
border-color: rgb(170,170,170);
}
#div-1
{
background-color:rgb(252,221,156);
float:left;/*脱离文档流，并设置为左浮动*/
color:white;
text-align: center;
width:300px;
height:560px;
margin-top:20px;
margin-left:20px;
}
#div-2
{
background-color:rgb(252,221,156);
float:left;/*脱离文档流，并设置为左浮动*/
color:white;
text-align: center;
width:460px;
height:560px;
margin-top:20px;
margin-left:20px;
}
#div1{
background-color:rgb(197,208,142);
line-height:200px;
width:300px;
height:200px;
border:groove;
}
#div2{
background-color:rgb(197,208,142);
margin-top:20px;
line-height:340px;
width:300px;
height:340px;
border:groove;
}
#div3{
background-color:rgb(197,208,142);
width:460px;
height:270px;
line-height:270px;
border:groove;
}
#div-3{
background-color:rgb(252,221,156);
width:460px;
height:270px;
margin-top:20px;
}
#div4{
background-color:rgb(197,208,142);
justify-content:center;
float:left;/*脱离文档流，并设置为左浮动*/
width:200px;
height:270px;
line-height:270px;
border:groove;
}
#div5{
background-color:rgb(197,208,142);
width:240px;
height:120px;
line-height:120px;
border:groove;
}
#div6{
background-color:rgb(197,208,142);
width:240px;
height:120px;
line-height:120px;
margin-top: 20px;
border:groove;
}
#div-4{
background-color:rgb(252,221,156);
width:240px;
height:270px;
margin-left:220px;
}
#div7{
background-color:rgb(243,164,100);
display:flex;
justify-content:center;
color:white;
position: relative;
top:-480px;
left:360px;
width:150px;
height:120px;
line-height:120px;
}
#div8{
background-color:rgb(243,164,100);
color:white;
display:flex;
justify-content:center;
position: relative;
top:-750px;
left:630px;
width:160px;
height:130px;
line-height:130px;
}
#div9{
float: left;
background-color:rgb(248,204,157);
color:white;
text-align: center;
position: relative;
top:-270px;
left:360px;
width:160px;
height:130px;
line-height:130px;
}
</style>
</head>
<body>
<div id="div"><!--作为整个盒子的父元素-->
<div id="div-1"><!--作为div1和div2的父元素和div的子元素-->
<div id="div1">1</div>
<div id="div2">2</div>
</div><!--div-1结束-->
<div id="div-2"><!--作为div3、div4、div5和div6的父元素和div的子元素-->
<div id="div3">3</div>
<div id="div-3">
<div id="div4">4</div>
<div id="div-4">
<div id="div5">5</div>
<div id="div6">6</div>
</div><!--div-4结束-->
</div><!--div-3结束-->
</div><!--div-2结束-->
<div id="div7">7</div>
<div id="div8">8</div>
<div id="div9">9</div>
</div><!--div结束-->
</body>
</html>四、自测内容
4-1 HTML5为了使img元素可拖放，需要增加什么属性？
1、设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
2、拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。
3、放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()4、进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
举例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>3-2 HTML5哪⼀个input类型可以选择⼀个⽆时区的⽇期选择器？
Input 类型: datetime-local 允许你选择一个日期和时间 (无时区)
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>timenoarea</title>
</head>
<body>
<form action="demo-form.php">
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
3-3 CSS盒⼦模型中的Margin、Border、Padding都是什么意思？
margin:外边距，指的是边框到“父元素”或“兄弟元素”之间的那一部分。
Border：边框样式。
Padding：内边距，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。
3-4 说出⾄少五种常⻅HTML事件
表单事件(Form Events)、键盘事件（Keyboard Events）、鼠标事件（Mouse Events）、多媒体事件(Media Events)、其他事件
3-5 HTML的onblur和onfocus是哪种类型的属性？
onfocus和onblur都是html的表单事件属性
1、onfocus事件属性
onfocus属性在元素获得焦点时被触发，即:获得焦点事件;常用于<input>、<select>以及<a>标签中。
注: onfocus 属性不适合用于以下元素中使用: <base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>或<title>。
2、onblur事件属性
onblur属性在元素失去焦点时触发，即:失去焦点事件;常用于表单验证代码（例如用户离开表单字段)中。
3-6 怎么设置display属性的值使容器成为弹性容器？
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
3-7 JavaScript中有多少种不同类型的循环？
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
3-8 ⽤户搜索某个单词后，JavaScript⾼亮显示搜索到的单词，使⽤哪个语义化标签最合适？
使用mark标签 或者给盒子加底色
五、总结
基于该部分的内容，学的其实是一知半解的，当然主要原因是最近没有成块的时间来学习，只是抽闲来完成一下任务。当然做任务不是目的，目的是掌握语言的使用。当然对于这一部分内容，我的分析和总结仍然存在着诸多的问题，但我只能暂时跳过，否则将浪费大量的时间。应该去系统化的学习，买一本书，或者找一堂课，完整的听下来。路漫漫其修远兮，吾将上下以求索，诸位加油共勉之！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
