前端基础知识--01

HTML：超文本传输协议 标记语言 参考：w3cschool
head标签
body标签
标签的类别：
display显示属性
标签的分类：单标签和双标签
标签的属性：
Head中常用的标签：title、meta、style、script、link、
body中常用标签：a、
font标签：

@什么叫做块域标签？什么叫做行内标签？有什么区别和特性？
标签分为两种等级：行内标签和块级标签
块级标签：
独占一行，不和其他元素待在同一行。能设置宽和高。
div、p、h1-h6、ul、li、dl、dt、dd
行内标签：
能和其他元素待在同一行，但是不能设置宽和高
a、span、strong、u、em、
行内块标签：
能和其他元素待在一行，能设置宽和高。
img、input、textare
行内元素和块级元素的区别：
行内元素：与其他行内元素并排，不能设置宽高，默认的告诉就是文字的宽度
块级元素：霸占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

@块标签和行内标签有哪些CSS样式属性可以使用？有哪些区别？

@什么是单标签？什么是双标签？
单标签：
双标签：由开始标签和结束标签两部分构成。

双标签之间不允许交叉嵌套

@HTML标签分为head标签和body标签，分别说明都包含哪些常用的一些标签？
head标签：
title标签：定义 网页的标题
meta标签：一般用于定于页面的特殊信息，例如页面的关键字、页面描述等
link标签：用于引入外部样式文件
style标签：用于定义元素的css样式
script标签：用于定义页面的JavaScript代码，或者引入外部JavaScript文件
body标签：
标题标签：h1 – h6
段内换行：br
段内分组：span
段落：p
预留格式：pre
水平线：hr

@Css或者HTML颜色取值方式有哪些？
颜色参考：https://www.xin3721.com/Articlehtml/html4927.html

.div a{ color"#090 }
颜色除了可以使用十六进制来表示，也可以使用对应颜色的名称来显示。

@资源引用时相对路径和绝对路径的异同点
相对路径：
以当前文件为基准进行一级级目录指向被引用的资源文件
…/ 表示当前文件所在的目录的上一级目录
./ 不表示当前文件所在的目录（可以省略）
/ 表示当前站点的根目录（域名映射的硬盘目录）
绝对路径：
指带域名的文件的完整路径。文件在硬盘上真正存在的路径
优缺点：
绝对路径：如果网页的位置改变，里面的链接还是只想正确的URL。内容页面必须固定，如果所有内容页面都使用绝对路径，那么要修改一个文件，其他页面上的路径无法改变。
相对路径：容易移动内容，可以整个目录移动，本机测试时比较方便。内容页面换了位置连接容易失效。

@css或者HTML中常用的长度单位？哪些是相对长度单位？哪些是绝对长度单位？
相对长度单位：
ex：相对于字符x的长度，此高度通为字体尺寸的一半。
em：相当于当前对象内文本的字体尺寸。
px：像素。相对于显示器屏幕分辨率而言的
绝对单位：
pt：点。
pc：派卡相当于我国新四号铅字的尺寸
in：英寸。
cm、mm：厘米、毫米

@CSS根据所在位置的分类？以及各类CSS的优先级是什么？
三类：内联样式、内部样式表、外部样式表
/外部样式表/

/*内部样式表*/ /*内联样式*/

内联样式 > 内部样式表 > 外部样式表 先引入外部样式、在引入内部样式、最后引入内联样式 通过就近原则来判断 标签的style属性中的样式就是内联css样式 base.css是外部的css样式 通过标签引入

@什么是就近原则？就近原则
使用条件总是先满足最近的条件。
通长来说在内联样式、内部样式表、外部样式表三个样式中，通常是先使用内联样式（最靠近标签）。

@@ css中常用的样式选择器有哪些？
使用范围最广的使用外部样式
标签选择器：
p{
color:red
}
id选择器
#p2{

color:green
}
类选择器

.pcolor{
color:bule
}
组合选择器 包含组合关系 空格是包含关系所有被p2包含的p
#p2 div{
color:yellow;
}
子对象选择符
#p2>div{
color:pinck;
}
子类选择器：只选择选择器第一层标签下的直接子类对象，只选择子类，不选择孙子类。
包含选择器：选择选择器的第一层下的所有的子类对象，既选择子类，有选择孙子类，还选择玄孙类。即选择所有子类对象
子类选择器的优先级高于包含学者其的优先级
p标签有一个特殊性：会拿出去单独解析 没有层级关系

@选择器的优先级如何确定？包含组合选择器和基础选择器
CSS优先级，即使之CSS样式在浏览器中被解析的先后顺序
ID选择器默认优先级最高：100
Class选择器、属性选择器、伪类选择器：10
标签选择器优先级最低：1
结果较大的优先级较高，结果相同，则后定义的样式优先级较高，如果样式值中含有!important，则该优先级最高。

@! important关键字的作用 【提示】能不用就不用，会打乱浏览器渲染的顺序
!important 关键字可以提升css属性显示的优先级。语法格式：选择器{样式值：CSSRule !important}
IE6.0及以前版本浏览器不能识别!important。
如果 !important 被用于一个简写的样式属性，那么这条简写的样式属性所代表的的子属性都会被作用。
关键字!important必须放在一行样式的末尾并且要放在该行的分号前，否则就没有效果。

@盒子模型是什么？水平和垂直的盒子模型？作用是什么？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding）、元素的边框（border）、元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分割相邻的区域或区域。四个部分一起构成了CSS中元素的盒模型。
CSS实现盒子的放置：https://blog.csdn.net/Li_dengke/article/details/81193451
盒子模型有两种形式：标准盒子模型、怪异盒子模型
标准盒子模式：boc-sizing:contrnt-box;
盒子总宽度/高度 = 内容区宽度/高度 + padding + border + margin
怪异盒子模式：box-sizing:border-box;
盒子总宽度/高度 = width/height + margin
标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再讲内容装入盒子。盒子的大小并不会被padding所撑开。

@盒子模型的浏览器兼容性？对于width和height的计算方法不同？
宽度：(margin-left) + (boder-left) + (padding-left) + width + (padding-right) + (boder-right) + (margin-right)
高度：(margin-top) + (boder-top) + (padding-top) + height + (padding-bottom) + (boder-bottom) + (margin-right)
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析
各个浏览器在使用DOCTYPE标签的差异：
对于IE系列的浏览器。DOCTYPE标签的设置对页面盒模型的结识十分重要，如果没有指定该标签，个版本的浏览器的盒模型也一致，都是使用自驾的自适应标准
Firefox浏览器对DOCTYPE标签低敏感，几乎没有任何影响
Opera浏览器对DOCTYPE标签敏感，如果未设置该标签。包含嵌套divB的divA对象的高度自适应。

@块域元素和行内元素的css样式属性的继承性是怎样的？
可以继承的属性很少，只有颜色、文字、字体间距、行高对其方式、列表的样式。
所有元素可继承：visibility、cursor
内联元素可继承：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
终端块状元素可继承：text-indent、text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
span是行内元素，div是块级元素。块级元素默认继承，但行内元素只会根据元素内容来设定宽度。如果想行内元素也继承宽度，可以设 display:block;

@什么是浮动？什么是绝对定位和相对定位？什么是文档流？绝对定位和相对定位在文档流中的差异性？
浮动：浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框矿为止。浮动其实是这个块从原来的文档流模式中分离出来，没有了独占属性，他后面的元素对象就视他不存在。

在文档流中，每块元素都会被安排到流中的一个为止，我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位。
相对定位：是相对于该块元素在文档流中的位置（即相对自己的原始所在位置）。
绝对定位：绝对定位默认是参照浏览器的左上角，配合top、right、bottom、left（四个简称TRBL）进行定位。如果没有设定TRBL四个属性，默认依据父级的坐标原始点为原始点。
绝对定位一定要选择具有相对定位属性，并且位置不会变的标签一个元素进行定位才可以。

文档流：文档流模型的机制。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素不独占一行。
relative：定位是相对于自身位置定位。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度
absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的如果没有父元素设置绝对或相对定位，则元素相对于根元素即HTML元素定位。设置了absolute的元素脱离了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。