1.0钓鱼网站开发--站点说明,无锡做网站公司哪家好,网站下面版权代码,杭州论坛网校招前端面试常见问题【3】——CSS 1、盒模型
Q#xff1a;请简述一下 CSS 盒模型#xff1f;
W3C 模式#xff1a;盒子宽widthpaddingbordermargin 怪异模式#xff1a;盒子宽widthmargin
Q#xff1a;inline、block、inline-block 元素的区别#xff1f;
inline请简述一下 CSS 盒模型
W3C 模式盒子宽widthpaddingbordermargin 怪异模式盒子宽widthmargin
Qinline、block、inline-block 元素的区别
inline行内元素: 使元素变成行内元素拥有行内元素的特性即可以与其他行内元素共享一行不会独占一行。 不能更改元素的 heightwidth 的值大小由内容撑开。 可以使用 padding 上下左右都有效margin 只有 left 和 right 产生边距效果但是 top 和 bottom 就不行。
block块级元素: 使元素变成块级元素独占一行在不设置自己的宽度的情况下块级元素会默认填满父级元素的宽度。 能够改变元素的 heightwidth 的值。 可以设置 paddingmargin 的各个属性值topleftbottomright 都能够产生边距效果。
inline-block融合行内于块级: 结合了 inline 与 block 的一些特点结合了上述 inline 的第 1 个特点和 block 的第 2,3 个特点。 用通俗的话讲就是不独占一行的块级元素。
2、选择器
Q请列举出你用过的 CSS 选择器
普通选择器
选择器例子描述.class.intro选择 class“intro” 的所有元素。#id#firstname选择 id“firstname” 的元素。**选择所有元素elementp选择所有 元素
层次选择器
选择器例子描述element.classp.intro选择 class“intro” 的所有 元素element,elementdiv, p选择所有 元素和所有 元素 element elementdiv p选择 元素内的所有 元素 elementelementdiv p选择父元素是 的所有 元素 elementelementdiv p选择紧跟 元素的首个 元素 element1~element2p ~ ul选择前面有 元素的每个 元素
属性选择器
选择器例子描述[attribute][target]选择带有 target 属性的所有元素。[attributevalue][target_blank]选择带有 target“_blank” 属性的所有元素。
伪类选择器
选择器例子描述:activea:active选择活动链接。::afterp::after在每个 的内容之后插入内容。::beforep::before在每个 的内容之前插入内容。:first-childp:first-child选择属于父元素的第一个子元素的每个 元素。:focusinput:focus选择获得焦点的 input 元素。:fullscreen:fullscreen选择处于全屏模式的元素。:hovera:hover选择鼠标指针位于其上的链接。:linka:link选择所有未访问过的链接。:not(selector):not§选择非 元素的每个元素。:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 元素。:visiteda:visited选择所有已访问的链接。
Q CSS 选择器的权重是什么样的
样式权重!important权重最大内联样式权重 1000类选择器权重 10id 选择器权重 100派生选择器权重 1
3、常见规则
Qposition 的值有哪几种布局方式是什么样的
值描述static元素框正常生成。块级元素生成一个矩形框作为文档流的一部分行内元素则会创建一个或多个行框置于其父元素中。relative相对于其正常位置进行定位元素仍保持其未定位前的形状它原本所占的空间仍保留。absolute元素框从文档流完全删除相对于值不为 static 的第一个父元素进行定位。元素原先在正常文档流中所占的空间会关闭就好像元素原来不存在一样。元素定位后生成一个块级框而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将 position 设置为 absolute不过其包含块是视窗本身。
Q 简单描述下 flex 布局
使用 flex 布局的元素会成为容器flex container它内部的元素自动成为 flex 项目flex item。 容器拥有两根隐形的轴水平的主轴main axis和竖直的交叉轴。 此外需注意使用 flex 容器内元素即 flex item 的 floatclear、vertical-align 属性将失效。
flex 的各种属性
1、flex-direction
属性决定主轴的方向即项目的排列方向。row默认值主轴为水平方向起点在左端。
row-reverse主轴为水平方向起点在右端。
column主轴为垂直方向起点在上沿。
column-reverse主轴为垂直方向起点在下沿。2、flex-wrap
默认情况下项目都排在”轴线”上。本属性定义如果一条轴线排不下如何换行。nowrap默认值不换行。
wrap换行第一行在上方。
wrap-reverse换行第一行在下方。3、align-items
定义弹性盒子在交叉轴上如何对齐。flex-start交叉轴的起点对齐。
flex-end交叉轴的终点对齐。
center交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch默认值如果项目未设置高度或设为 auto将占满整个容器的高度。 4、justify-content
定义弹性盒子在主轴方向上的对齐方式。flex-start容器开头对齐。
flex-end容器终点对齐。
center容器中点对齐。
4、常见概念
QFC 是什么BFC 和 IFC 是什么
FC格式化模型。
FC 会根据 CSS 盒子模型将文档中的元素转换为一个个的盒子每个盒子的布局由以下因素决定 1、盒子的尺寸精确指定、由约束条件指定或没有指定 2、盒子的类型行内盒子inline、行内级盒子inline-level、原子行内级盒子atomic inline-level、块盒子block 3、定位方案普通流定位、浮动定位或绝对定位 4、文档树中的其它元素即当前盒子的子元素或兄弟元素 5、视窗尺寸与位置 6、包含的图片的尺寸 7、其他的某些外部因素
BFC块级格式化上下文。
1、在 BFC 中盒子从顶端开始垂直地一个接一个地排列两个盒子之间的垂直的间隙是由它们的 margin 值所决定的。在一个 BFC 中两个相邻的块级盒子的垂直外边距会产生折叠。 2、在 BFC 中每一个盒子的左外边缘会触碰到容器的左边缘。 3、浮动元素、绝对定位元素以及设置了 overflow 属性除了 visible的元素不是块级盒子的块容器因此会为他们的内容创建新的 BFC。
IFC行内级格式化上下文。
1、在 IFC 中盒子一个接着一个地水平放置。这些盒子会通过不同的方式进行对齐如底部对齐顶部对齐文字基线对齐。 2、矩形区域包含着来自一行的盒子叫做盒行盒line box。 3、line box 的宽度由浮动情况和它的包含块决定。line box 的高度由 line-height 计算决定也就是说由其内部的块撑开。
Q如何清除浮动
浮动可以理解为让某个 div 元素脱离标准流漂浮在标准流之上。 一个浮动元素会尽量向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。
清除浮动可以理解为打破横向排列。清除浮动的关键字是 clear其取值有以下几种 1、none默认值。允许两边都可以有浮动对象 2、left不允许左边有浮动对象 3、right不允许右边有浮动对象 4、both不允许有浮动对象 对于 CSS 的清除浮动(clear)一定要牢记这个规则只能影响使用清除的元素本身不能影响其他元素。
Q什么是回流什么是重绘
当页面中的一部分(或全部)因为元素的规模尺寸布局隐藏等改变而需要重新绘制这就称为回流。每个页面至少需要一次回流就是在页面第一次加载的时候。
当页面中的一些元素需要更新属性而这些属性只是影响元素的外观风格而不会影响布局的比如 background-color。则就叫称为重绘。
任何对页面中元素的操作都会引起回流或者重绘比如
1、添加、删除元素(回流重绘) 2、隐藏元素display:none(回流重绘)visibility:hidden(只重绘不回流) 3、移动元素比如改变 top,left(重绘回流)。 4、对 style 的操作(对不同的属性操作影响不一样)。 5、还有一种是用户的操作比如改变浏览器大小改变浏览器的字体大小等(回流重绘)
Q如何开启 GPU 加速其优缺点是什么
当页面中某个 DOM 元素应用了某些 CSS 规则时就会开启 GPU 加速如 3D 变换
.cube {-webkit-transform: translate3d(250px, 250px, 250px) rotate3d(250px, 250px, 250px, -120deg) scale3d(0.5, 0.5, 0.5);
}如果不想对元素用 3D 变换但是还想要开 GPU 加速就可以
.cube {-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);
}但是一定要注意不要随意使用 GPU 加速如果的确能够显著提高性能可以尝试使用 GPU 加速。但是另一方面使用 GPU 可能会导致严重的性能问题因为它增加了内存的使用而且它会减少移动端设备的电池寿命。
