HTML5 & CSS3的相关知识点

sunshine_
187 阅读14分钟

css 的盒子模型

css的盒子模型有两种,一种是W3C标准的标准盒子模型,一种是IE标准的怪异盒子模型

标准盒子模型由:margin padding border width 组成,其宽度为内容的宽度

怪异盒子模型同样也是由:margin padding border width 组成,但是它的宽度为 padding+border+width

在实际开发中我们不想盒子被撑大,可以给其设置 box-sizing = border-box

参考文章：深入理解盒模型

浮动带来的影响及如何清除浮动

浮动的出现是为了让块级元素在一行显示且无缝隙.

浮动会使元素脱离标准流,使元素浮在标准流之上,不占位置,使父元素的高度无法撑开,从而影响布局.

清除浮动常用的方法有 5 种:

(1)给父元素设置高度

(2)overflow:hidden;

(3)额外标签法: 在父元素的最后面添加一个块级标签,并使用 clear:both;

(4)单伪元素法

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
/*兼容ie6 ie7*/
.clearfix {
    *zoom: 1
}

(5)双伪元素法

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}
.clearfix::after {
    clear: both;
}
/*兼容ie6 ie7*/
.clearfix {
    *zoom: 1
}

常见的布局方法有哪些？他们的优缺点是什么？

页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局

浮动：

  • 优点：兼容性好。
  • 缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。

绝对定位

  • 优点：快捷。
  • 缺点：导致子元素也脱离了标准文档流，可实用性差。

flex 布局（CSS3中出现的）

  • 优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。

网格布局（grid）

  • CSS3中引入的布局，很好用。代码量简化了很多。

利用网格布局实现的一个左右300px中间自适应的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }
        /* 重要：设置容器为网格布局，宽度为100% */
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;  /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
        }
        .layout.grid .left {
            background: red;
        }
        .layout.grid .center {
            background: green;
        }
        .layout.grid .right {
            background: blue;
        }
    </style>
</head>
<body>
    <section class="layout grid">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>网格布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>
        </article>
    </section>
</body>
</html>

栅格系统布局

优点：可以适用于多端设备

flex布局

flex布局极大的提高了我们布局的效率,更简单、灵活.

在flex布局中,没有块级元素,行内元素,行内块元素之分,任何元素都可以直接设置宽高和在一行显示.

同时,flex布局中也不存在脱标的情况,这样一来可以很好的迭代掉 float 不用去考虑脱标和清除浮动的问题.

当然flex也存在一些兼容性问题,再不考率问题的时候可以优先考虑 flex 布局.

在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。

flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

你能联想到的flex语法有哪些呢?

flex-direction: 调整主轴方向

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justify-content主要用来设置主轴方向的对齐方式

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

align-items用于调整侧轴的对齐方式

flex-start： 元素在侧轴的起始位置对齐。 
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

flex-wrap属性控制flex容器是单行或者多行,默认不换行

nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。

align-content用来设置多行的flex容器的排列方式

flex-start： 各行向侧轴的起始位置堆叠。 
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。 
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 
stretch：拉伸，不设置高度的情况下。

可参考 flex布局教程

元素居中有哪些方式

使元素居中常见的方法有 5 种:

(1)父盒子与子盒子的距离: 这种方法比较直接但是复用性不强

(2)利用 margin:auto; 对于块级元素这种方法时适用的,但是行内元素不适用

(3)利用定位: 可以说是万金油的办法

(4)利用 transform 位移: 结合子绝父相定位,给子元素设置 top: 50%; left: 50%; transform: translate(-50%, -50%); transform和 margin的最大区别是 transform 平移的时候对其他的元素没有影响;而 margin 会把其他元素挤走

(5)flex布局: 父元素设置 display:flex; justify-content: center; align-items: center; CSS3之后如果没有兼容性问题,首先推荐的就是 flex 布局

在 CSS 中有哪些定位方式？

也就是 position 样式的几个属性。

static 正常文档流定位

  • 此时设置 top、right、bottom、left 以及 z-index 都无效
  • 块级元素遵循从上往下纵向排列，行级元素遵循从左到右排列

relative 相对定位

这个 “相对” 是指相对于正常文档流的位置。

absolute 绝对定位

当前元素相对于 最近的非 static 定位的祖先元素 来确定自己的偏移位置。

例如，当前为 absolute 的元素的父元素、祖父元素都为 relative，则当前元素会相对于父元素进行偏移定位。

fixed 固定定位

当前元素相对于屏幕视口 viewport 来确定自己的位置。并且当屏幕滚动时，当前元素的位置也不会发生改变。

sticky 粘性定位

这个定位方式有点像 relative 和 fixed 的结合。当它的父元素在视口区域、并进入 top 值给定的范围内时，当前元素就以 fixed 的方式进行定位，否则就以 relative 的方式进行定位。

列举一些常用的C3 选择器

常用的CSS3的有 6 类

(1)基本选择器: 通配符*, 标签选择器, 类选择器, id选择器

(2)层次选择器(也叫关系选择器): 后代选择器, 子代选择器, 交集选择器, 并集选择器, 伪类选择器

(3)动态伪类选择器:

E:link 超链接没有被访问过时的状态

E:visited 超链接访问过后的状态

E:hover 鼠标滑过(鼠标悬停在E上)时的状态

E:active 鼠标按下(E元素被激活)时的状态

E:focus 光标聚焦时触发的状态

(4)结构性伪类选择器: :first-child, last-child, :nth-child(n), :nth-last-child(n),

:empty 匹配内容为空的元素(空格，回车换行符都不能有)

:root 匹配根元素html

(5)UI状态伪类选择器: checked, disabled, enabled

(6)目标伪类选择器: target

如何设计 C3 动画

CSS3动画可以不用鼠标触发,自动,反复的执行某些动画.

需要先定义动画然后再调用它.

定义动画的语法是: @keyframes 动画名称{from{}to{}}

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

其中,动画名称和动画时长必须赋.

如何定义使用 css 变量

css中定义变量

定义变量可分多种情况： 1、定义全局变量 :root { --borderColor: #ccc; } 使用：width:var(--borderColor);

2、定义某元素下的变量 .look{ --borderColor: #ccc; }

3、定义媒体查询下的变量 @media screen and (min-width: 1025px) { :root { --borderColor: #ccc; 　　 } } 使用： .has-border-table > tr > td { border-right: 1px solid var(--borderColor); }

less中定义变量 定义： @bg-color : #d9d9d9; 使用： .has-border-table > tr > td { border-right: 1px solid var(@bg-color); }

sass中定义变量 定义： bg-color : #d9d9d9; 使用： .has-border-table > tr > td { border-right: 1px solid var(bg-color); }

如何左侧固定 200px 右侧自适应布局

我们可以使用 flex 布局实现目标,首先给父盒子设置 display:flex; 再给左侧的盒子固定宽度 200px, 右侧的盒子设置自适应 flex:1

如何调试 css 代码

Google 工具调试

如何在 less 中定义和使用函数

在 less 中定义的语法是: @变量名:值; 使用变量的语法是: CSS属性:@变量名;

哪些 css 属性不会继承,哪些会被继承

CSS能继承的属性有 5 类:

(1)字体系列属性: font、font-weight、font-size、font-style、font-family

(2)文本系列属性: 2.1）内联元素：color、line-height、word-spacing、letter-spacing、 text-transform（转换不同元素中的文本）;2.2）块级元素：text-indent（文本块中首行文本的缩进）、text-align

(3)元素可见性: visibility

(4)表格布局属性:caption-side（设置表格标题的位置）、border-collapse（设置表格的边框是否被合并为一个单一的边框）、border-spacing（设置相邻单元格的边框间的距离，仅用于"边框分离"模式）、empty-cells（设置是否显示表格中的空单元格,仅用于"分离边框"模式）、 table-layout（设置表格布局算法）

(5)列表布局属性: list-style

继承的特殊情节: a的颜色 h系列的字体大小不能被继承,因为浏览器给了默认的样式,但是会被浏览器默认的样式覆盖.

不能继承的属性也有 5 类:

(1)display：规定元素应该生成的框的类型

(2)文本属性：vertical-align、text-decoration

(3)盒子模型的属性：width、height、margin 、border、padding

(4)背景属性：background、background-color、background-image

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

哪些 css 属性会有浏览器兼容性问题

CSS3属性针对不同浏览器内核兼容写法:

-webkit- 针对webkit内核

-moz- 针对火狐内核

-ms- 针对IE内核

-o- 针对opera内核

BFC是什么？

BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题。

BFC是值浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

参考文章：深入理解BFC

HTML 文件中的 DOCTYPE 是什么作用？

HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准

DOCTYPE 即 Document Type，网页文件的文档类型标准。

主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。

DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如：

<!DOCTYPE html>
<html>
  ...
</html> (目前主流)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  ...
</html> (早期)

HTML、XML、XHTML 之间有什么区别？

它们都属于标记语言。

语言中文名说明
HTML4超文本标记语言主要用于做界面呈现。HTML 是先有实现，后面才慢慢制定标准的，导致HTML⾮常混乱和松散，语法非常的不严谨。
XML可扩展标记语言主要⽤于存储数据和结构。语法严谨，可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效， XML 的市场变得越来越⼩。
XHTML可扩展超文本标记语言属于加强版 HTML，为解决 HTML 的混乱问题而生，在语法方面变得和 XML 一样严格。另外，XHTML 的出现也催生了 HTML 5，让HTML向规范化严谨化过渡。
HTML5超文本标记语言在HTML的基础上进行拓展，用于页面呈现 (目前标准)

XML的要求会比较严格:

  1. 有且只能有一个根元素

  2. 大小写敏感

  3. 正确嵌套

  4. 必须双引号

  5. 必须闭合标签

    ...

<?xml version="1.0" encoding="utf-8"?>
<root>
  <father id='box'>
    <child>小张</child>
    <child>小王</child>
  </father>
</root>

XHTML 和 HTML5 的历史延展: www.cnblogs.com/my-freedom/…

番外: 所以 HTML5 是HTML的新一代标准, 所谓的 H5 工程师这一词, 其实是国产词, 泛指新一代的web开发工程师,

具体H5工程师, 做什么工作方向, 还是要看需求 (比如: 移动端开发, PC端网页开发, H5小游戏开发....)

前缀为 data- 开头的元素属性是什么？

这是一种为 HTML 元素添加额外数据信息的方式，被称为 自定义属性。

我们可以直接在元素标签上声明这样的数据属性：

<div id="mydiv" data-message="Hello,world" data-num="123"></div>

也可以使用 JavaScript 来操作元素的数据属性：

let mydiv = document.getElementById('mydiv')
​
// 读取
console.log(mydiv.dataset.message)-
​
// 写入
mydiv.dataset.foo = "bar!!!"

注意：在各种现代前端框架出现后，这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知道即可。

例如: vue实现删除功能时需要 id, 可以直接传值

<tr v-for="item in list" :key="item.id">
  <td>张三</td>
  <td>18</td>
  <td>体育好</td>
  <td>
    <button @click="del(item.id)">删除</button>
    <button>编辑</button>
  </td>
</tr>

谈谈你对 HTML 语义化的理解？

考察核心点: 语义化的好处 (利于SEO, 可阅读性更好)

语义化之前：

在提倡语义化之前，你可能会使用各种各样的标签去实现同样的功能，比如：

  • 使用 span、div、p、a 等做文字, 做按钮
  • 使用 div 做一切

从功能方面来说，这确实是不存在什么问题的，完全可以达到功能效果。但这不符合直觉，非常不友好：

  • 对人不友好：阅读代码的人不能一眼看出代码的功能
  • 对机器不友好：解析代码的程序不能很好的对这些元素进行分类处理

语义化之后：

为了解决上面说的问题，HTML5 规范提倡语义化标签，即使⽤恰当语义的 HTML 标签让⻚⾯具有良好的结构与含义，⽐如：

  • <p> 标签就代表段落
  • <article> 代表正⽂内容
  • <button>代表按钮
  • <header> 代表头部
  • 等等...

语义化的好处：

对开发者的好处对机器/程序的好处
使⽤了语义化标签的程序，可读性明显增强，开发者可以比容易和清晰地看出⽹⻚的结构；这也更利于整个开发团队的协作开发和后续维护工作带有语义的网页代码在⽂字类应用上的表现⼒丰富，利于搜索引擎爬⾍程序来爬取和提取出有效的信息；语义化标签还⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录等，方便特殊人群无障碍的使用这些网页程序。

语义化的适用性：

语义化适合内容型的网站来使用（如简书、知乎），对其⽹站内容的传播有很⼤帮助。

HTML5 对比 HTML4 有哪些不同之处？

考察点: 是否了解 html5 新增的一些新特性

不同点备注说明
只有一种 DOCTYPE ⽂件类型声明(统一标准)<!DOCTYPE html>
增加了一些新的标签元素(功能, 语义化)section, video, progress, nav, meter, time, aside,
canvas, command, datalist, details, embed, figcaption,
figure, footer, header, hgroup...
input 支持了几个新的类型值date, email, url 等等
新增了一些标签属性charset（⽤于 meta 标签）；async（⽤于 script 标签）
新增的全域属性contenteditable, draggable...
hidden...
新增API本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信WebSocket...

获取地理定位: navigator.geolocation.getCurrentPosition(successCallback, errorCallback) (为了安全, 需要在 https 网站使用)

记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API...

meta 标签有哪些常用用法？

<meta> 标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。

  • 如果设置 name 属性，则它描述的是网页文档的信息（例如：作者、⽇期和时间、⽹⻚描述、 关键词）
  • 如果设置 http-equiv 属性，则它描述的相当于是 HTTP 响应头信息（例如：网页内容信息, 网页缓存等）

一些常用的功能及写法：

  1. 设置网页关键词 (SEO)
<meta name="keywords" content="电商,好货,便宜">
  1. 设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  1. 设置 http 响应头：Content-Type 网页内容类型 (字符集)
<meta http-equiv="content-type" content="text/html;charset=utf-8">
​
<!-- 设置字符集可简写为 -->
<meta charset="utf-8">
avatar
文章
阅读
粉丝