朝花夕拾

简答-html&css

23 min read

html

常见块元素、行内元素、行内块元素，及其特点

（1）块元素

常见的有h1、p、div等。

特点：

  • 独占一行
  • 宽、高、外边距、内边距都可以控制
  • 宽度默认为容器的100%
  • 内部可以放行内/块元素

（2）行内元素

常见的有a、span、em等

特点：

  • 不独占一行
  • 宽、高设置无效
  • 默认宽度是本身内容的宽度
  • 行内元素内部，只能放文本和其他行内元素

（3）行内块元素

常见的有img、input等

特点：

  • 不独占一行，一行可以显示多个
  • 宽、高、外边距、内边距都可以控制
  • 默认宽度是本身内容的宽度

localStorage、sessionStorage、cookie 三者明细区别

cookielocalStoragesessionStorage
存储大小4kb5M5M
通讯相关随请求携带不会自动携带不会自动携带
存储格式字符串键值对键值对
时效相关可以设置永久会话级别，窗口关闭后清除
跨页面通讯可以只在本页面有效

localStorage、cookie跨域访问策略

  • localStorage在不同域名下，是数据隔离的。
  • cookie在同一主域、不同子域下，是可以相互访问的。

localStorage跨域的解决方案，使用iframe+postMessage获取数据

网站TDK三大标签以及SEO优化

TDK：是网站标题title、描述description、关键词keywords的缩写，主要对当前网页进行总结和概述。

SEO：搜索引擎优化，目的是在搜索引擎上提升网站的排名，提高网站的知名度。必须要有三大标签。

img标签的title属性与alt属性的区别

  • alt是给搜索引擎识别，在图像无法显示时的替代文本
  • title属性是关于元素的注释信息，主要是给用户解读
  • 在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用

src 和 href 的区别

src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。

  • src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
  • href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别

title与h1的区别

  • 从网站角度看，title 更重于网站信息。title可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。
  • 从文章角度看，h1则是用于概括文章主题。
  • 一个网站可以有多个title,最好一个单页用一个title，以便突出网站页面主体信息，从seo看，title权重比h1高，适用性比h1广。
  • 标记了h1的文字页面给予的权重会比页面内其他权重高很多。一个好的网站是h1和title并存，既突出h1文章主题，又突出网站主题和关键字。达到双重优化网站的效果。

b与strong 的区别

  • b 是只是对文本的简单加粗，strong 是一个语义化标签，对相关文本具有强调作用
  • b 标签只是侧重于字体加粗，strong标签加强字体的语气都是通过粗体来实现的，相比之下，搜索引擎更喜欢侧重于strong标签
  • strong标签更注重于内容上的应用，在html中，对关键词的标明，然而还有一些网站上，也有使用strong标签登对小标题进行强调，但是在页面中，如果出现过多的strong标签，可能会对排名不利。

i 与 em 的区别

  • i(italic)是实体标签，用来使字符倾斜，em(emphasis)是逻辑标签，作用是强调文本内容
  • i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
  • em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。
  • 建议：为了符合CSS3的规范，i 标签应尽量少用而应改用 em

iframe的基本介绍与使用

介绍：iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用iframe标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。

优点：

  • iframe能够原封不动的把嵌入的网页展现出来。
  • 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
  • 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
  • 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
  • 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)

缺点：

  • 页面样式调试麻烦，出现多个滚动条；
  • 浏览器的后退按钮失效；
  • 过多会增加服务器的HTTP请求；
  • 小型的移动设备无法完全显示框架；
  • 产生多个页面，不易管理；
  • 不容易打印；
  • 代码复杂，无法被一些搜索引擎解读。
  • 搜索引擎的检索程序无法解读这种页面，不利于SEO;

场景总结：

  • 运维性网站或继承性开发的网站，可以使用iframe
  • 销售内，官网、展示性网站等建议不使用iframe
  • 标准的网页设计是不使用iframe的
  • 嵌入的网页必须与主页面同源，否则会受到浏览器的安全限制
  • 嵌入的网页可能会影响页面性能和加载速度，特别是当嵌入的网页包含大量的资源（如图片、CSS 和 JavaScript）时
  • 嵌入的网页可能会被恶意攻击者用于钓鱼或注入恶意代码的攻击，因此需要谨慎使用

浏览器渲染流程

  1. 解析html（parse）,会生成dom树和cssOM树
  2. 样式计算（style）,得到一颗带有样式的DOM树
  3. 布局（layout）,得到布局树
  4. 分层（layer）
  5. 绘制（paint）
  6. 。。

clientWidth、offsetWidth、scrollWidth与getBoundingClientRect

  • clientWidth表示某个元素的可见宽度，clientWidth = content + padding
  • offsetWidth表示某个元素的总宽度，clientWidth = content + padding + border
  • scrollWidth表示某个元素的内容区域的总宽度，只包括内容和内边距
  • rect尺寸表示用户最终看到的尺寸，如果不涉及transform变换的话，rect尺寸和offset相同；如果元素应用了transform变换，rect尺寸是经过变换后的尺寸，即用户最终看到的尺寸

css

<link href="styles.css" type="text/css" />
 
<style type="text/css">
    @import url("styles.css");
</style>
  • 适用范围不同：import可以在网页中使用，也可以在css中使用，但link只能在网页中使用来引入css
  • 加载顺序不同：页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）
  • 使用DOM控制样式时的差别：当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

rgba和opacity的透明效果有什么不同

  • opacity是一个属性。opacity属性的值，可以被其子元素继承，给父级div设置opacity属性，那么所有子元素都会继承这个属性，并且，该元素及其继承该属性的所有子元素的所有内容透明度都会改变。
  • rgba是一个属性值。rgba设置的元素，只对该元素的背景色有改变，并且，该元素的后代不会继承该属性。
  • 补充：rgba只是一个属性值，在background 里用改变背景色，在color里是改字体颜色，shadow里是改阴影色，不止是能够改元素的背景色，要看具体是在哪个属性上用

display:none与visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。

区别：

  • 渲染树：display: none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；visibility: hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
  • 是否可继承：display: none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；visibility: hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility: visible可以让子孙节点显示。
  • 重排重绘：修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘。
  • 文档布局：display：none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

定位布局 position中的relative、absolute、fixed、sticky它们之间的区别

  • static：默认值（静态定位），没有定位，元素出现在正常的文档流中。
  • relative：相对定位，相对于自己本身在正常文档流中的位置进行定位。
  • absolute：生成绝对定位，相对于最近一级定位不为static的父元素进行定位。会脱离标准文档流。
  • fixed：生成固定定位，相对于浏览器窗口进行定位。和父元素没有关系，也会脱离文档流。
  • sticky：生成粘性定位的元素，容器的位置根据正常文档流计算得出。

如何用CSS3画一条0.5px的直线

height: 1px;
transform: scale(0.5);

如何用CSS3画一个三角形

思路：div宽高为0，设置border宽度，一边有颜色，其他为transparent透明。

<style>
.up{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-top: 100px solid red;/*红色*/
}
</style>
 
<body>
    <div class="up"></div>
</body>

CSS3盒子模型：标准盒模型、怪异盒模型

盒子由内容区域content + 内边距padding + 边框border + 外边距margin组成

  • 标准盒模型下，盒子的宽高指的是内容区域content的宽高，那么盒子的大小 = content + padding + border + margin
  • 怪异盒模型下，盒子的宽高指的是内容、边框、内边距总的宽高（content + border + padding），那么怪异盒模型下盒子的大小 = width（content + border + padding）+ margin

可以通过属性 box-sizing 来设置盒子模型的解析模式：

{
    box-sizing: content-box; // 标准盒模型
    box-sizing: border-box; // 怪异盒模型
}

问题1:相邻块元素垂直外边距的合并

解决方案：尽量只给一个盒子添加margin值

问题2:嵌套块元素垂直外边距的塌陷

解决方案：1、给父元素添加边框；2、给父元素添加内边距padding；3、给父元素设置overflow: hidden.

浮动和清除浮动

浮动：元素会脱离标准文档流，移动到指定位置，并且不再保留原先位置。

清除浮动：

  • 清除浮动的本质是清除浮动元素造成的影响：父盒子没高度，子盒子浮动了，就会影响后面盒子的布局，就会有影响。
  • 如果父盒子本身有高度，则不需要清除浮动。
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度之后，就不会影响后面元素的布局。

清除浮动的方法：

  • 额外标签法：官方推荐的做法，在浮动元素末尾添加一个额外的标签，并加上clear: both;的样式。优：通俗易懂，书写方便。劣：添加一个额外的无意义标签。
  • 父级添加overflow：给父级元素添加overflow样式，值为hidden、auto、scroll。优：代码简洁。劣：无法显示溢出的部分。
  • 伪元素法：添加after伪元素。优：代码简洁、不添加额外元素。
.clearfix:after{
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

flex布局

flex布局父级相关的css属性：

  • display: flex，将元素设置为flex布局。
  • flex-direction，设置flex布局的方向，值为row、column、row-reverse、column-reverse。
  • flex-wrap，设置flex布局是否换行，默认值为nowrap不换行，wrap换行。
  • justify-content，设置主轴的对齐方式，值为flex-start、flex-end、center、space-around、space-between、space-evenly。
  • align-items，设置交叉轴的对齐方式，值为flex-start、flex-end、center、stretch。
  • align-content，设置多行下，交叉轴的对齐方式。

flex布局子元素相关的css属性：

  • flex-shrink，设置是否可以缩小，0表示不能缩小。
  • flex-grow，设置是否可以放大，0表示不能放大。
  • flex-basis，设置项目的大小。
  • flex，flex-grow、flex-shrink、flex-basis的简写形式。

transform 属性

  • 水平位移：translate
  • 缩放：scale
  • 翻转：rotate

transition

语法：transition：[属性名] [持续时间] [速度曲线] [延迟时间]

示例：

transition:height 2s ease 0.5s;

盒子居中的几种方法

  • 利用定位（子绝父相）、margin-left、margin-top实现
  • 利用定位（子绝父相）、transform属性实现
  • 利用flex布局实现盒子居中

CSS3选择器及其优先级

选择器：

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

注意：

  • !important的优先级最高。
  • 如果优先级相同，则最后出现的样式生效。
  • 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0
  • 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

结构伪类选择器&伪元素选择器

结构伪类选择器：可方便的选取一个或多个特定的元素

  • :first-child 选取属于其父元素的首个子元素
  • :last-child 选取属于其父元素的最后一个子元素
  • :nth-child(n) 选择第n个子元素，n=even / 2n：选取偶数孩子；n=odd / 2n+1：选取奇数孩子
  • first-of-type
  • last-of-type
  • nth-of-type(n)

伪元素选择器：

  • ::first-letter / line: 文本第一个单词 / 第一行
  • ::selection: 改变选中文本的样式
  • ::before & ::after

属性选择器：

  • div[class=xx]: 选择类名为xx的div
  • div[class^=xx]: 选择以类名为xx开头的div
  • div[class$=xx]: 选择类名是以xx结束的div
  • div[class*=xx]: 选择类名带有xx的div

display的block、inline和inline-block的区别

参考：常见块元素、行内元素、行内块元素，及其特点

定位堆叠顺序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。

如果属性值相同，则按照书写顺序，后来居上。

实现双飞翼（圣杯）布局

  • 利用定位实现两侧固定中间自适应。父盒子设置左右 padding 值，给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处，中间盒子自适应。
  • 利用 flex 布局实现两侧固定中间自适应。父盒子设置 display：flex，左右盒子设置固定宽高，中间盒子flex:1。

实现图片懒加载的原理

图片懒加载的原理很简单，就是我们先设置图片的 data-set 属性（当然也可以是其他任意的，只要不会发送 http 请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所 以不会发送 http 请求。然后我们计算出页面 scrollTop 的高度和浏览器的高度之和，如果 图片距离页面顶端的坐标 Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是 其他情况），这时候我们再将data-set 属性替换为 src 属性即可。

BFC 是什么

定义：BFC (Block formatting context) 直译为 “块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

布局规则：

  • 内部的 Box 会在垂直方向，一个接一个地放置
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
  • Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin会发生重叠
  • 每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往 右的格式化，否则相反)。即使存在浮动也是如此
  • BFC 的区域不会与 float box 重叠
  • 计算 BFC 的高度时，浮动元素也参与计算

哪些元素会生成 BFC：

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

Graph View