【前端面试】HTML+CSS

已于 2023-11-10 20:29:12 修改
阅读量64 收藏
点赞数
文章标签： 前端
于 2023-09-25 22:36:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dandan_222/article/details/133282143
版权

HTML+css篇

HTML

HTML文档的生命周期有哪些？

  1. DOMContentLoaded
  • 当DOM准备就绪时，document上的DOMContentLoaded事件就会被触发。在这个阶段，我们可以将JavaScript应用于元素。
  • script引入的脚本或者script标签内的脚本会阻塞DOMContentLoaded事件，当 JS 引擎执行时 UI 线程会被挂起，浏览器将等待脚本执行结束。
  • 图片和其他资源仍然可以继续
  1. load
    当页面和所有资源都加载完成时，window上的load事件就会被触发。很少使用，因为通常加载不需要太长的时间。
  2. beforeunload
    当页面想要离开页面时（关闭浏览器标签页），window上的beforeunload事件就会被触发。如果取消这个事件，浏览器会弹出询问框询问是否真的要离开（常用于需要保存数据页面的提示）。
  3. unload
    当用户真正离开时，window上的unload事件就会被触发。在处理程序中，我们只能执行不涉及延迟或询问用户的简单操作。因为这个限制的存在，很少被使用。可以使用navigator.sendBeacon来发送网络请求。

HTML5新特性

  1. 简化的文档类型和字符集
    （1）文档类型（H5不再是SGML『Standard Generalized Markeup Language，标记通用标记语言』的一部分，而是独立的标记语言，不需要再考虑文档类型）

    <!DOCTYPE HTML>

    (2) 字符集（只需要utf-8即可）

    <meta chartset="UTF-8" >

  2. 新增标签

    富有语义化的结构元素
语义化：正确的标签包含了正确的内容，结构良好，便于阅读，可维护性好
<section></section>
<nav></nav>
<article></article>
<header></header>
<footer></footer>
<aside></aside>

新增的内联元素
<figure></figure>  // 包含图像、代码和其他内容对主要内容进行说明
<figcaption></figcaption>
<mark></mark>
<meter />
<progress />
<time />

<hgroup></hgroup>
<canvas></canvas>
SVG

  3. 支持动态页面
    （1）菜单 menu
    属性（在表单中） autoSubmit、label、type（context、toolbar、list）
    （2）右键菜单 menuItem
    属性：label、icon、onClick
    （3）script标签中，async属性，用于指定一步执行的脚本
    （4）details

  4. 全新的表单设计

  5. 强大的绘图功能和多媒体功能
    （1）canvas
    （2）svg
    （3） 视频

    <video src = "" ></video>
    属性作用
    src需要播放的视频地址
    width/height设置播放视频的宽高
    autoplay是否自动播放
    controls是否显示控制条
    poster播放之前显示的站位图片地址
    loop是否循环播放
    preload是否预加载，与autoplay冲突，设置了autoplay属性，preload属性会失效
    muted静音模式

    (4) 音频

    <audio src = "" type="" ></audio>

    音频属性与视频属性差不多，不过不存在宽高和poster属性。

    属性作用
    src需要播放的视频地址
    autoplay是否自动播放
    controls是否显示控制条
    loop是否循环播放
    preload是否预加载，与autoplay冲突，设置了autoplay属性，preload属性会失效
    muted静音模式

  6. 打造桌面应用的一系列新功能
    Web Storage 离线缓存
    H5扩展文件存储的能力多大5MB，支持WebSQL
    HTML5 Web Storage API

  7. 获取地理位置信息 Geolocation API

  8. 支持多线程 Web Worker

  9. 废弃的标签（待整理）
    （1）表现性元素
    （2）框架型元素
    （3）属性类
    （4）其他类

行内元素/块元素有哪些

  1. 行内元素： 相邻的行内元素会排列在同一行，不会独占一行，设置宽高无效
    span、a、br、i、em、input、select、sub、sup、u、textarea
  2. 块级元素：会独占一行，可以设置宽高等属性
    div、h1-h6、hr、p、ul、ol、table、address、blockquote、dir、form、menu
  3. 可变元素：根据上下文决定该元素为块元素还是内联元素
    button、del、iframe、ins

网页的三层结构

结构 HTML或XHTML
表现 css样式表
行为 js

HTML5 drag API

事件作用
dragstart在开始拖放被拖放元素时触发
drag在正在拖放被拖放元素时触发
dragenter在被拖放元素进入某元素时触发
dragover在被拖放在某元素内移动时触发
dragleave在被拖放元素移出目标元素时触发
drop在目标元素完全接受被拖放元素时触发
dragend在整个拖放操作结束时触发

示例代码：

let dragged;

/* 在可拖动的目标上触发的事件 */
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // 保存被拖动元素的引用
  dragged = event.target;
  // 设置为半透明
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 拖动结束，重置透明度
  event.target.classList.remove("dragging");
});

/* 在放置目标上触发的事件 */
const target = document.getElementById("droptarget");
target.addEventListener(
  "dragover",
  (event) => {
    // 阻止默认行为以允许放置
    event.preventDefault();
  },
  false,
);

target.addEventListener("dragenter", (event) => {
  // 在可拖动元素进入潜在的放置目标时高亮显示该目标
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // 在可拖动元素离开潜在放置目标元素时重置该目标的背景
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

target.addEventListener("drop", (event) => {
  // 阻止默认行为（会作为某些元素的链接打开）
  event.preventDefault();
  // 将被拖动元素移动到选定的目标元素中
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});

CSS

简述css盒子模型

盒模型
css盒模型从外到内分成四个部分：margin(外边距)、border(边框)、padding(内边距)、content(内容)
默认情况下（w3c标准盒子）设置width和height属性只是设置content的宽和高，盒子真正的高度是：content+padding+border+margin

css3新增的特性

（1）边框

border-radius 添加圆角边框
border-shadow: 水平位移 垂直位移 模糊半径 阴影尺寸 阴影颜色 内/外部阴影  // 给边框添加阴影
border-image 设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（repeat 平铺；round 铺满；stretch 拉伸）

（2）背景

background-size 背景图片尺寸
background-origin 规定background-position属性相对于什么位置定位
background-clip 规定背景的绘制区域（padding-box，border-box，content-box）

（3）渐变

linear-gradient 线性渐变
radial-gradient 径向渐变

（4）文本效果

word-break 定义如何换行
word-wrap 允许长的内容可以自动黄行
text-overflow 指定当文本溢出包含它的元素，应该怎么处理
text-shadow 文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

（5）转换

tranform应用于2D3D转换，可以将元素旋转、缩放、移动、倾斜
transform-origin 可以更改元素转换的位置（改变xyz轴）
transform-style 指定嵌套元素如何在三维空间中呈现

2D转换方法
rotate 旋转
translate(x, y) 指定元素在二维空间的位移
scale(n) 定义缩放转换

3D转换方法
perspective(n) 景深

（6）过渡

transition-property 过渡属性名
transition-duration 完成过渡效果需要花费的时间
transition-timing-function 指定切换效果的速度
transition-delay 指定什么时候开始切换效果

（7）动画animation

animation-name 为@keyframes动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画

清除浮动

  1. 父元素定义高度
    优：快速简单，代码少
    缺：无法进行响应式布局

  2. 额外标签法：给谁清除，置于其后
    优：通俗易懂、书写方便
    缺：添加许多无意义的标签，结构化比较差

    <div class="father">
	<div class="big">big</div>
	<div class="small">small</div>
	<div class="clear">clear</div>
</div>

.clear {
	clear: both;
}

  3. 父级添加overflow: auto
    优：简单，代码少，兼容性好
    缺：内部宽高超过父级时，会出现滚动条

  4. 父级添加overflow: hidden 可以通过出发BFC的方式，实现清除浮动效果。
    必须定义width或zoom: 1，同时不能定义height，使用overflow: hidden时，浏览器自动检查浮动区域的高度。
    优：简单、代码少，浏览器支持好
    缺：
    1. 内容增多时，容易造成不会自动换行，导致内容被隐藏掉，无法显示需要溢出的元素。
    2. 不能和position配合使用，因为超过的尺寸会被隐藏。

    .father {
	width: 400px;
	border: 1px solid deeppink;
	overflow: hidden;
}

  5. 伪元素清除
    优：符合闭合浮动的思想，结构语义化正确，不容易出现怪问题。
    缺：IE6-7不支持：after，需要使用zoom: 1;

    <div class="father clearfix" >
	<div class="big" >big</div>
	<div class="small" >small</div>
</div>

.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	*zoom: 1;
}

  6. 双伪元素清除
    优：代码更简洁
    缺：只适合高度固定的布局，要给出精确的高度

    <div class="father clearfix" >
	<div class="big" >big</div>
	<div class="small" >small</div>
</div>

.father {
	*zoom: 1;
}

.clearfix:after,
.clearfix:before {
	content: " ";
	display: block;
	clear: both;
}

.big,
.small {
	width: 200px;
	height: 200px;
	float: left;
}

定位 position

  1. relative 相对定位，不脱离文档流，相对于自身定位
    如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素『相对于』它的七点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致它覆盖其它元素。
  2. absolute 绝对定位，脱离文档里，相对于父级定位
    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于根元素html。absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。
  3. fixed 固定定位，脱离文档流，相对于浏览器窗口定位
    元素的位置相对于浏览器窗口时固定位置，即使窗口是滚动的它也不会移动。fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠。
  4. sticky 粘性定位，与top配合使用
    元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
  5. static 默认值，元素出现在正常的文档流中
    没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）。
  6. inherit
    规定应该从父元素继承position属性的值。
属性相对于谁定位是否占据空间表现
固定定位fixed浏览器窗口不占空间，元素与其他元素重叠窗口滚动也不会移动
相对定位relative相对于元素原来的位置占据
绝对定位absolute相对于最近的已定位父元素（若没有，则相对于html）不占空间，元素与其他元素重叠
粘性定位sticky相对于钙元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位
默认定位static没有定位，元素出现在标准流中
inherit从父元素继承position属性值

子元素如何在父元素中居中

  1. 水平居中
    （1）子父元素宽度固定，子元素设置margin: auto; 并且子元素不能设置浮动，否则居中失效。
    （2）子父元素宽度固定，父元素设置text-align: center，子元素设置display: inline-block，并且子元素不能设置浮动，否则居中失效

  2. 水平垂直居中：
    （1）子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半。
    （2）子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin: auto。
    （3）父元素设置

    display: table-cell; 
vertical-align: middle

    子元素设置margin: auto。
    （4）父元素相对定位，子元素绝对定位，子元素top、left值为50%，transform: translate(-50%, -50%)。
    （5）父元素设置弹性盒子

    display: flex; 
justify-content: center; 
align-item: center;

  3. 垂直居中
    （1）设置子元素和父元素的行高一样（子元素内容只有一行文字时）。
    （2）子元素设置为行内块 display: inline-block; 再加vertical-align: center;
    （3）已知父元素高度，子元素绝对定位，通过top和margin-top进行设置。
    （4）子绝父相，子元素top: 50%; transform: translateY(-50%);
    （5）创建一个隐藏节点，让隐藏节点的height为剩余高度的一半。
    （6）父元素display: table，子元素display: table-cell; vertical-align: middle;
    （7）给父元素添加伪元素。
    （8）弹性盒，父元素display: flex; 子元素align-self: center;

border-box和content-box的区别

content-box 标准盒模型 width不包括padding和border
border-box 怪异盒模型 width包括padding和border

如何让chrome浏览器显示小于12px的文字

以前添加谷歌私有属性： -webkit-text-size-adjust: none;
现在使用缩放：-webkit-transform: scale();

css选择器和优先级

  1. 选择器
  • css2选择器：
    元素选择器、id选择器、群组选择器、类选择器、*通配符选择器、后代选择器
  • css2伪类选择器
    a:link/visited/hover/active
  • css3新增选择器
    属性选择器： E[att^=”val”]、E[att$=”val”]、E[att*=”val”]
    结构伪类选择器：
    E:root
    E:nth-child(n)
    E:nth-last-child(n)
    E:nth-of-type(n)
    E:nth-last-of-type(n)
    E:only-of-type(n)
    E:last-child
    E:only-child
    E:empty
    与用户界面(UI)有关的伪类
    E:enabled
    E:disabled
    E:checked
    E::selection
    级元素通用选择器
    E ~ F
    反选伪类
    E:not(s)
    :target 伪类
    E:target
  1. 优先级
    计算规则：

    • 当CSS选择器权重相同，则最后的声明的CSS选择器覆盖靠前的 CSS。

    • CSS优先级是根据由每种选择器类型构成的级联字串计算而成的，它不是一个对应相应匹配表达式的权重值。

    • 相同CSS表达式，在DOM结构中的距离是不会对元素优先级计算产生影响的。
      优先级列表

      选择器优先级
      通用选择器 *
      元素（类型选择器）1
      类选择器10
      属性选择器
      伪类
      id选择器100
      内联样式1000

      外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
      优先级规则：

    • 选择器都有一个权值，权值越大越优先。

    • 当权值相等时，后出现的样式表设置要优于先出现的样式表设置。

    • 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。

    • 继承的CSS 样式不如后来指定的CSS 样式

    • 在同一组属性设置中标有“!important”规则的优先级最大。

css可继承属性

（1）所有元素可继承：visibility和cursor
（2）块级元素可继承：text-indent和text-align
（3）列表元素可继承：list-style，list-style-type，list-style-position，list-style-image
（4）内联元素可继承：

  • letter-spacing
  • word-spacing
  • line-heigh
  • color
  • font，font-family，font-size，font-style，font-variant，font-weight
  • text-decoration，text-transform
  • direction

margin和padding在什么场合下使用

当需要在border外侧添加空白时使用margin，当需要在border内测添加空白时用padding。
由于margin会出现塌陷等情况，如果能够实现同样的效果，优先使用padding。

弹性盒子flex

通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
原理，通过给父盒子添加flex属性，来控制子盒子的位置和排序方式。
flex 布局时，有两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。

举例主轴为row和row-reverse
row
row-reverse

  • 属性

    属性作用
    flex-direction弹性容器中子元素的排列方式（主轴排列方式），可以取4个值：row、row-reverse、column、column-reverse
    flex-wrap设置弹性盒子的子元素超出父容器时是否换行
    flex-flow是flex-direction和flex-wrap简写形式
    align-item设置弹性盒子元素在侧轴上的对齐方式 stretch、flex-start、flex-end、center
    align-content设置行对齐
    justify-content设置弹性盒子元素在主轴上的对齐方式 stretch、flex-start、flex-end、center、space-around、space-between
    flex-basis指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
    flex-grow设置 flex 项 主尺寸 的 flex 增长系数，默认为 0
    flex-shrink指定了 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认为 1

  • 弹性盒子计算
    （1）flex-grow
    当项目总宽度小于父元素宽度时，flex-grow生效，计算为未占满宽度/flex-grow的值之和，并根据flex-grow的值分配给相应的项目进行拉伸。

    注意：

  • 项目宽度设有width或flex-basic属性时，容器宽度先减去这些项目width或flex-basic的值，容器剩下的宽度会按flex-grow来计算并分配给所有项目。

  • 项目宽度设有max-width，如果项目宽度大于了max-width，多余的宽度会重新分配给没有设置max-width或还不足max-width属性值的项目。

在这里插入图片描述
（2）flex-shrink
当项目总宽度大于父元素宽度时，flex-shrink生效，项目总宽度会自动收缩到和容器宽度一致。但计算与flex-grow不同，收缩的大小不能直接用flex-strink来计算。
在这里插入图片描述

.flex-item1 {
  background-color: red;
  flex: 0 8 800px;
}

.flex-item2 {
  background-color: gray;
  flex: 0 4 400px;
}

.flex-item3 {
  background-color: antiquewhite;
  flex: 0 2 200px;
}

.flex-item4 {
  background-color: orange;
  flex: 0 1 100px;
}

按上述例子，父容器宽度为1000px，按照MDN说法，item1的宽度为 800 - （1500 - 1000）（8 / 15）= 533.33px。

但是项目的收缩大小并不是通过flex-shrink直接得到的，还需要用到flex-basic

  1. 先要去计算项目的虚拟总宽度VS = 各项目flex-basic flex-strink 之和
  2. 再计算单个项目的占比P = flexflex-strink / VS
  3. 最后计算项目应该减去的大小 = 真实超出部分 * P。

800 - （1500 - 1000）8 / （8008+4004+2002+100*1）=423.53px

注意：

  • 项目中设有max-widh或min-width
    先计算出项目收缩后的宽度，如果项目宽度大于了max-width，最终项目的大小会以max-width的值为准，且多余的宽度会分配给其他项目；如果项目小于了min-width，最终项目的大小会以min-width为准，且少分配的宽度会从其他项目中减去。分配给其他项目的这部分宽度要准守上面所写的计算规则按占比分配

  • 项目中既有max-width又有min-width
    先计算出项目收缩后的宽度，按照“多退少补”的方式来处理max-width和min-width的情况。
    举个例子

    .flex-item1 {
  background-color: red;
  flex: 0 4 400px;
  /* 240 */
  min-width: 300px;
}

.flex-item2 {
  background-color: gray;
  flex: 0 2 400px;
  /* 320 */
  max-width: 280px;
}

.flex-item3 {
  background-color: antiquewhite;
  flex: 0 4 200px;
  /* 120 */
  max-width: 100px;
}

.flex-item4 {
  background-color: orange;
  flex: 0 2 200px;
  /* 160 */
}

.flex-item5 {
  background-color: lightcoral;
  flex: 0 2 200px;
  /* 160 */
}

    item1收缩后的宽度是240px，min-width是300px，所以item1就借走了60px，需要从其他项目中补上60px；item2收缩后的宽度是320px，max-width是280px，所以item2退给其他项目40px；item3同理，退给其他项目120-100=20px。最后发现item1借的60px宽度刚好可以由item2的40px和item3的20px补上，互补之后两清了，于是，item4和item5的宽度不受影响不变化。

（3）其他影响宽度计算的例子

  1. 容器上设有flex-wrap=wrap属性
    项目的宽度超出了容器的宽度，超出部分的项目自动移动到到下一行去，在每一行中，项目的宽度计算都以flex-grow为准

  2. 项目中设有position
    如果position的值使项目脱离文档流，容器中的项目flex属性就会失效，其他的项目宽度按flex属性自适应。

px、rem、em的区别

px，绝对长度单位，像素px时相对于显示器屏幕分辨率来说的
em，相对长度单位，相对于当前对象内文本的字体尺寸
em的值不是固定的
em会继承父级元素的字体大小（参考物是父元素的font-size）
em中所有的字体都是相对于父元素的大小决定的
rem，相对于html根元素的font-size

rem缺点
屏幕越小的移动设备如果用了rem肯定文字就越小，就会导致看文字的时候特别费眼睛。

CSS浏览器兼容性

为什么会有兼容性？
-因为浏览器厂商太多，不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。
css兼容性解决？
所有的解决方式并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了。

  • 浏览器CSS样式初始化
    由于不同浏览器的标签默认的margin、padding不同
    初始化库，normalize.css

    * { 
 margin: 0; 
 padding: 0; 
}

  • 浏览器私有属性
    某个CSS的属性前添加一些前缀，比如-webkit-，-moz- ，-ms-，这些就是浏览器的私有属性。
    私有属性的出现是因为HTML和CSS标准的组织W3C的动作是很慢的，而浏览器商市场推广时间紧，如果属性成熟就会在浏览器中增加属性支持。

    • moz代表firefox浏览器私有属性
    • ms代表IE浏览器私有属性
    • webkit代表chrome、safari私有属性
    • o代表opera私有属性*
    -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
 -moz-transform:rotate(-3deg); /*为Firefox*/
 -ms-transform:rotate(-3deg); /*为IE*/
 -o-transform:rotate(-3deg); /*为Opera*/
 transform:rotate(-3deg); /*标准属性至于最后*/

    可以看到上述代码书写起来比较痛苦，自动化插件处理：
    举例：使用Autoprefixe（一款自动管理浏览器前缀的插件），可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的，如果项目需要支持旧版浏览器，可修改browsers参数设置 。
    注意：webpack、gulp、grunt都有相应的插件

  • CSS hack
    针对不同浏览器或浏览器版本书写特定的css样式。
    有三种：条件hack、属性级hack、选择符级hack

    1. 条件hack
      针对IE浏览器不同版本

      语法：

      <!--[if <keywords>? IE <version>?]> 
 代码块，可以是html，css，js 
<![endif]-->

      取值：
      keywords
      if后面跟的条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

      关键字作用
      是IE某些版本
      not否IE某些版本
      gt选择大于指定版本的IE版本，greater than
      gte选择大于或等于指定版本的IE版本，greater than or equal
      lt选择小于指定版本的IE版本，less than
      lte选择小于或等于指定版本的IE版本，less than or equal
      !选择除指定版本外的所有IE版本

      version
      IE浏览器版本，如6、7、8
      IE10及以上版本已将条件注释特性移除，使用时需注意。

    2. 属性级hack
      属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。
      语法：

      selector{<hack>?property:value<hack>?;}

      取值：
      选择IE6及以下，下划线（_），中划线（-）亦可使用。
      选择IE7及以下，使用*，（+）与（#）之类的均可使用。
      注意书写顺序：低版本的兼容性写法放到最后

      举例：

      .test {
 color: #0909; /* For IE8+ */
 *color: #f00; /* For IE7 and earlier */
 _color: #ff0; /* For IE6 and earlier */
}

    3. 选择符级hack
      针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

      常见的选择符级hack：

    • *html *前缀只对IE6生效
    • *+html *+前缀只对IE7生效
    • @media screen\9{…}只对IE6/7生效
    • @media \0screen {body { background: red; }}只对IE8有效
    • @media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效
    • @media screen\0 {body { background: green; }} 只对IE8/9/10有效
    • @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    • @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
      {body { background: orange; }} 只对IE10有效

    示例：

    * html .test { color: #090; } /* For IE6 and earlier */
* + html .test { color: #ff0; } /* For IE7 */

  • 其他常见的css兼容性问题

    • IE6：设置float同事设置margin出现双倍边距问题，display: inline
    • 图片默认有边距（使用float解决）
    • IE9以下，不能使用opacity

三栏布局方式（两边固定中间自适应）

  1. margin负值法
    左右两栏均左浮动，左右两栏采用负的margin值，中间栏被宽度为100%的浮动元素包起来。
  2. 自身浮动法
    左栏左浮动，右栏有浮动，中间栏放最后。
  3. 绝对定位法
    左右两栏采用绝对定位，分别固定于页面的左右两侧，中间栏用左右margin值撑开距离。
  4. flex
    左右固定宽，中间flex: 1。
  5. 网格布局
  6. table布局

0.5px线画法

  1. 采用meta viewport
<meta
	name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
  1. border-image
  2. tranform: scale()

JS动画和css3动画的差异性（c3操作dom？）

渲染线程分为main thread和compositor thread
如果css动画值改变transform和opacity，这时整个css动画得以在compositor thread完成；而JS动画则会在main thread执行，然后触发compositor thread进行下一步操作。
注意：如果改变transform和opacity是不会layout或paint的。

区别：

  • 功能涵盖面，js比css大
  • 实现/重构难度不一，css3比js更加简单，性能调优方面，对帧速表现不好的低版本浏览器，css3可以做到自然降级。
  • css3动画有天然事件支持
  • css3有兼容性问题

overflow的原理

前置概念，格式化上下文（A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other），格式化上下文时CSS可视化渲染的一部分，它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系。
当元素设置了overflow样式且值不为visible时，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，所以达到了清除浮动的目的。

display: none; 和visibility: hidden; 的区别是什么？

display: none; 彻底消失，释放空间。能引发页面的reflow回流（重排）。
visibility: hidden; 就是隐藏，位置不释放，好比opacity: 0; 不引发页面回流。

如何触发BFC，以及BFC的作用

BFC：块级格式化上下文 block formatting context，是一个独立渲染区域。规定了内部box如何布局，并且与这个区域外部毫不相干。

触发：

  • float值不是none
  • position值不是static或者relative
  • display值是inline-block、block、table-cell、flex、table-caption、或者inline-flex
  • overflow值不是visible

作用：避免margin重叠；自适应两栏布局；清除浮动。

css实现一个三角形

.triangle {
	width: 0;
	height: 0;
	border: 100px solid transparent;
	border-left-color: red;
}

实现左边固定宽，右边自适应布局

  1. 圣杯布局
<div id="container">
	<div id="center" class="column"></div>
	<div id="left" class="column"></div>
	<div id="right" class="column"></div>
</div>

#container {
	padding-left: 200px;
	padding-right: 150px;
}

#container .column {
	float: left;
}

#center {
	width: 100%;
}

#left {
	width: 200px;
	margin-left: -100%;
	position: relative;
	right: 200px;
}

#right {
	width: 150px;
	margin-right: -150px;
}
  1. 双飞翼布局
<div id="container">
	<div id="center" class="column"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

#container {
	width: 100%;
}

.column {
	float: left;
}

#center {
	margin-left: 200px;
	margin-right: 150px;
}

#left {
	width: 200px;
	margin-left: -100%;
}

#right {
	width: 150px;
	marign-left: -150px;
}
  1. 等高布局（假等高）互补的内外边距
.parent {
	overflow: hidden;
}

.left, .right {
	margin-bottom: -10000px;
	padding-bottom: -10000px;
}
  1. 等高布局（真等高）弹性盒子
.parent {
	display: flex;
}

.child {
	flex: 1;
}
  1. calc
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

.column {
	float: left;
}

#left {
	width: 100px;
}

#right {
	width: 200px;
}

#center {
	width: calc(100% - 100px - 200px);
}
  1. 浮动
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="center"></div>

#left {
	float: left;
	width: 100px;
}

#right {
	float: right;
	width: 200px;
}

#center {
	margin-left: 100px;
	margin-right: 200px;
}

响应式布局常用解决方案

link标签与import标签的区别

link属于html标签，而@import时css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性问题，而@import只有IE5以上才能识别。
link方式样式的权重高于@import。

css3中的transition和transform属性

区别transitiontransform
是否能自动执行不能，需要事件触发，比如hover能
能否重复发生不能，除非再一次触发能
能否包含多个状态不能，只有开始和结束状态能，比如0%到100%，任意指定过渡状态
能否暂停不能，一次性能，比如hover事件触发暂停
能否定义速度曲线能能
能否定义某个属性值过渡能能

CSS中对溢出的处理

text-overflow属性，值为clip是修剪文本；ellipsis为显示省略号来

其他

网络使用图片格式有哪些

JPEG、GIF、PNG、WebP、SVG，最常用的是JPEG格式

  • JPEG是JPEG标准的产物，该标准由国际标准化组织（ISO）制订，是面向连续色调静止图像的一种压缩标准，后缀名.jpg或.jpeg。在ps以jpeg格式存储时，提供11级压缩级别（0-10，0级压缩比最高，图像品质最差，采用第8级压缩为存储空间与图像质量兼得的最佳比例），JPEG是有损压缩。
  • GIF，原义“图像互换格式”，是CompuServe公司在 1987 年开发的图像文件格式，因其体积小、成像相对清晰，特别适合于初期慢速的互联网，而大受欢迎。但是用作动图时，当帧数过多或过大会在网络不好或者cpu内存不足等情况下出现卡帧的情况，需要进行懒加载或者压缩。
  • PNG，是便携式网络图形，是一种采用无损压缩算法的位图格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。 格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可展现256级透明程度。简单理解位数越多，支持的颜色越多。PNG8，8代表2的8次方也就是256色；PNG24，24则代表2的24次方大概有1600多万色。
  • SVG，指可伸缩矢量图形用于描述二维矢量图形的一种图形格式。SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。
  • WebP，是一种同时提供了有损压缩与无损压缩的图片文件格式，是由Google购买On2 Technologies后发展出来的格式，以BSD授权条款发布。

预处理器scss、less与css的区别

预处理器是在css基础上进行的扩展，提供了更强大、更灵活的样式编写方式。可以提高样式编写的效率和质量，但是使用预处理器需要学习和掌握额外的语法和工具，增加了学习和使用成本。

区别：

  1. 语法不同

    CSS使用大括号和分号来组织样式，而预处理器使用类似编程语言的语法来组织样式，如使用变量、函数、循环等。

  2. 可以使用变量

    在CSS中不支持使用变量，而预处理器可以使用变量来存储和复用样式值，提高了代码的复用性和可维护性。

  3. 可以使用函数和混合（Mixin）

    预处理器可以定义函数和混合，让样式的编写更加灵活。例如可以定义一个用于生成渐变背景的函数，或者定义一个用于生成常用样式的混合。

  4. 支持嵌套

    预处理器支持嵌套选择器，可以更加清晰地表达样式之间的关系，减少了代码的层级。

  5. 自动添加前缀

    预处理可以自动添加浏览器前缀，减少了样式编写的繁琐性。

  6. 需要编译

    预处理器需要通过编译将预处理器的语法转换为标准的CSS代码，才能在浏览器中使用。

dandan_222
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端面试题.md
09-06
##绝对定位和相对定位 ###绝对定位（absolute） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口 ###相对定位（relative） 如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
前端面试总结（at, md）
weixin_34023982的博客
12-13 258
引入 面试过去了这么久，把八月份面试题和总结发一下吧，虽然年底大家可能都不换工作~ 还是可以看看的。 关于面试，引用叶老湿的一句话。你的简历是自己工作的答卷，项目经历是你给面试官出的考纲。所以，我的面试一定是与我的简历、工作经历相关的，一些面试题并不一定适用于任何人，但是你可以从中了解他们考察的点，以及侧重点。基础知识可以查漏补缺。 原文链接 moka 一家小型创业公司。因为同事有去面过的，他说...
前端面试题（编程题）
weixin_46663224的博客
08-04 261
https://segmentfault.com/a/1190000021390890?utm_source=tag-newest
2019最新前端面试汇总.md
06-11
2019最新的Web前端面试题汇总是，本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！ 面试有几点需注意： 1.面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方 向↑。 2.题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。 3.进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延 展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学 习，绝对不是临时记得住的。
大前端面试题总结（html+css+js）
TJHWM_的博客
03-17 3200
前端面试题html+css+js常问知识汇总
前端面试题汇总（含答案）（HTML+CSS篇）
小賀のBlog
04-25 3136
收集了很多同学的面经问题，并做了对应的学习，为了方便经常学习巩固顾对此做了汇总，类似问题做了合并，涉及到的不同技术点也做了分类，本篇主要汇总HTML+CSS的一些面试问题，持续更新......
【前端面试】HTML5+CSS3初级面试3
Wendy
02-10 7996
1、写出media type的几种使用方法。 1）方法一 ： 2）方法二： 3）方法三： @import url("style.css") screen; 4）方法四： @import url("style.css"); 5）方法五： @media screen{ selector{rules} }      当然，这几种方法各有利弊，而我们常用的是第一种和最后
HTML+CSS面试题总结（附答案+视频讲解）
xm1037782843的博客
06-25 2609
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
前端面试HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试
热门推荐
luemeon的博客
05-07 2万+
变量声明不开辟内存,只是告诉编译器,要声明的部分存在,要预留部分的空间。var i;变量定义开辟内存。var i=123;props公开，单向数据流值，父子组件间的唯一通信不可改1.每个组件对象都会有props（properties的简写）属性2.组件标签的所有属性都保存在props中3.内部读取某个属性值：this.props.propertyNamestate私有（通过Ajax获取回来的数据，一般都是私有数据），React 把组件看成是一个状态机（State Machines），
HTML+CSS项目案例
qq_52108058的博客
11-30 3497
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
前端面试题html+css+js+ts+vue+react+uniapp
04-12
前端面试题必备，包含html+css+js+ts+vue+react+uniapp等
前端常考面试题HTML+CSS
05-30
该资源是自己在牛客网刷题时，总结的关于HTML和CSS的常考面试题，与大家分享，答案供大家参考。
前端面试必备1000题HTML+CSS+JS
12-24
前端面试必备1000题包括了300道HTML、CSS习题及面试题（含答案）；700道JavaScript习题及面试题（含答案）。
前端：html+css+js+node+vue 思维导图/面试题
07-08
前端：html+css+js+node+vue 思维导图/面试题，提供给大家使用。 小白新手必备
前端 html,css 经典面试题 16道 （20220322）
weixin_59519449的博客
03-22 3139
1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。 H5新特性有： 语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket 移除了： 1、显现层元素：basefont 、big、center、font、s、strike、tt、u 2、性能较差元素：fr...
HTML+CSS登录页面
jakelihua
10-28 4424
HTML,CSS，登录页面，动态背景
日常工作记录目录
最新发布
与海
06-21 148
EasyExcel实现二维码下载与展示
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 294
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
前端面试html和css部分笔试题
07-28
当然，我可以帮你回答一些前端面试中关于HTML和CSS的笔试题。以下是一些常见的问题： 1. 请解释一下HTML和CSS的作用。 HTML（超文本标记语言）用于创建网页的结构和内容，而CSS（层叠样式表）用于控制网页的样式和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值