css

yuye
148 阅读26分钟

css

1.css选择器及其优先级
  • 标签选择器、伪元素选择器：1
  • 类选择器、伪类元素选择器、属性选择器：10
  • id选择器：100
  • 内联样式选择器：1000

注意事项

  • !important声明的样式优先级最高
  • 如果优先级相同，最后出现的样式生效
  • 继承得到的样式优先级最低
  • 通用选择器（*）、子选择器（>)和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为0
  • 样式表的来源不同，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
2.css中可继承与不可继承的属性

无继承属性

  1. display：规定元素生成框的类型

  2. 文本属性

    • vertical-align：垂直文本对其
    • text-decoration：文本的装饰
    • text-shadow：文本阴影
    • whit-space：空白符处理
    • Unicode-bidi：文本方向

  3. 盒模型属性：width、height、margin、border、padding

  4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

  5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

  6. 生成内容属性：content、counter-reset、counter-increment

  7. 轮廓样式属性：outline-style、outline-width、outline-color、outline

  8. 页面样式属性：size、page-break-before、page-break-after

  9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

可以继承属性

  1. 字体系列属性

    • front-family：字体样式
    • front-weight：字体粗细
    • front-size：字体大小
    • front-style：字体风格

  2. 文本系列属性

    • text-indent：文本缩进
    • text-align：文本水平对齐
    • line-height：行高
    • word-spacing：词间距（英）
    • letter-spacing：词间距（英&中）
    • text-transform：控制文本大小写（uppercase、lowercase、capitalize）

  3. 元素可见性

    visibility

  4. 列表布局属性

    list-style：列表风格（包括list-style-type、list-style-image）

  5. 光标属性

    cursor：光标显示为何种形态

3.display的属性值及其作用

none：元素不显示，并且会从文档流中移除

block：块类型，默认宽度为父元素宽度，可设置宽高，换行显示。

inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block：默认宽度为内容宽度，可以设置宽高，同行显示

list-item：像快类型元素一样显示，并添加样式列表标记

table：此元素作为块级表格来显示

inherit：规定应该从父元素继承display属性值

3.1.block、inline和inline-block的区别

block：会独占一行，多个元素另起一行，可以设置width、height、margin和padding属性

inline：元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin

inline-block：将对象设置为inline对象，但对象的内容作为block呈现，之后的内联对象会被排列在同一行

3.2.行内元素和块级元素的区别

行内元素

  • 设置宽高无效
  • 可以设置水平方向的margin和padding，不能设置垂直方向的padding和margin
  • 不会自动换行

块级元素

  • 可以设置宽高
  • 设置margin和padding都有效
  • 可以自动换换行
  • 多个块状，默认排列从上到下
4.隐藏元素的方法
  1. display：none 渲染树不会包含该渲染对象，因此不会在页面中占据位置，也不会响应绑定的监听事件
  2. visibility：hidden 元素在页面仍占据空间，但不会响应绑定的监听事件
  3. opacity：0 将元素的透明的设置为0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应绑定的监听事件
  4. position：absolute 使用绝对定位将元素移除可视区域
  5. z-index：负值 使用其他元素来遮盖此元素
  6. transfrom：scale(0,0) 将元素缩放为0，元素在页面中仍然占据空间，但不会响应绑定的监听事件
5.link和@import的区别

两者都是外部引用css，区别如下：

  • link是HTML标签，除了加载css外，还可以定义RSS等其他事务。@import属于css范畴，只能加载css
  • link引用css时，页面载入时同时加载。@import需要页面完全载入后再加载
  • link是HTML标签，无兼容问题。@import是在css2.1提出的，低版本浏览器不支持
  • link支持使用JJavaScript控制DOM去改变样式。@import不支持
6.transition和animation的区别

transition是过渡属性，强调过渡。它的实现需要触发一个事件（比如鼠标移上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

animation是动画属性。它的实现不需要触发事件，设定好时间后自动执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画

7.伪元素和伪类的区别

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们

P::before {content:'第一章：'}
p::after {content:'chapter'}
p::first-line{background:red}
P::first-letter{font-size:30px}

伪类：将特殊的效果添加到特定的选择器上。它是已有元素上添加类别，不会产生新的元素

a:hover {color:red}
p:first-child {color: #000}

总结：伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变

8.标准盒模型、IE盒模型

盒模型都是有四个部分组成：margin、border、padding、content

标准盒模型和IE盒模型的区别在于设置width和height时，对应的范畴不同

标准盒模型的width和height的属性范围只包含了content

IE盒模型的width和height的属性范围包含了border、padding和content

可以通过修改元素的box-sizing属性来改变元素的盒模型

  • box-sizing: content-box：标准盒模型
  • box-sizing：border-box：IE盒模型
9.为什么有时候用translate来改变位置，而不是定位

translate是transform属性的一个值。改变transfrom或opacity不会触发浏览器重排(reflow)或重绘(repaint) ，只会触发复合(composition)。而改变绝对定位会触发重排，进而触发重绘和复合。

transfrom使浏览器为元素创建一个GPU图层，但改变绝对定位会使用到CPU。因此**translate()更高效**，可以缩短平滑动画的绘制时间。而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况

10.li之间的空白间隔

浏览器会把inline内联元素间的空白字符串（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>在一行，这导致<li>换行后产生字符串，它变成了一个空格，占用了一个字符的宽度

解决办法

  • 为<li>设置flaot:left。缺点：有些容器是不能设置浮动，如左右切换的焦点图。
  • 将所有<li>写在同一行。缺点：代码不美观
  • 将<ul>内的字符尺寸直接设为0，即font-size:0。缺点：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他尺寸，且在Safari浏览器依然会出现空白间隔
  • 消除<ul>的字符间隔letter-spacing: -8px。缺点：这也设置了<li>内的字符间隔，需要将<li>内的字符间隔设为默认的letter-spacing:normal
11.图片格式
  • BMP：无损，支持索引色和直接色的点阵图。几乎没有压缩，通常是较大文件
  • GIF：无损，文件小，索引色，支持动画以及透明。适用于对色彩要求不高且文件体积小的场景
  • JPG(JPEG) ：有损，直接色，适合存储照片
  • PNG-8：无损，索引色，是非常好的GIF替代者。相同效果下，PNG-8文件更小且支持透明的调节
  • PNG-24：无损，直接色
  • SVG：无损矢量图，放大时不会失真，适合绘制logo，icon
  • WebP：同时支持无损和有损压缩，使用直接色
12.CSS Sprites 精灵图

将页面涉及到的所有图片都包含到一张大图中，然后利用CSS的 background-image、background-repeat、background-position属性的组合进行背景定位

优点

  • 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是最大的优点
  • 减少图片的字节，把三张图片合并成一张图片的字节总是小于三张图片的字节总和的

缺点

  • 在图片合并时，要把多张图片有序的、合理的合并成一张图片。并且要预留足够的空间，防止板块内出现不必要的背景，在宽屏以及高分辨下的自适应，如果背景不够宽，很容易出现背景断裂
  • 开发的时候需要借助PS等工具对每个背景单元测量准确的位置
  • 维护麻烦，图片少许改动时就要改合并的图
13.line-height

概念：line-height指下一行基线到上一行基线距离，一个标签或容器没有设置高度时，最终表现的高度由line-height决定，把line-height值设置为height一样的值可以实现单行文字垂直居中

14.后处理器postCSS

通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性问题

15.::before和:after的双冒号和单冒号的区别

单冒号用css的伪类，双冒号用于css的伪元素

::before是一个子元素的存在，定义在元素主体内容之前的一个伪元素。但不存在于DOM之中，只存在页面之中

16.单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden  //溢出隐藏
text-overflow: ellipsis  //溢出部分省略号显示
white-space: nowrap  //规定段落中的文本不进行换行

多行文本溢出

overflow: hidden  //溢出隐藏
text-overflow: ellipsis  //溢出部分省略号显示
display: -webkit-box  //作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical  //设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp: 3  //显示行数
17.CSS预处理器（sass、less）是什么？

它们都是css预处理器，是css上的一种抽象层。他们是一种特殊的语法编译成css。less是一种动态样式语言，将css赋予了动态语言的特性，如变量、继承、运算、函数。less既可以在客户端上运行，也可以在服务端运行

为什么要使用它们

  • 解构清晰，便于扩展。可以方便的屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动
  • 可以轻松实现多重继承。完全兼容css代码，可以方便的应用到老项目中。less只是在css语法上做了扩展，所以老的css代码也可以与less代码一同编译
18.响应式设计的概念和原理

响应式网站设计是一个网站能够兼容多个终端，而不是为了一个终端做一个特定的版本

原理：基本原理是通过媒体查询（@media）查询不同的设备屏幕尺寸做处理。关于兼容：页面头部必须有mate声明的viewpoint。

18.1.媒体查询

响应式适配，根据不同的屏幕尺寸，显示不同的效果。媒体查询分为两个部分组成

  • 可选的媒体类型（如screen、print）
  • 零个或多个媒体功能限定表达式（如max-width：500px、orientation：landscape等）

这两部分最终都会被解析为true或false值，然后整个媒体查询的值为true，则和媒体查询关联的样式生效，否则不生效，简单来说，使用@media查询，可以针对不同的媒体类型定义不同的样式，@media比如说可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置响应式的页面，@media是非常有用的。当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面

19.CSS布局单位

常用单位布局包括像素（px），百分比（%），em，rem，vw\vh

  • 像素（px）是页面布局的基础，一个像素表示终端屏幕能显示的最小区域，像素分为两种类型：css像素和物理像素，适用于只需适配少部分移动设备，且分别率对页面影响不大的

    css像素： 为web开发者提供，在css中使用的一个抽象单位

    物理像素： 只与设备的硬件密度有关，任何设备物理像素都是固定的

  • 百分比：当浏览器的高度或宽度发生变化时，通过百分比单位可以使得浏览器中组件的宽高随着浏览器的变化而变化，从而实现响应式效果哦

  • em，rem：比px更灵活的相对长度单位，em是相对于父元素字体大小，rem是相对于根元素字体大小，适用于需要适配各种设备的

  • vw\vh：与视图窗口有关的单位，vw相对于视口宽度，vh相对于视口高度，此外还有vmin和vmax两个单位

20.两栏布局

一般两栏布局是指：左边一栏宽度固定，右边一栏自适应

  1. 利用浮动，将左边元素宽度设置为200px，并设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）

    .outer {
  height: 100px
}
.left {
  float: left
  width: 200px
}
.right {
  margin-left: 200px
  width: auto
}

  2. 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为 flex：1

    .outer {
  display: flex
  height: 100px
}
.left {
  width: 200px
}
.right {
  flex: 1
}
20.1.三栏布局

三栏布局指页面中共有三栏，左右两栏宽度固定，中间自适应布局

  1. 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin值

    .outer {
  position: relative
  height: 100px
}
.left {
  position: absolute
  height: 100px
  width: 200px
}
.right {
  position: absolute
  height: 100px
  top: 0
  right: 0
  width: 200px
}
.center {
  margin-left: 100px
  margin-right: 100px
  height: 100px
}

  2. 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex：1

    1. .outer {
  display: flex
  height: 100px
}
.left {
  height: 100px
}
.right {
  height: 100px
}
.center {
  flex: 1
}

  3. 利用bfc块级格式化上下文，左右固定宽高，进行浮动，中间overflow：hidden

21.水平垂直居中

  1. 绝对定位，将元素的左上角通过top和left定位到页面中心，再用translate来调整元素的中心点到页面中心，此方法需要考虑浏览器兼容问题

    .parent {
  position: relative
}
.child {
  position: absolute
  left: 50%
  top: 50%
  transfrom: translate(-50%,-50%)
}

  2. 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中，这种方法适用于盒子有高度的情况

    .parent {
  position: relative
}
.child {
  position: absolute
  top: 0
  bottom: 0
  left: 0
  top: 0
  margin: auto
}

  3. 利用绝对定位，先将元素的左上角通过top和left定位到页面中心，再用margin负值来调整元素的中心点到页面中心，该方法适用于盒子宽高已知的情况

    .parent {
  position: relative
}
.child {
  position: absolute
  top: 50%
  left: 50%
  margin-top： -50px  //自身height一半
  margin-left： -50px  //自身width一半
}

  4. 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向向上为居中对齐，然后他的子元素也可以实现垂直和水平居中。该方法要考虑兼容问题

    .parent {
  position: flex
  justify-content: center
  align-items: center
}
22.flex布局

flexibleBox弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。行内元素也可

注意，设为flex布局之后，子元素的float、clear和vertical-align属性都将失效。采用flex布局的元素，称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（cross axis）。项目默认沿水平主轴排列

23.浮动

非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开，内容会溢出到容器外面影响布局。这种现象称为浮动。

浮动原理

浮动元素脱离文档流，不占空间（引起“高度塌陷”现象）

浮动元素碰到包含它的边框或者其他的浮动元素的边框停留

浮动元素可以左右移动，直到遇到另一个浮动元素或者它的外边缘的包含框。浮动框不属于文档流中普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局，此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，就会出现高度塌陷

浮动引起的问题

  • 父元素高度无法被撑开，影响父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动

  1. 非父元素定义height
  2. 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
  3. 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
  4. 使用:after伪元素

24.BFC

块格式化上下文，是布局中生成块级盒子区域，是浮动元素与其他元素交互的限定区域

BFC是一个独立的布局环境，可以理解为一个容器，在这个荣光其中按照一定的规则进行物品摆放，并且不会影响其他环境中的物品。如果一个元素符合触发BFC条件，则BFC的元素布局不受外部影响

创建BFC的条件

  • 根元素：body
  • 元素设置浮动，float除none以外的值
  • 元素设置绝对定位，position：absolute\fixed
  • display值为：inline-block、table-cell、table-caption、flex等
  • overflow值为：hidden、auto、scroll

BFC特点

  • 垂直方向上，自上而下排列，与文档流的排列方式一致
  • 在BFC中上下相邻的两个容器margin会重叠
  • 计算BFC高度时，需要计算浮动元素的高度
  • BFC区域不会与浮动的容器发生重叠
  • BFC是独立的容器，容器内部元素不会影响外部元素
  • 每个元素的左margin值和容器的左border想接触

BFC作用

  • 解决margin重叠问题，由于BFC是一个独立的区域，内外部元素互不影响，将两个元素变为两个BFC，解决了重叠问题
  • 解决高度塌陷，对于子元素设置浮动后。父元素会发生高度塌陷（即父元素高度变为0）只需把父元素变为BFC即可解决，常用方法是给父元素设置overflow:hidden
  • 创建自适应两栏布局，左边宽度固定，右边宽度自适应，左侧设置float:left，右侧设置overflow:hidden。这样右边就是BFC，BFC不会与浮动元素发生重叠。

25.margin重叠

两块级元素的上外边距和下外边距可能会合并为一个外边距，这种行为就是外边距折叠。浮动元素和绝对定位这种脱离文档流的元素外边距不会折叠。重叠只会出现在垂直方向

计算原则：折叠合并后外边距的计算原则

  • 如果两者都是正数，取最大值
  • 如果一正一负，就会用正值减去负值的绝对值
  • 两个都是负值时，用0减去两个绝对值最大的那个

解决办法，对于折叠，主要有两种情况

  1. 兄弟之间重叠

    • 底部元素变为行内盒子：display: inline-block
    • 底部元素设置浮动：float
    • 底部元素的position值为absolute\fixed

  2. 父子之间重叠

    • 父元素加上：overflow:hidden
    • 父元素添加透明边框：border: 1px solid transparent
    • 子元素变为行内盒子：display: inline-block
    • 子元素加入浮动属性或定位
25.1.margin-top的百分比相对谁

margin的百分比是相对于父元素的宽度

26.元素叠层顺序

stacking order元素发生层叠时特定的垂直显示顺序

  1. 背景和边框
  2. 负的z-index
  3. 块级盒模型
  4. 浮动盒模型
  5. 行内盒
  6. z-index：0
  7. 正z-index

当定位元素z-index: auto，生成盒在当前层叠上下文中的层级为0，不会建立新的层叠上下文，除非是根元素

26.1.z-index

可以将它看作三维坐标系 中的Z轴方向上的图层 层叠顺序

元素默认的z-index为0，可通过修改z-index来控制设置了position值的元素的图层位置

可以将这种关系想象成一摞书本，通过z-index可以改变一本书在这一摞书中的上下位置

如果父辈元素有定位，且配置了z-index，优先按照父级元素定位的z-index进行比较层级

27.position

静态定位：static默认值不脱离文档流，top、bottom、right、left等属性不生效

绝对定位：absolute，元素会脱离正常文档流，不再占据空间，左右margin为auto会失效，通过top、bottom、right、left来绝对元素位置

相对定位：relative参照物：元素偏移前位置。设置了相对定位，左右margin为auto仍然生效，并且不会脱离文档流

固定定位：fiex参照物：浏览器窗口。固定定位会脱离文档流，当绝对定位和固定定位参照物都是浏览器窗口时的区别：固定定位元素不会跟随滚动条滚动；绝对定位会跟随滚动条滚动

28.absolute与fixed

共同点：

  1. 改变行内元素的呈现方式，将display置为inline-block
  2. 使元素脱离普通文档流，不占据文档物理空间
  3. 覆盖非定位文档元素

不同点：

  1. absolute与fixed的根元素不同，absolute的根元素可以设置，fixed根元素是浏览器
  2. 在有滚动跳的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置

29.stick

粘性定位，position: sticky，基于用户的滚动位置来定位

粘性定位的元素的是依赖用户的滚动，在position: relative和position: fixed之间切换。它的行为就像position: relative。而当页面滚动超出目标区域时，它的表现就像position: fixed，它会固定在目标位置

元素定位变现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定的阈值是：top、bottom、left、right之一。换言之，指定四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相似。

30.三角形

宽高设为0，给边框设置宽度，然后给一个边框设置颜色，其余边框设置透明

div {
  width: 0
  height: 0
  border: 100px solid transparent
  border-bottom-color: red
}
30.1.扇形
div {
  width: 0
  height: 0
  border: 100px solid transparent
  border-radius: 100px
  border-bottom-color: red
}
30.2.0.5px线
transform: scale(0.5, 0.5)

31.移动端常见问题

点击事件300MS延迟：下载fastclick包

H5页面窗口自动调整到设备宽度，并禁止用户缩放

 <meta name="viewport" content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0'/>

忽略Android平台对邮箱地址的识别

 <meta name="format-detection" content='email=no'/>

32.CSS动画

css3动画可以不用鼠标触发，自动反复执行某些动画，需要先定义动画然后再调用它

定义动画：@keyframes动画名称{from{} to{}}

调用动画的语法是：动画名称；动画时长 duration；速度曲线 timing-function；延迟时间 delay；重复次数 iteration-count；动画方向：direction；执行完毕时状态fill-mode

动画名称和时长必须赋值

33.CSS浏览器兼容

css3针对不同浏览器内核兼容写法

-webkit-：webkit内核

-moz-：火狐内核

-ms-：IE内核

-o-：opera内核

34.常用less特性

  1. 变量：使用@定义变量，变量名自定义

    @color: #00f  //定义变量
h1 {
  color: @color  //使用变量
}
​
//字符串插值
@variable:'xxx'
//将变量放到{}中
@{variable}
​
@url:'/images/'
div {
  background-image: url('@{url}1.jpg')
}

    媒体查询定义变量

    @mediaQuery: ~'(max-width: 600px)'
//由于~后面的值是不被编译的，所以可以用于媒体查询的参数
@media screen and @mediaQuery {}

  2. 嵌套

    less提供了使用嵌套代替层叠或与层叠结合使用的能力，使用less书写可以模仿HTML组织结构

  3. 计算

  4. 命名空间

    定义一个命名空间，可以使用任何的类\ID选择器，作为命名空间。此时命名空间的性质类似于函数

    这里定义一个命名空间（例如：.my()），使其在编译之后的文件中不输出。可以在这个命名空间中书写混合。使命名空间中的混合，类似于后代选择器（>或``)一样选择指定的选择器进行使用。

35.input元素type属性值

text、password、radio（单选按钮）、checkbox、submit、button、email、search（用于搜索的文本字段）

file（输入字段和”浏览...“按钮，供文件上传）、hidden、image、url、number、color、date、month、time

36.rem适配方法如何计算HTML根字号及适配方案

37.css如何让Chrome支持小于12px的文字

针对谷歌浏览器内核，加webkit前缀，用transform：scale()这个属性

span {
  font-size: 12px
  -webkit-transfrom: scale(0.83)
}

38.浏览器如何解析css选择器

在生成渲染树的过程中，渲染引擎会根据选择器提供的信息来遍历DOM树，找到对应的DOM节点后将样式规则附加到上面，浏览器遵循"从左往右"的规则来解析css选择器

39.less和sass的深度选择器是什么

在项目开发时，对于使用一些组件，例如element-ui，在有些不符合ui的设计图，这时我们就要修改一下组件样式。当标签有scoped属性时，它的css只作用于当前组件中的元素，去除后则没有这种效果，不过这种方法可能会导致全局污染，不推荐，这是就需要深度选择器

less：:deep；sass：::deep

HTML

1.HTML语义化

根据内容的结构化（内容语义化）选择适合的标签（代码语义化）

  • 对机器友好，有语义的文字表现力丰富，更适合爬虫爬取有效信息。利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录
  • 对开发者友好，使用语义标签增强了可读性，结构更加清晰。开发者能清晰看出网页结构，便于团队开发维护

常见语义化标签

<h1>~<h6>  标题标签
<headr></headr>  头部标签 
<nav></nav>  定义页面的导航连接部分
<main></main>  定义页面的主要内容，一个页面只能使用一次
<article></article>  定义页面独立内容，它可以有子的header、footer、section等
<section></section>  用于标记文档的各个部分，例如长表单文章的章节或主要部分
<aside></aside>  侧边栏
<footer></footer>  文档底部信息
<small></small>  呈现小号字体效果
<strong></strong>  用于强调文本

2.defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应脚本。不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载

defer和async属性都是去异步加载外部的JS脚本，它们都不会阻塞页面的解析，区别如下

  • 执行顺序：多个带async属性的标签，不能保证加载的顺序，多个带defer属性的标签，按照加载顺序执行
  • 脚本是否并行执行：async属性，表示后续文档的加载和执行与JS脚本的加载和执行是并行的，即异步执行；defer属性，加载后续文档的过程和JS脚本的加载是并步进行的，JS脚本需要等到文档所有元素解析完成以后才执行，DOMContentLoaded事件触发执行之前

3.H5新特性

  1. 新增语义化标签：nav、header、footer、aside、section、article
  2. 音频、视频标签：audio、video
  3. 数据存储：localStorage、sessionStorage
  4. canvas画布、Geolocation地理定位、websocket通信协议
  5. input标签新增属性：placeholder、autocomplete、autofocus、requied
  6. history API：go、forward、back、pushstate

4.src和href

src和href都是 用来引用外部资源，区别如下

  • src表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档内，如请求JS脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般JS脚本会放在页面底部
  • href：表示超文本引用，它会指向一些网络资源，建立和当前元素或文本的连接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常用在a、link标签上

5.img中srcset属性

响应式页面中经常用到根据屏幕密度设置不同的图片，这时就用到img标签的sercet标签，它可以定义一组额外的图片合集，让浏览器根据不同的屏幕状况选取合适的图片来显示

6.

avatar
文章
阅读
粉丝