标签：flex 面试题 布局 align 元素 content Css CSS
1、盒模型
标准盒模型：总宽度：内容 ( content ) + border + padding + margin
IE盒模型(怪异盒模型)：宽度 = 内容宽度 ( content + border + padding ) + margin
2、弹性盒模型
flex-direction:row //(默认)主轴为水平方向,起点在左端。
flex-direction:row-reverse //主轴为水平方向,起点在右端
flex-direction:column //使用后会使主轴变为y轴
flex-firection:column-reverse //主轴为垂直方向,起点在下沿。复制代码flex-wrap:nowrap //(默认)不换行
flex-wrap:wrap //换行,第一行在上方
flex-wrap:wrap-reverse //换行,第一行在下方flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式。
flex-flow:值1(主轴方向) 值2(是否换行)
flex-flow:row nowrap //(默认)复制代码justify-content:flex-start //(默认)左对齐
justify-content:flex-end //右对齐
justify-content:center //居中(子元素紧凑居中)
justify-content:space-between; //两端对齐,项目之间的间隔都相等
justify-content:space-around; //每个项目两侧的间隔相等复制代码align-items:flex-start //与交叉轴的起点对其
align-items:flex-end //与交叉轴的终点即末尾对其
align-items:center //与交叉轴的中点对其
align-items:baseline //项⽬的第⼀⾏⽂字的基线对齐
align-items:stretch //如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
align-content:flex-start //与交叉轴的起点对齐
align-content:flex-end //与交叉轴的终点对其
align-content:center //与交叉轴的中点对齐
align-content:space-between //与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around //每根轴线两侧的间隔都相等复制代码align-self:center
//允许单个元素与其他元素有不一样的对齐方式
//在弹性子元素上使用。覆盖容器的 align-items 属性。复制代码order属性: (自定义子元素的显示顺序)
//用整数值来定义排列顺序，数值小的排在前面。可以为负值。
//注: 默认值为0。父元素必须设置为弹性盒模型
align-self:flex-start //默认
align-self:flex-end //终点flex-grow属性:(定义弹性盒子元素的扩展比率)
//表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例
//比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3
//那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占
//全部空间的 1/6、1/3 和 1/2复制代码flex-shrink属性:(定义弹性盒子元素的收缩比率)
//该属性的值也是无单位的,表示的是当容器的空间不足各个条目的尺寸缩小的比例。
//例如,在容器中有 3 个条目,其"flex-shrink"属性的值分别为 1，2 和 3。
//每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时,
//比如变成了 540px 之后则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。
//3 个条目分别要缩小 10px、20px 和 30px,
//主轴尺寸分别变为 190px、180px 和 170px3、CSS单位
⑴px：绝对单位。页面按精确像素展示。
⑵em：相对单位，基准点为父节点字体的大小，如果自定义了font-size按自身的来算，整个页面内1em不是一个固定的值。
⑶rem：相对单位，相对于根节点html的font-size的大小来计算。
⑷vw：视窗宽度，1vw等于视窗宽度的1%。
⑸vh：视窗高度：1vh等于视窗高度的1%。
⑹vmin：以宽和高之间最短的一端为基准，如果宽>高，那么1vmin相当于宽的1%；
⑺vmax：以宽和高之间最长的一端为基准，如果宽>高，那么1vmax相当于宽的1%；
⑻%：百分比。
⑼pt：point，大约1/72寸，一寸=3.3333···厘米。
⑽pc：pica，大约6pt，1/6寸。
⑾ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算，IE11以下不支持。
⑿ch：以节点所使用字体中的“0”字符为基准，找不到时为0.5em。IE10以上支持。
4、CSS选择器
!important > 内联样式 > id选择器 > class选择器 > 属性选择器 > 伪类选择器（: hover） > 标签选择器 > 伪元素（: before） > 通配符选择器
可继承的属性：
font-size、font-family、color
不可继承的属性：
border、padding、margin、width、height
权重值：
!important权重值：10000，
内联样式：1000，
id选择器：100
class、伪类、属性、伪元素选择器：10
标签选择器：1
后代选择器的权重为包含的选择符权重值之和。
CSS3新增的伪类：
p：first-of-type：选择属于其父元素的首个元素；
p：last-of-type：选择属于其父元素的最后元素；
p：only-of-type：选择属于其父元素的唯一元素；
p：only-child：选择属于其父元素的唯一子元素；
p：nth-child（1）：选择属于其父元素的第一个子元素；
：enabled：disabled：表单控件d的禁用状态；
：checked：单选框h或复选框被选中；
5、BFC
BFC是块级格式化上下文。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
特性：
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
创建：
① <html>根元素；
② float的值不为none
③ overflow的值为auto、scroll或hidden
④ display的值为:
table-cell：它会作为一个表格单元格显示（类似td和th）。
table-caption：此元素会作为一个表格标题显示。
inline-block：行内块元素。
⑤ position的值为fixed或absolute
用途：
① 闭合浮动；
② 阻止margin重叠
③ 自适应流体布局
6、清除浮动的方法
①给设置了浮动的元素的父级加高。
②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1
③给需要清除浮动的元素设置clear：both；
④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
⑤伪类清除：.clearfix：after{content：""；clear：both；display：block；}
.clearfix{zoom：1}
7、层叠上下文
层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
8、常见页面布局
⑴静态布局：最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
⑵流式布局：流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。
缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。
⑶弹性布局：弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
9、CSS预处理，后处理
CSS预处理器：用一种编程语言，为CSS增加了一些编程的特性，最终编译出css文件。比如sass、less、stylus。
优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高
实现原理：
①取到 DSL 源代码 的 分析树
②将含有 动态生成 相关节点的 分析树 转换为 静态分析树
③将 静态分析树 转换为 CSS 的 静态分析树
④将 CSS 的 静态分析树 转换为 CSS 代码
CSS后处理器：堆css进行处理，并最终生成css的预处理器，属于广义上的css预处理器，最典型的就是css压缩工具(clean-css)，流行的Autoprefixer，以Clean I Use上的浏览器支持数据为基础，自动处理兼容性问题
优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准
缺点：逻辑处理能力有限
实现原理：
①将 源代码 做为 CSS 解析，获得 分析树
②对 CSS 的 分析树 进行 后处理
③将 CSS 的 分析树 转换为 CSS 代码
10、CSS3的新特性
新增一：rgba（简单不做解释）；
新增二：弹性布局flex（上面第二题）；
新增三：媒体查询；
新增四：渐变色；
新增五：动画animation，使用@keyframes定义，使用的元素animation：名字 时间；
作者：煮雨、
链接：https://juejin.cn/post/6844903991449485326
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
标签：flex,面试题,布局,align,元素,content,Css,CSS 来源： https://blog.csdn.net/m0_55316631/article/details/120420687
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。