学习H5C3Js中的随手记(1)

1.如何实现分割线?

一个 <hr> 水平线标签完事 不过实际开发中不会使用 <hr>标签 而是给通过控制盒子的边框实现

2.在实际开发中我们怎么样控制图片的大小?

第一种:使用class="名字" 在CSS中 .名字 然后通过 width 和 height 设置多少多少 px 然后控制大小

第二种:使用id="名字" 在 CSS种 #名字  然后通过 width 和 height 设置多少多少 px 然后控制大小

其中class在实际开发中最常用

3.在实际开发中怎么样让图片居中对齐?

图片本身是不能居中对齐的 借助其父盒子 而达到居中对齐

css图片水平居中

1.利用margin: 0 auto实现图片水平居中

利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下：

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" />
</div>

2.利用文本的水平居中属性text-align: center

代码如下:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
</div>

https://blog.csdn.net/u014227715/article/details/78395056https://blog.csdn.net/u014227715/article/details/78395056引用自这位大佬的文章

4.创建搜索按钮

法一: 选择input 并且通过 修改type达到

法二: 直接 <button></button>标签 

5.box-sizing: border-box;

CSS3 box-sizing 属性 

   注释:

border-box

告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 注：border-box 不包含 margin。

出自某位大佬的理解:  box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。

注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。

如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的 <div> 容器时，那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。

6.字体 Serif 和 Sans-Serif的区别   (这 部分内容没有块引用 是因为 一点击块引用 就页面崩溃 小卓同学也是 很无语~~~~)

Serif是有衬线字体, 意思是在字的笔画开始与结束地方有额外的装饰,并且笔画的粗细会有所不同.

Sans-Serif 就没有额外的装饰 

对比图: (引用自百度百科)

                

https://baike.baidu.com/item/serif/4199080https://baike.baidu.com/item/serif/4199080

7. 

vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh	viewpoint height，视窗高度，1vh=视窗高度的1%

8.实际开发中 当某一栏 文字数 不一样的时候 更适合用padding

 之所以不是设置固定宽度 是因为 出现盒子宽度不合理的情况  如下图 方式二 的文字宽度 比方式一要 更好 

 

说实话 小卓我分不清 doge

9.PS基本操作

10.怎么让超出部分呈现省略号表示?

css设置超出显示省略号的方法：1、使用“overflow:hidden;”语句把超出的部分隐藏起来；2、使用“text-overflow:ellipsis;”语句在文本溢出包含元素时，显示省略符号来代表被隐藏的部分。

11.布局为啥用不同盒子,我只想用div?

标签都是有语义的,合理的地方用合理的标签.比如产品标题 就用 h , 大量文字段落就用 p

12.为什么用那么多的类名?

类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便

13.到底用margin还是padding?

建议将二者的特性 熟记 --- 对小卓同学我自己的建议 doge

大部分情况下都可以混用,  但是 padding有时候要考虑是否减去一定的高或宽度 

14.自己做没有思路?

布局有很多种实现方式,可以先模仿视频老师的写法,然后再做出自己的风格

还有就是一定要多运用辅助工具,比如屏幕画笔,PS等等

15.网页布局遵循什么准测?

网页布局第一准则: 多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动  

网页布局第二准则: 先设置盒子大小,之后设置盒子的位置

16.新建首页文件 index.html(一般外面的网站的首页 统一规定为 index.html)

17.

"./"：调用同一级  和 下一级的内容

" . ./" 调用上一级的内容

" ../../ " 调用上上一级的内容

18. 固定的盒子应该设置高度

 19. 固定定位跟父级没有关系, 它以屏幕为准\

20.

 通过  &lt  是小于号

          &gt 是大于号  来实现

21. git 中常用命令  git status     git add   git commit -m"提交描述 "

22.XHTML 和 HTML的区别 就是 前者比后者更严谨 但是属于后者的子集 

23.XML 与 HTML 区别:

                        1) 二者的出发点不同 前者也就是 XML是以 传输数据和存储数据为主

                                                          后者也就是HTML是以 显示数据为主

                        2) XML 不是 HTML的替代哦

 24.什么叫资讯?

        说白了就是对于用户有价值的信息

25. 什么是XSL

XSL - 不仅仅是样式表语言

XSL 包括三部分：

• XSLT - 一种用于转换 XML 文档的语言。
• XPath - 一种用于在 XML 文档中导航的语言。
• XSL-FO - 一种用于格式化 XML 文档的语言

什么是 XSLT?

XSLT是一种用于将XML文档转换为XHTML文档或者其他XML文档的语言