HTML/CSS知识点小结

最新推荐文章于 2022-06-30 10:24:46 发布

鹏鱼雁

最新推荐文章于 2022-06-30 10:24:46 发布

阅读量408

点赞数 1

分类专栏： HTML与css

本文链接：https://blog.csdn.net/CEO___/article/details/103797471

版权

HTML与css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

1、css选择器

（1）id 选择器（ #myid）
（2）类选择器（.myclassname）
（3）标签选择器（div, h1, p）
（4）后代选择器（h1 p）
（5）相邻后代选择器（子）选择器（ul > li）
（6）兄弟选择器（li ~ a）
（7）相邻兄弟选择器（li + a）
（8）属性选择器（a[rel = “external”]）
（9）伪类选择器（a:hover, li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（ * ）

1、CSS权重及其引入方式

引入方式（4种）：

内联（行内）样式：为元素添加一个style属性，属性值即为css样式。
内部样式表（内嵌样式）：在head标签下添加一个style元素标签，并在标签内编写css样式。
外部样式表（外联样式）：将页面需要的CSS写在一个单独的扩展名为.css的文件中，并用link元素引用。
导入样式表：导入样式和链接样式比较相似，在style标签里采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。

优先级：行内>内嵌（import导入）>外联

@import和link区别：
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载

权重比较：

类型	权重
! important	无穷
行间样式`inline`	1000
id	100
class/属性选择器/伪类:hover	10
标签选择器/伪元素:after	1
通配符（*）	0

2、a标签的5大作用

参考文章
 A标签使用javascript:伪协议

超链接（外部页面链接）
锚点（结合id属性实现定位）
发送邮件
拨打电话
协议限定符（javascript:;）(javascript:void(0))，强制执行href里面的js代码

3、用CSS画三角形

#triangle {
    width: 0px;
    height: 0px;
    /*border: none;*/
    /*border: 10px solid green;*/
    border-width: 20px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

4、垂直水平居中

参考文章

水平居中

1、margin法

满足条件：

需要居中的元素定宽
元素为块级元素或行内元素设置了display：block
元素的margin-left和margin-right必须为auto

2、绝对定位法
满足条件：

需要居中的元素定宽
元素绝对定位position：absolute，并设置left:50%
元素负左边距margin-left为宽度的一半

ps：若使用transform：translate（-50%，0）;替换margin-left则可以使元素宽度不是固定的元素水平居中

3、行内元素（文字）水平居中

text-align：center

垂直居中

1、绝对定位法

和水平居中类似，只是把left:50%换成了top:50%，负边距和transform属性进行对应更改即可。

2、文字垂直居中

单行文本（行内元素）：将其line-height设置成和height的值一样
多行文本：
- 设置父容器上下padding值一样:父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等
- 模拟表格法：父元素高度固定，将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现，如果没有前面两句： display: table 和 display: table-cell 后面的那句 vertical-align: middle 也不会生效。(不兼容ie6、ie7)

css3种不知道宽高的情况下水平垂直居中的方法

display:table-cell

	display: table-cell;
    vertical-align: middle;
	text-align: center;

transform:translate(-50%,-50%)

 	position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform:translate(-50%,-50%);

flex 布局

	display:flex; 设置.wrap为弹性布局
	justify-content:center;定义项目在主轴(水平方向)上居中对齐
	align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

5、html元素种类分类

给行内元素设置padding和margin是否有效
在这里插入图片描述

块级元素

独占一行
元素的高度(height)，宽度(width)，行高(line-height)以及顶和底边距(margin,padding)设置都是有效的。
元素默认宽度是父元素的100%

内联元素

和其他非块级元素同在一行
元素的宽高及顶部和底部边距设置是无效的；（但是左右边距设置有效）
元素的宽度就是他包含的文字和图片的宽度，不可改变。

块级内联元素

和其他非块级元素同在一行
元素的高度、宽度、行高及顶和底边距设置都是有效的。
常用的内联块状元素有：<img> , <input>，通过display:inline-block; float:left/right; position: absolute/fixed;可以将元素设置为内联块级元素

6、盒子模型及其理解

从CSS盒子模型说起！！！！
在这里插入图片描述
盒子模型构成：

content内容区域
padding内边距（设置background会默认延伸到padding,直到border，但是不延伸至border，更不用说margin了）
border边框
margin外边距

盒子模型一般分为两种:

标准盒子模型
IE盒子模型

标准盒子模型
设置的width,height就是content的width和height，即box-sizing: content-box

width = content-width
height = content-height

IE盒子模型
设置的width,height一直包括到边框的width和height，即box-sizing: border-box

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

ps：border-sizing还有一个属性padding-box(width=content-width+padding-width)，不过并没有浏览器实现它

7、 IFC与BFC

浅谈BFC和IFC
BFC与IFC

BFC

BFC（Block Formatting Context）叫做“块级格式化上下文”。BFC就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此
BFC的布局规则如下：

内部的盒子会在垂直方向一个一个地放置
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻的BOX的上下margin会发生重叠
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
BFC的区域和float不影响，不重叠（即BFC元素能识别到浮动元素）
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到容器外的元素，反之亦如此
计算BFC高度的时候，浮动元素也参与计算

触发（产生）BFC：

根元素
float的属性不为none
position属性为absolute或fixed
display为inline-block、table-cell、table-caption、flex
overflow不为visible

BFC用途：

清除浮动;（计算BFC高度的时候，浮动元素也参与计算）
解决外边距坍塌合并问题;
布局;

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"。

IFC布局规则：

在一个IFC中，从父级元素的顶部开始，盒子一个接一个横向排列
一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高
当盒子的高度比包含它的line box的高度低，在line box内的盒子的垂直对齐线通过’vertical align’属性决定
当在一行中行内级盒子的总宽度比包含他们的line box的宽度小，他们的在line box中的水平放置位置由’text align’属性决定
当一个行内盒子超过了line box的宽度，则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs

8、定位方式及其区别

1、static （静态定位）：默认值，元素框正常生成的，top left bottom right这几个偏移属性还有z-index不会影响其静态定位的正常显示
2、relative：是保留原来位置，不脱离文档流，相对于原位置定位，经常与z-index属性进行层次分级
3、absolute：脱离文档流，是整个元素的左上角（含margin）相对于最近的、非static定位的父元素的padding外边界或者说border内边界定位的;如果没有非static定位的父元素，则相对于“浏览器可视窗口”定位（不是body也不是html元素，而是屏幕的可视区的左上角（不含工具条）），经常与z-index属性进行层次分级
4、fixed：固定定位，脱离文档流，是相对于“浏览器的可视窗口”来定位的而不是html也不是body也不是屏幕！经常与z-index属性进行层次分级。如果父元素（不一定要直接相邻）有transform属性，则是相对于该父元素，而不是浏览器窗口了
5、sticky：css3新增的，不脱离文档流，可以说是relative和fixed的结合，当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置

注意：《transform对定位元素的影响》
如果一个元素加上transform属性时，这个元素就会具有relative的特性；所以若一个元素的父元素拥有tranform属性时，会影响子元素使用定位属性absolute、fixed。

当浮动元素同时使用绝对定位或者固定定位时，浮动会失效

9、margin塌陷及合并问题

margin塌陷和margin合并问题及解决方案

坍塌（父子元素）：

父子嵌套元素在垂直方向的margin,父子元素会有外边距合并现象,他们两个的margin会取其中最大的值.

解决方案：

给父级设置边框或内边距(不建议使用)
触发bfc(块级格式上下文),改变父级的渲染规则，给父级盒子添加：
（1）position:absolute/fixed
（2）display:inline-block;
（3）float:left/right
（4）overflow:hidden

合并（相邻兄弟元素）

两个兄弟结构的元素在垂直方向上的margin是合并的（左右方向不会合并）

解决方案：
margin合并问题也可以用bfc解决,给其中一个盒子加上一层父级元素并在该父级元素加上overflow:hidden;

tip：但是这种方法都改变了HTML结构,在开发中是不能采用的，所以在实际应用时,在margin合并这个问题上,我们一般不用bfc,而是通过只设置上面的元素的margin-bottom来解决距离的问题

10、浮动模型及清除浮动的方法

浮动模型和清除浮动

浮动定义及现象：浮动元素可以左右移动，直至它的外边缘遇到父元素的padding（包含框）或者另一个浮动框的边缘。浮动元素脱离文档流。

语法：

父级的边界能够多站一个就多站一个，但是站不下的就换行
所有产生了浮动流的元素，块级元素看不到它
产生了bfc的元素和文本类属性inline-block的元素以及文本元素能够看到它

清除浮动：

在盒子的末尾添加一个子元素，设置属性clear:both该属性还有left right 的属性值（一般不用）
使用伪元素::after来实现清除浮动（和方法一原理类似）
ie6 ie7当中没有伪元素，可使用zoom：1（该属性只是为了ie6和ie7准备的，意思就是视口同比例放大还是缩小，1就是不变）
父元素触发bfc来清楚浮动流

11、圣杯布局和双飞翼布局的实现

超经典面试题：用多种方法实现圣杯布局和双飞翼布局

区别：middle的实现不一样，圣杯布局是middle+padding，双飞翼采用子元素+margin

圣杯布局：

header和footer占屏幕全部高度，高度固定
中间的contaier部分是一个三栏布局
left和right宽度固定，middle自适应填满整个区域；高度为三栏中最大的高度；

圣杯布局的3种实现：

浮动（负margin的使用，content设置左右padding）
flex布局
css grid

双飞翼布局实现：
双飞翼布局和圣杯布局几乎一样，区别在于处理middle中被遮挡的部分。双飞翼是在middle中再放一个div用来显示内容，为其设置margin：0 auto。，而不是通过父元素的 pedding 来实现的

三栏布局

《三栏布局实现》

利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值。
利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小flex-basis设置为固定的大小，中间一栏设置为 auto
利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的 margin 值，注意这种方式，中间一栏必须放到最后
圣杯布局，利用float浮动和负边距来实现。父级元素设置左右的 pedding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。
双飞翼布局，双飞翼布局相对于圣杯布局来说，处理中间块时，在middle中再放一个div用来显示内容，为其设置margin：0 auto。，而不是通过父元素的 pedding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的

负边距 + float原理：
《负margin的原理及应用》

在一组浮动元素中，利用负margin值可以使因空间不够被挤到下一行的浮动元素重新上去。因为浮动元素要尽可能向上向左（或者向右，这里是向左）浮动。100%就是父元素即容器的宽度，因此left相当于不占空间，所以就有位置给他浮动到上一行了

12、flex弹性布局

Flex布局
 css-flex常见面试题

flex 布局是 CSS3 新增的一种布局方式，我们可以通过将一个元素的 display 属性值设置为 flex 从而使它成为一个 flex容器，它的所有子元素都会成为它的项目。设为 Flex 布局以后，子元素的float、clear 和 vertical-align 属性将失效
一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items 来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。
对于容器中的项目，我们可以使用
order属性指定项目的排列顺序，数值越小，排列越靠前，默认为0.
flex-grow指定当排列空间有剩余的时候，项目的放大比例。默认值为0，即如果存在剩余空间，也不放大
flex-shrink指定当排列空间不足时，项目的缩小比例。默认为1，即如果空间不足，该项目将缩小
flex-basis：项目占据的主轴空间（和width属性有点类似）默认为auto

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后面两个属性可选。该属性有两个快捷值：auto（1 1 auto）和none（0 0 auto）

flex-内容宽度等分：flex: 1;

//css
       .box {
            display: flex;
        }
        
        .box div {
            flex: 1;
            border: 1px solid red;
        }
//html
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

左右布局，一侧定宽，一侧自适应撑满：（圣杯布局实现也可以参考这个）

//css 
        html,
        body {
            height: 100%
        }
        
        .main {
            display: flex;
            height: 100%;
        }
        
        .left,
        .right {
            height: 100%;
            border: 1px solid red;
            box-sizing: border-box;
        }
        
        .left {
            width: 300px;
        }
        
        .right {
            width: 100%;
        }

//html
    <div class="main">
        <div class="left">固定宽度300px</div>
        <div class="right">自适应宽度</div>
    </div>

未知高宽上下左右居中：
justify-content: center;
align-items: center

//css
        html,
        body {
            height: 100%
        }
        
        .main {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center
        }
        
        .box {
            width: 300px;
            border: 1px solid red;
        }
    
    //html
     <div class="main">
        <div class="box">未知高度上下左右居中</div>
    </div>

13、px,rem,em,vw,vh的区别

彻底弄懂css中单位px和em,rem的区别

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em： em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size），如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸（16px）
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem： 相对长度单位，不过相对的是根元素（html）的font-size,应用于媒介查询medio

vh、vw： vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100，vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100；假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

14、Less和Sass使用

Sass和less的区别是什么？用哪个好

什么是Sass和Less？
Sass和Less都属于CSS预处理器。简单来说就是用一种专门的编程语言，按照特定的语法，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

相同之处：

混入(Mixins)——class中的class；
参数混入——可以传递参数的class，就像函数一样；
嵌套规则——Class中嵌套class，从而减少重复的代码；
运算——CSS中用上数学；
颜色功能——可以编辑颜色；
名字空间(namespace)——分组样式，从而可以被调用；
作用域——局部修改样式；
JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

Sass和Less的区别：

实现方式不同：sass的安装需要安装Ruby环境，Less基于JavaScript，所以less是通过客户端处理的，sass是通过服务端处理，相比较之下less解析会比sass慢一点，很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎，而Javascript引擎需要额外的时间来处理代码
less使用比sass简单：LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。只要你了解 CSS 基础就可以很容易上手
从功能出发，sass比less强大一些：sass有变量和作用域、函数、进程控制（if、else）、数据结构（数组、对象）
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

15、CSS3及相关动画

css3动画和JS动画的区别？

js实现的是帧动画：使用定时器，每隔一段时间，更改当前的元素
css实现的是补间动画：过渡（加过渡只要状态发生改变产生动画）动画(多个节点来控制动画)性能会更好，因此在支持css3的浏览器尽可能的使用css3动画

transition（过度）、transform（变换）：

1、transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。j
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

2、transform属性：

translate(x,y) ：定义2d移动
translate3d(x,y,z) ：定义3d移动
translateX(x) / Y(y) / Z(z) ：定义相对于的轴的移动转换
scaleX(x) / Y(y) / Z(z) ：定义缩放
rotateX(x) / Y(y) / Z(z) ：定义旋转

{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

animation（动画）：
animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

div {
  animation: myfirst 5s;
}

@keyframes myfirst {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

16、::before 和:before有什么区别

相同点：

都可以用来表示伪类对象，用来设置对象前的内容
他们的写法是等效的

不同点：

:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

注意：

这些伪元素要配合content属性一起使用
这些伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
这些伪元素的特效通常要使用:hover伪类样式来激活

17、HTML语义化

语义化标签详解

定义：用最恰当的标签来标记对应的内容

作用：

使HTML代码结构清晰，更具有可读性，利于开发维护
通常语义化HTML会使代码变的更少，使页面加载更快。
提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

HTML5 新增的语义化标签：

<header> / <footer>
这俩标签性质比较类似，所以放到一起来比较：一个放头部，一个放底部。
乍一看，觉得这俩标签就是网页的页头（一般包含网站LOGO、banner、顶级导航等）和页尾（网站本身的信息，包括版权信息、联系方式等），但实际上这俩标签的应用范围远不止于此，完全可以作为其它独立单元（<article>/<section>/<aside>/<nav>等）中的一部分
nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容- 可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）；一般表示页面主体内容以外的侧边栏，比如上文提到的“相关文章”，又或者是“作者个人资料”，如果是这些情况的话，一般会被包含在<article>中。另外，<aside>也可以表示一些工具功能，比如说“分享文章”、“回到顶部”等功能
section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

<article> / <section>区别：

这俩标签的语义比较相像，都是表示文档中的一个独立区域（独立单元），其中还可以从结构上拆分成<header> / <footer>等部分。
这俩标签比较起来的话，<article>比<section>要大一级：

<article>中可以包含<section>，举个例子：一篇博客文章的下方或侧方一般会有“相关文章”的列表，那么，这一整块HTML就可以用<article>给包起来，而“相关文章”的那一小块HTML则可以用section来表示；再举个例子，比如说文章的“版权信息”，也可以用section来表示。
<article>中可包含<article>，比如说：一篇文章以及这篇文章的用户评论，整块HTML可以用<article>来包起来，而用户评论从逻辑分析起来也是从属于这篇文章的，因此也可以用<article>包起来并归到文章的<article>之下。
<section>之下不能再放<section>了，这从侧面表示这是最小一级的独立单元标签。
<article>一般用于“详细内容”，因此一般一个页面只含有一个顶级的<article>。而相反，<section>的用途更广泛一些，除却“详细内容”外都可以用<section>来进行包裹，比如说：网站首页上，可以利用<section>来展示不同分类/栏目的文章列表。

18、HTML5新特性

HTML5的十大新特性

语义化标签
新增了Input 输入类型type：color、data、tel、url等等
视频video和音频audio
canvas绘图和SVG（区别canvas和svg）
地理位置Geolocation
拖放API
Web Worker
Web Storage（localStorage、sessionStorage）
WebSocket

19、SEO的概念及实现

合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同，description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords列举出重要关键词即可。
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

20、css命名规范

21、css硬件加速（GPU）

硬件加速

普通文档流内可以理解为一个复合图层（默认复合图层），absolute、fixed、float布局虽然脱离文档流，但他们仍然在复合图层中。浏览器中用css开启硬件加速，使GPU(Graphics Processing Unit) 发挥功能的一系列活动。其原理就是单独建立一个复合图层（合成层），它会单独分配资源（当然也会脱离文档流），不管这个新的合成层内怎么变化，也不会影响原先默认复合图层里的回流和重绘

解决的问题：动画卡顿

CSS的 animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。这个时候就需要开启硬件加速功能，方法如下

webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);

// 下面方法也OK
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

如果出现页面闪烁效果，则可使用

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

以下几个css属性可以触发硬件加速：

transform
opacity
filter
will-change：哪一个属性即将发生变化，进而进行优化。

开启硬件加速弊端

1、不能让每个元素都启用硬件加速，这样会暂用很大的内存，使页面会有很强的卡顿感。

2、GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：

1、使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
2、页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
3、使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。
4、编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)。
5、使用很多PNG图片拼接成CSS Sprite时。

22、层叠上下文

《彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index》

23、children 和childNodes 的区别

children：仅返回HTML节点。甚至不返回文本节点
childNodes ：返回包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，当nodeType==1是元素节点，2是属性节点，3是文本节点。

24、offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别

《最全的获取元素宽高及位置的方法》

1、 clientWidth/clientHeight 返回的是元素的内部宽度，它的值只包含 content + padding，如果有滚动条，不包含滚动条。

clientTop 返回的是上边框的宽度。
clientLeft 返回的左边框的宽度。

2、 offsetWidth/offsetHeight 返回的是元素的布局宽度，它的值包含 content + padding + border + 包含了滚动条。不包含margin

offsetTop 返回的是当前元素相对于其 offsetParent 元素的顶部的距离。
offsetLeft 返回的是当前元素相对于其 offsetParent 元素的左部的距离。
offsetParent：返回一个指向最近的包含该元素的定位元素（position）。如果没有定位的元素，则 offsetParent 为最近的table, table cell 或根元素

3、scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸。

scrollTop 属性返回的是一个元素的内容垂直滚动的像素数。
scrollLeft 属性返回的是元素滚动条到元素左边的距离。

25、href和src区别

href：Hypertext Reference（超文本引用），用来建立当前元素和文档之间的链接。常用的有：link、a
src：source，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe

26、DOCTYPE 的作用是什么？

声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。

在 html5 之后不再需要指定 DTD（document type define）文档，因为 html5 以前的 html 文档都是基于 SGML 的，所以需要通过指定 DTD 来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。

鹏鱼雁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS知识点小结

html/css知识点小结CSS权重及其引入方式CSS权重及其引入方式引入方式（4种）：内联（行内）样式：为元素添加一个style属性，属性值即为css样式。内部样式表（内嵌样式）：在head标签下添加一个style元素标签，并在标签内编写css样式。外部样式表（外联样式）：将页面需要的CSS写在一个单独的扩展名为.css的文件中，并用link元素引用。导入样式表：导入样式和链接样式...
复制链接

扫一扫

专栏目录