前言

接着来讲，今天谈一谈 HTML + CSS，持续更新中。。。

问题解析

一、Flex 布局有哪些属性？分别代表什么意思？

指定容器为 flex 布局

.box {
  display: flex;
}

容器的属性有以下 6 个

flex-direction：决定主轴的方向（即项目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap：（flex-wrap属性定义，如果一条轴线排不下，如何换行）

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow：（flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap）

flex-flow: <flex-direction> || <flex-wrap>;

justify-content：（justify-content属性定义了项目在主轴上的对齐方式（水平））

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items：（align-items属性定义项目在交叉轴上如何对齐（垂直））

align-items: flex-start | flex-end | center | baseline | stretch;

align-content：（align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

二、 CSS3 相比于 CSS2 多了哪些属性？

下面只列入部分常见以及常用属性：

布局（flex 弹性布局、Grid 网格布局）
背景（background 、background-image 、background-repeat 、background-origin 、background-clip等）
边框（border-image、border-radius 等）
颜色（可以用 RGBA、HSL 两种颜色指定方法，也可也使用渐变指定）
渐变（渐变 linear-gradient、径向渐变 radial-gradient）
过渡（transition）
形变、变换（transform）
动画（animation）
媒体查询（@media、@import，这个属性是响应式设计的关键部分）
文字（个性化字体 @font-face、文字装饰 text-stroke-color 、文字溢出 text-overflow）详情请见

三、什么是 BFC

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局，而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间。

详情请见：块格式化上下文

四、布局设计：顶部固定，下方滚动页面

设计方法有很多种

flex 弹性布局

注意： css 写法采用的是内联样式，当 main 中内容超过页面高度时候会展示滚动条进行页面滚动。

<body
  style="display: flex;
    flex-direction: column;
    height: 100vh;"
>
  <header
    style="
        min-height: 100px;
        width: 100%;
        border: 1px solid black;
    "
  ></header>
  <main
    style="
        flex: 1;
        overflow-y: scroll;"
  >
    <div>内容区域</div>
  </main>
</body>

五、请说明 Html 布局元素的分类有哪些？描述每种布局元素的应用场景

内联元素：display:inline

span、a、b、strong、i、em、br、input、textarea

和其他内容从左到右在一行显示，不能只能控制宽高，宽高由内容本身大小决定（文字、图片）
块状元素：display:block

div、h1-h6、hr、menu、ui、li、dl、table、p、from

独占一行，每一个块级元素都会从新的一行重新开始，从上到下布局，可以直接控制 css 属性（宽高、padding、margin）不设置宽高的情况下，高度为本身内容的高度，宽度为父级内容的宽度。
内联块状元素：display:inline-block

上面两种的结合，不能自动换行，但是能够识别 width 、height、line-height、padding、margin

应用场景：

内联元素：用于不指定宽高，宽高由内容指定
块级元素：用于指定宽高，标签独占一行
内联块级元素：用于指定元素宽高，不占满一行

六、说一下减少 Dom 数量的办法？一次加载大量 Dom 怎么优化

减少 DOM 数量的方法

使用伪元素，阴影实现的内容尽量不使用 DOM 实现，如清除浮动、样式实现。
按需加载，减少不必要渲染
使用合理的结构，语义化标签

一次性加载大量 DOM 优化

虚拟 DOM ，直接操作 JS 对象开销更少且高效
缓存 DOM 对象，将一些不需要循环遍历的 DOM 节点先缓存，在循环中直接引用
如果 DOM 只是换了个位置，不需要删除后在另一个位置重建，可以直接将整个 DOM 换个位置即可（这个地方需要算法遍历优化）

七、Html5 有哪些新特性？如何处理新标签的浏览器兼容问题？如何区分 Html 和 Html5？

Html5 新特性

拖拽释放API（Drag and drop）
更好的语义化内容标签（header、nav、footer、aside、article、section）
音频、视频 API （audio、video）
画布（Canvas）API
地理（Geolocation）API
本地存储 localstorage、会话存储 sessionstorage
表单控件，calendar、date、time、email、url、search
新技术 webworker，websocket

如何处理新标签浏览器兼容性

做好错误处理，如果显示不了且一定需要该功能，是否可以用其他内容填充。
引入已经支持这些标签的封装好的库（html5shiv.js）

如何区别 Html 和 Html5

查看文档头部doctype。旧版本会声明为xhtml1-transitional.dtd
结构语义化，旧版本一般使用<div id="header"></div>，使用 classname 来命名，新版本使用结构化语言标签。

八、a 标签默认事件禁用后做了什么才能实现跳转

简单来说，找到该控件，添加点击 click 监听事件，使用 location.href 进行跳转。

let domArr = document.getElementsByTagName("a")
[...domArr].forEach(item=>{
    item.addEventListener('click',function(){
        location.href=this.href
    })
})

前端灵魂之问二：HTML / CSS

前言