导读
- 请谈一谈你对flex布局的认识？
- 浮动布局的五大特征
- 创建浮动并排的步骤是什么？
- 浮动会带来哪些负面影响？
- 清除浮动的方法有哪些？
- 向HTML页面引入CSS的方式有几种？
- CSS的三大特性是什么？
- 哪些CSS属性可以继承？
- 如何使用@font-face规则？
- 什么是响应式网页设计？
- 如何实现响应式网页设计？
- 如何设置viewport？
- 设置媒体查询的语法是什么？
- 请谈谈你对响应式网页设计中”向上兼容，向下覆盖“的理解
- 让div水平垂直居中有几种方法？
1. 请谈一谈你对flex布局的认识？
- 是什么：flex布局是C3的一个布局模型。它包含父元素和子元素两套属性。Felx布局是目前移动端的主流布局模型。
- 为什么？flex布局是为多屏幕而设计的。它在应对多屏幕布局方面更加灵活，所有的子元素都是参照主侧轴布局。
- 怎么办？flex 布局是一种一维/单向布局，适合做局部组件布局,不适合做页面框架布局。
2. 浮动布局的五大特征是什么
- 浮：浮动元素会脱离文档流。(浮动元素后面的流动元素会占据浮动元素的原有位置)
- 动：浮动元素会向左或向右无限运动，直到它碰到另一个元素。
- 块：所有的浮动元素都是块元素。（没有行内元素）
- 并排：浮动元素会发生并排现象。
- 混排：文字会环绕浮动图片排列。
3.创建浮动并排的步骤是什么
第一步：确定子元素
第二步：确定父元素
第三步：给子元素添加float属性
第四步：给子元素设置合理宽度
第五步：清除浮动
4. 浮动带来哪些负面影响？
- 高度坍塌: 指子元素浮动之后，父元素失去高度，
- 元素上移: 造成布局发生混乱。(clear属性)
5. 清除浮动的方法有哪些？
第一种：使用空元素(不推荐)
第二种：BFC | haslayout
第三种：使用伪元素
6. 向HTML页面引入CSS的方式有几种？
- 使用link标签引入
- 使用style标签引入
- 使用style属性引入
- 使用@import规则引入
7. CSS的三大特性是什么？
- 继承性：元素的属性值可以传递给后代元素。
- 层叠性：
- 特殊性：
8. 哪些CSS属性可以继承？
可继承的CSS属性
- 字体属性组
- 文本属性组
- 列表属性
不能继承的CSS属性
- 盒模型：宽高内边距外边距边框背景
- 布局模型：浮动、定位、flexbox，gird
9. 如何使用@font-face规则
第一步：确定文件位置：把自定义字体文件复制到项目目录下。或使用绝对地址引用在线字体。（注：@font-face受同源策略保护）
第二步：使用@font-face规则把自定义字体文件添加到本地字体列表
第三步：使用font-family为元素定义自定义字体。
10. 什么是响应式网页设计？
11. 如何实现响应式网页设计？
12. 如何设置viewport？
13. 设置媒体查询的语法是什么？
14. 请谈谈你对响应式网页设计中”向上兼容，向下覆盖“的理解
15. 让div水平垂直居中有几种方法
方法1：使用定位 + translate() | calc()
方法2：弹性盒模型
方法3：外边距自动获取
方法4：网格
附：属性列表
- background-color：
- background-image：
- Background-repeat:
- background-position：
- Background-attachment:
- Background-size：
- Background-clip:
- background-origin：
- background
- flex-direction:
- flex-wrap:
- justify-content:
- align-content:;
- align-items
- gap
- flex-flow
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self（3分）
