[真传弟子]JS-赵立鼐|2019年10月30日的日报-技能树.IT修真院

发表于： 2019-10-30 17:10:57

3 894

今日完成：

看了任务一的验收标准，稍微修改了下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,,maximum-scale=1,user-scale=no">
    <title>Sudoku</title>
    <link rel="stylesheet" type="text/css" href="../css/sudoku.css">
</head>
<body>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>

</body>
</html>

* {margin: 0; padding: 0}

.one {
    width: 30%;
    background-color: orange;
    border-radius: 10%;
    margin: 1%;
    border:1px solid transparent;
    padding-bottom:30%;
    float: left;
}

body {
    width: 100%;
    padding-left: 1%;
    padding-top: 1%;
    border: 1px solid transparent;
}

关于css控制样式时不得使用id这一点不太明白，为什么呢？

任务一的深度思考：

1、HTML文件里开头的DOCTYPE有什么作用呢？

doctype是document type 的缩写。它是用来声明文件的类型及版本的。

如<!doctype html> 声明了该文件为html5类型。这样浏览器就可以正确的解析该文件了。

2、如何理解盒子模型及其content、padding、border、margin?

css标准会为html的每个元素生成一个盒子模型，这个模型有四个重要的属性：

content:内容区比如图片，文字等。

padding:内边距指边框与内容区的距离，又可分为top、right、bottom、left四个方向。

border:边框可以设置其宽度，样式，颜色等。

margin:外边框指边框与相邻元素的距离，又可分为top、right、bottom、left四个方向。

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

inline元素:

<a></a>

<br>

block元素：

<hr>

<p></p>

inline-block元素：

<input>

内联元素（inline元素），也叫行内元素。一个行内元素只占据它对应标签的边框所包含的空间

特点：

1、元素从左到右流动布局

2、元素的高度和宽度，以及顶部和底部边距不可设置

3、元素的高度也就是它自身的建议行高

4、内联元素转block元素：display:block

块级元素（block)，块级元素占据其父元素（容器）的整个空间

特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

4、block元素转inline元素： display:inline

内联块级元素（inline-block）,就是同时具备内联元素、块级元素的特点

特点：

1、和其他元素都在一行上，左右布局

2、元素的高度、宽度、行高以及顶和底边距都可以设置

3、相当于添加浮动 float:left; 但是不建议使用inline-block,最好使用float加clearfix;

4、如何使用浏览器的F12调试页面？

点击f12，切换到开发者模式：

这个时候页面分为左右两个部分，左边是浏览器正常解析后的页面，右边为调试页面。

在右边选择Elements选项

，这时右边页面又会分为上下两个部分。

可以看到上边是我们写的代码，下方展示的是某一个元素的具体信息（最大的一个部分是盒子模型）

我们可以直接在上方代码区选择某一元素来分析，

或者是点击最上方左边这个图标，然后在页面上选择我们想要查看的某个元素

如，查看九宫格中某一个格子

鼠标放上面就会显示出它的一些信息：background、margin、padding等

鼠标点击后后发现，右边的代码行也自动同步到了指定的那一行，还有下面也同步到了div.one

这时我们就可以直观的看到了这个格子的盒子模型所有的属性值了

当然f12调试不止这点东西啦，以后再慢慢发掘吧。

5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？

1）使用flex布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,,maximum-scale=1,user-scale=no">
    <title>flex</title>
    <link rel="stylesheet" type="text/css" href="../css/flexDemo.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

* {
    padding: 0;
    margin: 0;
}

div {
    background-color: orange;
    width: 25%;
    padding-top: 25%;
    border-radius: 5%;
    margin: 1%;

}

body {
    width: 100%;
    padding-top: 10%;
    padding-left: 10%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

2）使用grid布局：

div {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;


}

p {
    background-color: orange;
    width:90%;
    padding-bottom: 90%;
    border-radius: 5%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width,user-scale=no">-->

    <title>grid</title>
    <link rel="stylesheet" type="text/css" href="../css/grid.css">
</head>
<body>
<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>


</div>
</body>
</html>

所以，有四种布局方式：

table、float、flex、grid

float刚开始并不是为了用来网页布局的，而是用来解决图文信息中图片与文本冲突的问题。它要不table布局方便不少，不过float随之而来的带来了”浮动高度塌陷问题“：

如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0.

之后为了解决这个问题搞出来了一系列清除”浮动高度塌陷“的策略方法，非常麻烦。

flex布局很好的解决了float的问题，非常好用。不过flex不兼容IE8以下的浏览器。

大部分情况下flex布局已经能满足需求，不过flex只能做一维布局，也就是说，flex一次只能作用一条线。如果想要进行二维布局，必须反转坐标二次弹性，这样会显得不够优雅，这时候grid布局就发展起来了。

6.IDE是什么？它和文本编辑器相比有什么优缺点？

集成开发环境（IDE, Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。

而一般的文本编辑器只提供文本编辑的功能。编辑器的重点是编辑，而IDE的重点是开发。

7、加和不加meta的viewport有什么区别？

meta viewport是用来做移动端页面适配的。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,,maximum-scale=1,user-scale=no">

上面代码将视口的宽度设置为设备独立像素宽度，默认无缩放，并且也不允许用户缩放。

参数：

1）width : 设置视口的宽度，可以是具体的像素值，也可以是特定参数，例如device-width

2) initial-scale : 设置页面初始缩放值，为一个数字，可以为小数

3）minimum-scale : 设置视口最小缩放值，一个数字，可以为小数

4）maximum-scale : 设置视口最大缩放值，一个数字，可以为小数

5） height : 设置视口的高度，此使用通常不会使用。

6）user-scale : 设置用户是否可以缩放

遇到的问题：

提交的任务一中还存在一些问题，比如不要给body加样式，css样式不要使用id的方式引用。

收获：

最大的收获应该就是了解了除了float之外的其他几种布局方式

以及他们之间的优缺点

以后在深入地学习一下吧，毕竟九宫格布局有点简单。

明日计划：

重新提交任务一

完成任务二的内容

返回列表

【任务1】 [真传弟子]JS-赵立鼐 | 2019年10月30日 的日报 中品

评论

分享到

【任务1】 [真传弟子]JS-赵立鼐 | 2019年10月30日的日报中品