01面试题-HTML/CSS

lamb12mn
121 阅读14分钟

HTML

src和href的区别

  1. 请求的资源不同
    • href表示超文本引用，用来建立当前元素和文档之间的链接，用于超链接，常用的有link,a
    • src(source)指向外部资源的位置，会将指向的资源下载并应用到文档中，常用的有script,img,iframe;
  2. 作用结果不同
    • href用于在当前文档和引用资源之间确立联系
    • src用于替换当前内容
  3. 浏览器解析方式不同
    1. 在文档中添加href，浏览器会识别该文档为css文件，就会并行下载不会停止对当前文档的处理。
    2. 当浏览器解析到src，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕，类似于将指向资源应用于当前内容---js放底部不放头部原因

link和@import的区别

都是外部引用CSS的方式；

  1. link是XHTML标签，除了能够加载CSS，还能定义其他事务；@import只能加载CSS
  2. link引用CSS时，在页面载入同时加载，@import需要页面安全载入之后再加载
  3. link无兼容问题，@import低版本的浏览器不支持
  4. link支持JavaScript控制DOM改变样式；而@import不支持

Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

  1. doctype的作用

    声明位于文档中的最前面，处于<html> 标签之前。告知浏览器以何种模式来渲染文档。

  2. 严格模式和混杂模式的如何区分？

    严格模式：又称标准模式，是指浏览器按照W3C标准解析代码，呈现页面

    混杂模式：又称怪异模式或者兼容模式，是指浏览器用自己的方式解析代码，即使用一种比较宽松的向后兼容的方式来显示页面

  3. 意义

    DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

"use strict”

什么是"use strict"?

ES5中添加了第二种运行模式：“严格模式”(strict mode)。这种模式使得JavaScript在更加严格的条件下运行(目的)，以"use strict"为标志。它是一个字面量表达式，严格模式下不能使用未声明的变量

为什么要用"use strict"?

  1. 消除JavaScript语法的一些不合理、不严谨之处，减少一些怪异行为
  2. 消除代码运行的一些不安全之处，保证代码运行的安全
  3. 提高编译器效率，增加运行速率
  4. 为未来版本的JavaScript做好铺垫

"use strict"的限制

  1. 不允许使用未声明的变量,转义字符,

  2. 不允许删除变量或对象,函数(delete x;);不允许删除一个不允许删除的属性(delete Object.prototype; // 报错)

  3. 不允许变量声明

  4. 不允许对"只读属性""getter方法读取的属性"赋值

    • "use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;            // 报错

var obj = {get x() {return 0} };
obj.x = 3.14;            // 报错

  5. 禁止this关键字指向全局对象

iframe标签

是什么？

​ iframe用于在页面内显示页面，使用<iframe>会创建包含另外一个文档的内联框架(即行内框架)

iframe属性

width;height;name;frameborder;scrolling;src;srcdoc(用来替换html、body里的内容);sandbox(对其进行内容限制)

获取iframe中的内容

  1. 获取iframe
  2. 获取iframe的window对象，通过iframe.contentWindow或者window.frames['name']
  3. 获取iframe的document对象，通过iframe.contentDocument获取iframe的document对象

局限

  1. 创建比一般的DOM元素慢了1-2个数量级
  2. 阻塞页面加载
  3. 唯一的连接池
  4. 不利于SEO

窗口尺寸

  1. $(window).height()：浏览器当前窗口可视区域高度
  2. $(document).height()：浏览器当前窗口文档的高度
  3. $(document.body).height()：浏览器当前窗口文档body的高度
  4. $(document.body).outerHeight(true)：浏览器当前窗口文档body的总高度 包括border padding margin
  5. $(window).width()：浏览器当前窗口可视区域宽度
  6. $(document).width()：浏览器当前窗口文档对象宽度
  7. $(document.body).width()：浏览器当前窗口文档body的高度
  8. $(document.body).outerWidth(true)：浏览器当前窗口文档body的总宽度 包括border padding margin

不支持冒泡

①focus

②blur

③mouseenter

④mouseleave

⑤load

⑥unload

⑦resize

iframe的优点和缺点 ？

iframe的缺点：

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

iframe的优点：

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

总而言之：

  • 运维性网站或继承性开发的网站，可以使用iframe;
  • 销售内，官网、展示性网站等建议不使用iframe;
  • 标准的网页设计是不使用iframe的。

CSS

display、float、position的关系

  1. 若display为none，则position和float都不起作用
  2. 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none
  3. 否则，如果float不是none，框是浮动的，调整display
  4. 否则，如果元素是根元素，调整display
  5. 其他情况display为指定值
  6. 绝对定位、浮动、根元素都需要调整display

Flex布局，以及常用的属性？

父级容器属性

  1. flex-direction：column / row / column-reverse / row-reverse;

  2. justify-content：flex-start / flex-end / center / space-around / space-between/stretch;

  3. align-items：flex-start / flex-end / center / baseline / strech;

  4. align-content：flex-start / flex-end / center / space-around / space-between/stretch;

  5. flex-wrap：nowrap / wrap

    让第二个元素的宽度为其他元素的三倍：
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

子级容器属性

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

水平垂直居中

  1. 水平居中
    • 行内元素：text-align:center;
    • 块级元素:margin：0 auto;(作用：使盒子自己居中)
    • 使用定位属性：
      • 父级元素相对定位，子级元素绝对定位，设置子元素的left:50%，子元素左上角水平居中
      • 定宽度：设绝对子元素margin-left:-元素宽度的一半px;或者设置transform：translateX(-50%);
      • 不定宽度：利用css3新增属性transform: translateX(-50%);
      • flexbox布局：父元素添加属性 display: flex; justify-content: center;
  2. 垂直居中
    • 单行元素：元素高=行高；
    • 多行行内元素：给父级设置display:table-cell;vertical-align:middle
    • 块级元素
      • 使用定位：父元素相对定位，子元素绝对定位，设置子元素的top:50%
        • 定高度：设置绝对子元素的margin-top:-元素高度的一半px;或者设置transform:translateY(-50%);
        • 不定高度：利用css3新增属性transform:translateY(-50%);
        • flexbox布局：给待处理的块状元素的父元素添加属性display: flex; align-items: center;
  3. 水平垂直居中
    • 已知宽高：设置子元素为相对定位，给子元素设置绝对定位，top:0;right:0;bottom:0;left:0;margin:auto;
    • 设置子元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: -元素宽度的一半px; margin-top: -元素高度的一半px;
    • 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
    • 设置父元素为flex定位，justify-content: center; align-items: center;

为什么要初始化CSS样式?

  1. 不同浏览器对有些标签的默认值是不同的，如果不对css初始化，页面显示差异
  2. 提高编码质量，不初始化，重复代码很多
  3. 初始化样式会对SEO有一定影响

标准的CSS的盒⼦模型与低版本IE的盒⼦模型有什么不同的

什么是盒子模型？

把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。

W3C标准盒子模型：height指的是真实的内容区域高度，padding和border不被包含在定义的width和height之内

IE盒子模型：height指的是内容、边框、内边距总的高度。padding和border被包含在定义的width和height之内

切换盒模型可以通过box-sizing属性：

标准盒模型：content-box

怪异盒模型：border-box

规定应从父元素继承 box-sizing 属性的值：box-sizing:inherit;

CSS优先级算法如何计算？

同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。 !important > id > class > tag important 比 内联优先级高

举个例子：

#nav-global > ul > li > a.nav-link

算法：

  • 如果存在内联样式，那么 A = 1, 否则 A = 0
  • B的值等于 ID选择器出现的次数
  • C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
  • D 的值等于 标签选择器 和 伪元素 出现的总次数

套用算法，依次求出 A B C D 的值：

  • 因为没有内联样式 ，所以 A = 0
  • ID选择器总共出现了1次， B = 1
  • 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1
  • 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

知道了优先级是如何计算之后，就来看看比较规则：

  • 从左往右依次进行比较 ，较大者优先级更高
  • 如果相等，则继续往右移动一位进行比较
  • 如果4位全部相等，则后面的会覆盖前面的

经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

CSS选择器有哪些？

  1. id选择器（#box），选择id为box的元素

  2. 类选择器（.one），选择类名为one的所有元素

  3. 标签选择器（div），选择标签为div的所有元素

  4. 后代选择器（#box div），选择id为box元素内部所有的div元素

  5. 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素

  6. 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素

  7. 群组选择器（div,p），选择div、p的所有元素

  8. 伪类选择器

    :link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

  9. 伪元素选择器

    :first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

  10. 属性选择器

    [attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

CSS3新增的选择器有如下：

  1. 层次选择器：(p-ul):选择前面有p元素的每个ul元素

  2. 伪类选择器

    :first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素

  3. 属性选择器

    [attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

CSS的继承属性有哪些?

继承属性

1. 字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
2. 文本系列属性
text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

无继承的属性

  • display
  • 文本属性：vertical-align、text-decoration
  • 盒子模型的属性：宽度、高度、内外边距、边框等
  • 背景属性：背景图片、颜色、位置等
  • 定位属性：浮动、清除浮动、定位position等
  • 生成内容属性：content、counter-reset、counter-increment
  • 轮廓样式属性：outline-style、outline-width、outline-color、outline
  • 页面样式属性：size、page-break-before、page-break-after

列出你所知道可以改变⻚⾯布局的属性

position 、 display 、 float 、 width 、 height 、 margin 、 padding 、 top 、 left 、 right

重绘和回流（重排）是什么，如何避免？

  1. 重绘

    • 是指一个元素外观的改变触发的浏览器行为
    • 触发重绘的条件：改变元素外观属性，例如color、background-color等

  2. 重排

    1. 是指渲染树中的部分或全部元素的尺寸、结构、显示隐藏等发生改变
    2. 触发重排条件：添加或者删除可见的DOM元素；元素位置、尺寸、内容改变；浏览器页面初始化；浏览器窗尺寸改变，重排一定重绘，重绘不一定重排

  3. 如何避免？

    1. 尽可能在DOM树的最末端改变class
    2. 避免设置多层内联样式
    3. 动画效果应用到position属性为absolute或fixed的元素上
    4. 避免使用table布局
    5. 避免频繁操作DOM
    6. 先隐藏元素，进行修改后再显示该元素

为啥颜色不是按照class的顺序来

  • class的优先级与在元素中的指定顺序无关，
  • 和class的定义顺序有关，最后定义的优先级最高。

BFC

BFC是什么？

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

Box：css布局的基本单位

Formatting context 一个决定如何渲染文档的容器

BFC的布局规则

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

如何从创建一个BFC？

  1. float的值不是none
  2. position的值不是static或者relative
  3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  4. overflow的值不是visible

BFC有什么作用？

  1. 利用BFC**避免margin重叠(**属于同一个BFC的两个相邻的Box会发生margin重叠)
  2. 自适应两栏布局(BFC的区域不会与float box重叠)
  3. 清除浮动(避免高度塌陷(父类不设高度，子类浮动)，给父类激活BFC)
avatar
文章
阅读
粉丝