【万字长文】史上最强css、html总结~看完涨薪不再是梦

摸鱼君111
4,648 阅读20分钟

HTML

什么是前端？什么是H5？

主要工作，做页面。PC端的网站、移动APP、小游戏、小程序

H5是HTML语言的简称，是HTML语言的第五个版本

能不能介绍一下web标准

web标准：结构标准 表现标准 行为标准

  • W3C：万维网联盟,制定了结构和表现的标准
  • WHATWG:网页超文本应用技术工作小组，以推动HTML5标准为目的而成立的组织,在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
  • ECMA:欧洲电脑厂商联合会 制定了行为标准

什么是html？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

HTML5指的是HTML的第五次重大修改（第5个版本）

XHTML和HTML的区别？

1.XHTML 元素必须被正确地嵌套。 XHTML是HTML的严格模式。

2.XHTML 元素必须被关闭。

3.标签名必须用小写字母。

4.XHTML 文档必须拥有根元素。

DOCTYPE有什么作用？

定义文档类型，让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档 的第一行，这并不是一个 HTML 标签。

标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

html标签有哪些类型？

一共有三种类型，分别是：

  • 块级元素

特点：自上而下排列的，可以设置宽和高，独占一行h1-h6、p、ul、li、ol、dl、dt、dd、form、 table。。。

  • 行内（内联）元素

特点：横向排列的，不能设置宽和高，大小是由内容撑开的 span、font、b、strong、em、i、 a。。。

  • 行内（内联）块元素

特点：横向排列的，可以设置宽和高 img、所有的input、select、textarea。。。

标签语义化的优点

  • HTML结构清晰
  • 代码可度性好
  • 无障碍阅读
  • 搜索引擎可根据标签的语言确定上下文和权重问题
  • 移动设备能更完美的展示页面
  • 便于团队维护开发

h5新增语义化标签

  • section：章节、页眉、栏目。可以与标题标签结合使用
  • article：文章标签
  • aside：广告、侧边栏
  • header：头部标签
  • footer：页脚标签
  • nav：导航标签
  • figure:插图用的标签,在figure下嵌套img标签
  • video视频
<video src="video/mov_bbb.mp4" controls="controls"></video> 
source可以有多个，如果当前浏览器不支持此格式的视频，有其他的格式做备用 
支持的视频格式：mp4、ogg（ogv）、webm 
scr表示路径 
controls 播放控件 
autoplay自动播放 
loop循环播放 
poster 视频封面 
muted 静音 

在实际的开发中，需要自己给设定样式
  • audio音频
<audio src="music/金志文 - 夏洛特烦恼.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio> 

属性跟video差不多...
  • mark高亮显示
  • canvas画布
  • datalist数据集
datalist：提供一个事先定义好的列表，通过id与input关联，当在input内输入时，用户将会看到一个下 拉列表供选择 
<input list="sd"/> 
<datalist id="sd"> 
    <option value="宝马">宝马</option> 
    <option value="奔驰">奔驰</option> 
</datalist>

五大浏览器内核

  • Trident(MSHTML)
  • Gecko
  • Presto
  • Webkit
  • Blink

如何实现浏览器内多个标签页之间的通信?

WebSocket SharedWorker

也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

CSS

什么是css?

css就是层叠样式表，是web标准的表现标准语言，对网页信息的显示的控制 层叠，对于样式表来说就是优先级的问题，选择器是权重大小

css样式表类型有哪些？

内部样式表

内部样式表包含在 style 标签内，一个 style 标签就表示一个内部样式表。

而通过标签的 style 属性定义的样式属性就不是样式表。如果一个网页文档中包含多个 style 标签，就表示该文档包含了多个内部样式表。

例如：

<style> 
    选择器{属性:属性值;} 
</style>

外部样式表

如果 CSS 样式被放置在网页文档外部的文件中，则称为外部样式表，实际上，外部样式表也就是一个文本文件，扩展名为.css。然后需要使用的时候，导入html文件即可。

例如：

<link rel="stylesheet" type="text/css" href=""/> 
<style> 
    @import url(); 
</style>

两种引入方式的区别:

  • link是html的标签,import是css提供的一种方式
  • link，页面与样式同时加载，而@import必须先加载页面再加载样式。
  • @import可能会有兼容性问题，而link标签没有这个问题
  • 使用dom控制样式时：link能被dom控制，而@import不能被dom控制

内联样式表

在标签内部的style属性里面写

样式表的优先级

内联样式表的优先级最高，内部样式表和外部样式表的优先级和书写的顺序有关。 后写的会把前面的相同属性覆盖掉，其他属性依旧会继承

css选择器

标签选择器

通过html的标签名进行选择，例如：p{}

class选择器

通过html中标签的class属性进行选择，例如：

html:<div class="div1"></div> 
css: .div1{属性:属性值;属性:属性值}

class选择器一般给css使用，id选择器留给js使用. 标签的一个class可以取多个名

<div class="div1 big">这是猴子</div>

id选择器

通过html中标签的id属性进行选择，例如：


<div id="top"></div>

css: #top{属性:属性值;属性:属性值}

*通配符

选择所有的标签,一般用来清除内外边距，重置样式。

/*重置样式*/ 
*{margin:0;padding:0;} 
a{text-decoration:none;} 
li{list-style:none;}

包含选择器

选择器之间用空格隔开。修改选择器1下的所有选择器2

选择符1 选择符2{属性:属性值;}

伪类选择器:

  • a:link{属性:属性值;}超链接初始状态
  • a:visited{属性:属性值;}超链接访问后的状态
  • a:hover{属性:属性值;}鼠标滑动到上面时的状态
  • a:active{属性:属性值;}超链接被激活时的状态，即鼠标点下左键时的状态 注意:伪类选择器有浏览器缓存问题，点击超链接a访问过后，会缓存，需要清除历史记录，才能再看到超链接 的初始状态

伪类选择器使用时需要按照上面的顺序书写，以免发生错误。 不要给其他标签使用除了hover以外的伪类选择器

伪对象选择器

伪对象选择器有::after、::before、::first-letter、::first-line，伪对象选择符也称为伪元素选择器----可以让我们把一个元素当做两个来使用。

  • ::after与content属性一起使用，定义在对象后的内容
div::after{content:url(logo.jpg);} 
div::after{content:"文本内容";}
  • ::before与content属性一起使用，定义在对象前的内容
div::before{content:"放在前面的内容"}

  • ::first-letter定义对象内第一个字符的样式。（该伪元素只能用于块级元素）

  • ::first-line定义对象内第一行的样式。该伪元素只能用于块级元素。

ie6以下版本不支持伪对象选择符

群组选择器

选择器以逗号隔开，可以同时选中多个，例如

//多个选择器有相同样式的时候，用群组选择器，合并为一组
div,p,span{color:red;}

介绍一下css的权重

上面已经说过，css是层叠样式表，有优先级。权重越大的样式的优先级越高，css权重以四位数表示分别如下：

  • 标签选择器的权重为0001
  • class选择器的权重为0010
  • id选择器的权重为0100
  • 伪类选择器的权重为0010
  • 包含选择器的权重为包含选择器的权重之和
  • 内联样式的权重为1000

css3新增选择器

序列选择器

1.序列选择器(同级别)

  • :first-child 同级别第一个
  • :last-child 同级别最后一个
  • :nth-child(n) 同级别的第n个
  • :nth-last-child(n) 同级别倒数第n个
  • :only-child 父元素中唯一的一个标签

2.同类型,可以被隔开

  • :first-of-type 选中同级中同类型的第一个
  • :last-of-type选中同级中同类型的最后一个
  • :nth-of-type （n）选中同级中同类型的第n个
  • :nth-last-of-type(n) 选中同级中同类型的倒数第n个
  • :only-of-type 选中父元素中唯一类型的标签
  • :not 否定选择器 同种元素 只有自身不起作用，其它的都起作用。
  • :root 选择文档的根元素 对根元素起作用

层次选择器

  • 后代选择器（E F）最常见的选择器 没有兼容问题*
  • 子元素选择器（E>F） 选择某元素的子元素 IE6不支持*
  • 相邻兄弟选择器（E+F）紧跟在另一元素后面的元素。不能被隔开*
  • 通用兄弟选择器（E~F）指定选择器后面的所有选择器选中的标签。可以被隔开。

属性选择器

  • E[attr] 只使用属性名，但没有确定任何属性值
input[name]{ 
    width: 200px; 
    height: 50px; 
}
input[id]{ 
    border: 1px solid red; 
}
  • E[attr="value"] 指定属性名，并指定了该属性的属性值
input[type="text"]{ 
    border: 1px solid red; 
}
input[type="tel"]{ 
    border: 1px solid blue; 
}
  • E[attr^="value"] 指定属性名，并且有属性值，属性值是以value开头的；
a[href^="#"]{ 
    background-color: red; 
}
  • E[attr$="value"] 指定属性名，并且有属性值，而且属性值是以value结束的；
a[title$="叫"]{ 
    background-color: orange; 
}
  • E[attr*="value"] 指定属性名，并且有属性值，而且属值中包含了value；
a[href*="#"]{ 
    background-color: red; 
}

浮动

什么是标准流（文档流）？

就是网页的正常排版顺序 --- 元素排序方式根据元素类型来的

什么是浮动流？

一个元素设置了float属性，就会变成浮动流，不遵循标准流的规则

一个元素如果设置了浮动，不再遵循标准流中的规则，它看起来就像从标准流中删除了一样，原先 在标准流的中位置会发生改变

文本环绕现象

浮动的元素对标准流元素本来不占位了，但文字却不能到浮动的元素的位置，因此 会出现文本环绕现象

浮动注意事项

  • 两个元素，第一个浮动了，第二个没有浮动，这个时候，浮动的元素会把没有浮动的元素给覆盖
  • 两个元素，第一个没有浮动，第二个浮动了，这个时候位置保持不变
  • 两个元素，都设置了浮动，如果宽度不够的情况下，第二个依旧会被挤到第二行去
  • 文本环绕显示，一个元素如果浮动了，另一个元素没有浮动，这个时候它里面的文本会环绕浮动元素显示

高度塌陷和元素重叠

高度塌陷就是如果没有给父元素设置高度而希望父元素高度自适应的时候，如果给子元素设置了浮动， 会发生高度塌陷。

在标准流中子元素可以撑开容器的高度，但是浮动后，脱离了标准流，子元素撑不开容器的高度了，把 这种现象叫高度塌陷。

高度塌陷会引起元素重叠。

清楚浮动

清除浮动:清除浮动的负面影响

注意点：并不是只要设置了浮动就要必须清除，只有在发生高度塌陷和元素重叠时才需要清除

清除浮动的方法:

1、给父元素设置overflow:hidden

overflow:hidden原本意思是文本溢出隐藏,有清除浮动的功能

2、使用空元素（空盒子）的方法

在浮动的子元素的同级下增加一个空（div）的元素

这个空的元素不能有任何其他样式,再给空元素设置clear:both/left/right/none;

3、万能清除法

定义一个类名,使用伪元素:after,并把类名赋给浮动元素的父级元素

.clear:after{
    display:block;
    clear:both;
    content:".";
    visibility:hidden;
    height:0;
}
.clear{
    //兼容ie浏览器
    zoom:1;
}

盒模型

盒模型是css布局的基石，决定了网页元素如何显示以及元素相互之间的关系,盒模型是一种形象的称呼，在css里面规定了所有的标签都有一个盒模型。

盒模型组成：margin（边界、外边距）、padding（内边距、填充、补白）、border（边框）、 content（内容---width和height）

盒模型有以下两种:

w3c标准盒模型

盒模型的宽度 = 左右margin + 左右padding + 左右border + width（内容）

IE怪异盒模型

盒模型的宽度 = 左右margin + width（内容）--- 包含了padding和border

区别：

标准盒模型和怪异盒模型的区别在于计算方式的不同,怪异盒模型的宽度在计算时包含了padding和border

设置怪异盒模型的方法: 在css3里面提供了一个属性，可以把标准盒模型转成怪异盒模型使用

box-sizing:border-box(把标准盒模型转成怪异盒模型)/content-box;(标准盒模型--默认值)

如果希望全部转成怪异盒模型，在*里面设置box-sizing:border-box;

单行省略号显示

省略号显示:text-overflow:clip/ellipsis 不显示省略号/显示省略号标记。

单行省略号显示的条件：

  • 定义一个宽度width
  • 强制不换行nowrap
  • 文本溢出隐藏
  • 省略号显示text-overflow:ellipsis;
.test{
    width:200px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行省略号显示

WebKit浏览器或移动端的页面

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性:

  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

例子：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

例如：

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

注意：

  • height高度正好是line-height的3倍
  • 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色
  • IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用span标签去模拟
  • 要支持IE8，需要将::after替换成:after

JavaScript 方案

用js也可以根据上面的思路去模拟，实现也很简单

定位

position定位介绍

语法：position：static（默认值-静态定位） /absolute（绝对定位）/relative（相对定 位）/fixed（固定定位），其也是为了解决布局问题。

所谓的定位其实就是让元素的位置进行移动，给元素设置了position属性后，元素就变成了定位流。

定位属性，必须配合其他值来使用，left、right、top、bottom。

定位元素有参照物。

相对定位

特点：

  • 相对定位是相对于自己以前在标准流中的位置进行定位的（注意点：相对定位是半脱落状态）

  • 不脱落文档流（标准流）的，占位置（空间）

  • 区分元素类型的（区分是块级元素、内联元素、行内块元素）,元素以前是什么类型，设置了相对定位后还是什么类型

  • 对元素进行微调，主要的作用是配合绝对定位来使用

绝对定位

特点：

  • 脱离文档流的，不占位置的

  • 不区分元素类型

  • 绝对定位是相对于父元素进行定位的，如果父元素不是定位流，元素会往上查找有定位流的元素，找到最上级还是没有定位流，会相对于body进行定位（相对于祖先元素进行定位的）

固定定位

特点：

  • 脱落文档流的，不占空间

  • 不区分元素类型

  • 相对于body进行定位的

  • 不会随着滚动条的滚动而滚动

  • 可以相互之间重叠

粘性定位

position: sticky; 粘性定位

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

元素垂直居中的方法

定位，父相子绝

父元素相对定位

子元素绝对定位

子元素left,right,top,bottom=0

子元素margin:auto;

利用css3的transform属性

示例：

html

<div class="transform"><img src="favicon.ico" /></div>

css

.transform {
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    background: #90EE90;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.transform img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
}

Flex垂直水平居中

css示例:

.flex{
    font-size: 25px;
    height: 200px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

利用display:table-cell属性使内容垂直居中

css示例:

.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 120px;
    height: 120px;
    background: purple;
}

什么是BFC？

BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是W3C CSS 2.1 规范中的 一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

特点：

  • 在BFC下，内部的Box会在垂直方向，一个接一个地放置
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器（父元素）的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此
  • BFC的区域不会与float box重叠。例子：两个div，一个进行浮动，一个不浮动，这时浮动的元素会覆盖没有浮动的元素。给没有浮动的元素加overflow:hidden。就不会重合
  • 计算BFC的高度时，浮动元素也参与计算

如何触发BFC:

  • 浮动元素，float 除 none 以外的值
  • position的值不为static或者relative
  • display为inline-block、table-cell、table-caption
  • overflow 除了 visible 以外的值

主要应用场景：

  • 解决浮动塌陷问题
  • 自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow:hidden。）
  • 解决设置margin值重叠问题。

visibility:hidden和display:none的区别

二者均为隐藏显示区域。于前者而言，该属性会使对象不可见，但该对象在网页中所占的空间没有改 变；于后者而言，该属性则使对象完全彻底消失

为什么会出现浏览器兼容问题

简单的来说就是个大浏览器使用的内核版本是不一样的，有着具有自己的内核。其中不得不说ie6、7了。

作为我们前端人员来说ie无疑成为我们前端开发人员的一大阻碍，有人就说ie是垃圾浏览器，是奇葩浏览器。而为什么还会用它呢，那是它在市场上占据着重要地位。

其实在很早以前ie就占据了绝大部分的浏览器市场拥有者霸主地位，以谷歌，火狐为代表的浏览器商家为了争夺市场，重新瓜分浏览器市场这块大的蛋糕，于是就组织起来制定了w3cschool的这样的一套规范来与ie来进行抗衡。就是这样ie浏览器和w3c下的个大浏览器才会有这么多的兼容性问题。

说到这里其实浏览器兼容性原因很简单那是因为ie先于为w3c诞生。在w3c诞生之前ie就有着自己的的一套执行的标准。之所以以谷歌，火狐为代表的浏览器商家会指定一套属于自己的标准，究其根源是为了争夺市场的占有力。两个字“利益”。

其实ie并没有错，我们不能只看到事物的一面，还要看到实物的本质。用哲学的话来说，我们要从感性认识上升到理性认识透过事物的表象抓住事物的本质。可以看到在后来的ie8以后，ie为了在市场上生存下去，只有向w3c妥协。慢慢接近于为w3c的标准

常见CSSbug和CSShack

图片间隙

图片默认会给容器撑大3px,给图片display:block，这样图片就会自上而下排列，不横向排列。。

图片并排中间有间隙,给图片左浮动。。

dt,li中的图片间隙

给图片display:block;

图片在IE浏览器上，在a下面时，有蓝色边框

img{border:none;}

低版本IE部分块有默认高度

如何在低版本IE下写出1px的高度?

  • 给元素font-size:0;
  • overflow:hidden;

百分比bug

IE6及以下版本，会出现50%+50%>100%的情况

给右面的元素clear:right;才能解决

margin-top的bug

子元素的margin-top,被浏览器误认为设置给父元素，导致父元素往下掉。

解决方法:给父元素overflow:hidden;或者让子元素浮动。

以上就是我对css、html的一些总结，希望可以帮到大家，后期会更新我对JavaScript的一些总结，想持续了解的请关注我公众号

我是monkeysoft，你的【三连】就是monkeysoft创作的最大动力，如果本篇博客有任何错误和建议，欢迎大家留言！

文章持续更新，可以微信搜索 【小猴子的web成长之路】关注公众号第一时间阅读,关注之后后台回复知识体系，更可领取小编精心准备的前端知识体系，未来学习不再迷茫,更可加入技术群交流讨论。

本文使用 mdnice 排版

avatar
文章
阅读
粉丝