其他分享
首页 > 其他分享> > 史上最强css、html总结，看完涨薪不再是梦

史上最强css、html总结，看完涨薪不再是梦

作者：互联网

HTML

什么是前端？什么是H5？

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

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

能不能介绍一下web标准

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

什么是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。。。

标签语义化的优点

h5新增语义化标签

<video src="video/mov_bbb.mp4" controls="controls"></video> 
source可以有多个，如果当前浏览器不支持此格式的视频，有其他的格式做备用 
支持的视频格式：mp4、ogg（ogv）、webm 
scr表示路径 
controls 播放控件 
autoplay自动播放 
loop循环播放 
poster 视频封面 
muted 静音 

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

属性跟video差不多...
复制代码
datalist：提供一个事先定义好的列表，通过id与input关联，当在input内输入时，用户将会看到一个下 拉列表供选择 
<input list="sd"/> 
<datalist id="sd"> 
    <option value="宝马">宝马</option> 
    <option value="奔驰">奔驰</option> 
</datalist>
复制代码

五大浏览器内核

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

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> 

复制代码

两种引入方式的区别:

内联样式表

在标签内部的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{属性:属性值;}

伪类选择器:

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

伪对象选择器

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

div::after{content:url(logo.jpg);} 
div::after{content:"文本内容";}
复制代码
div::before{content:"放在前面的内容"}
复制代码

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

群组选择器

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

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

介绍一下css的权重

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

css3新增选择器

序列选择器

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

2.同类型,可以被隔开

层次选择器

属性选择器

input[name]{ 
    width: 200px; 
    height: 50px; 
}
input[id]{ 
    border: 1px solid red; 
}
复制代码
input[type="text"]{ 
    border: 1px solid red; 
}
input[type="tel"]{ 
    border: 1px solid blue; 
}
复制代码
a[href^="#"]{ 
    background-color: red; 
}
复制代码
a[title$="叫"]{ 
    background-color: orange; 
}
复制代码
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 不显示省略号/显示省略号标记。

单行省略号显示的条件：

.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属性。常见结合属性:

例子：

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;
}
复制代码

注意：

JavaScript 方案

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

定位

position定位介绍

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

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

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

定位元素有参照物。

相对定位

特点：

绝对定位

特点：

固定定位

特点：

粘性定位

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:

主要应用场景：

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的高度?

百分比bug

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

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

margin-top的bug

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

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

感谢阅读，希望能对你有所帮助！

需要领取免费资料的小伙伴们，添加小助手vx：SOSOXWV  即可免费领取资料哦！

标签：浮动,浏览器,标签,元素,完涨,html,选择器,css,属性
来源： https://blog.csdn.net/uuuyy_/article/details/122460422