摘要:是页面渲染的一部分。一个就是一个整体,所有子元素都会在里面渲染,而不会影响外面的元素。常见为,根元素,,元素,或者设置了的元素列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。是一个把众多小图片打包成一个大图以减少请求。
CSS 中类 (classes) 和 ID 的区别。
id唯一,class可以多个
请问 "resetting" 和 "normalizing" CSS 之间的区别?你会如何选择,为什么?restting: 移除网页的所有默认样式
normalizing: 修复跨浏览器的一致性,解决不同浏览器的显示问题。
float包括right,left,none;设置该属性,这个元素会脱离文档流直到遇到包裹他的容器或者其他浮动元素
描述z-index和叠加上下文是如何形成的。z-index会设置元素在Z轴的位置,按照从高到底堆叠
请描述 BFC(Block Formatting Context) 及其如何工作。bfc是页面渲染的一部分。一个bfc就是一个整体,所有子元素都会在bfc里面渲染,而不会影响外面的元素。常见bfc为,根元素,float,postion元素,或者设置了overflow的元素
列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。clear:both;
设置bfc
overflow: hidden;
height: auto;
css sprites是一个把众多小图片打包成一个大图以减少http请求。
background: url(...) x-axis y-axis;
用过使用媒体查询截图特定分辨率的样式问题
media screen (width:){
}
你熟悉 SVG 样式的书写吗? 如何优化网页的打印样式? 在书写高效 CSS 时会有哪些问题需要考虑?优先使用类选择器和ID选择器
避免使用其他选择规则,如tag
避免使用后代选择器
可以方便的实现变量,运算,继承等高级特性
需要编译 不能直接使用
scss
如果设计中使用了非标准的字体,你该如何去实现?使用@font-face,和@import
请解释浏览器是如何判断元素是否匹配某个 CSS 选择器?从右到左读取,先判断子类,后判断父类
请描述伪元素 (pseudo-elements) 及其用途。在不影响原有html的情况下,加入新的样式
请解释你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。margin border padding content
box-sizing: border-box; width包括border padding
box-sizing: content-box; width只包括内容
请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处?所有元素,不包括伪元素的合模型为border-box
请罗列出你所知道的 display 属性的全部值flex inline inline-block block
flex最新的弹性布局
inline 内联元素
inline-block可以设置宽高的内联元素
block 块元素,独占一行
inline设置宽高,padding margin top bottom都无效
请解释 relative、fixed、absolute 和 static 元素的区别relatvie相对自身
fixed相对屏幕
absolute相对祖先元素中第一个不为static的位置
static 默认
ID > class, psuedo-class > element, psudo-element
你在开发或生产环境中使用过哪些 CSS 框架?你觉得应该如何改善他们?BOOTSTRAP
请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗?FLEX
align-item: 交叉轴排布
justiy-content: 主轴排布
flex: 放大 缩小 自动;设置权重
flex-direction: 设置方向
响应式 只有一种布局,根据屏幕自动改变
自适应 pc,平板,手机都有各自的布局
媒体查询
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
...
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101232.html
摘要:探讨判断横竖屏的最佳实现前端掘金在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样,本文就此来探讨下目前有哪些实现方法以及其中的优...
摘要:笔者作为一位,将工作以来用到的各种优秀资料神器及框架整理在此,毕竟好记性不如烂键盘,此前端知识点大百科全书前端掘金,,不定期更新技巧前端掘金技巧,偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案,还有一些是在css-tricks看到的。记录一下,以后会用到。会持续更新… 一、...
摘要:笔者作为一位,将工作以来用到的各种优秀资料神器及框架整理在此,毕竟好记性不如烂键盘,此前端知识点大百科全书前端掘金,,不定期更新技巧前端掘金技巧,偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案,还有一些是在css-tricks看到的。记录一下,以后会用到。会持续更新… 一、...
摘要:页面中元素的布局是相对的,因此一个元素的布局发生变化,会联动地引发其他元素的布局发生变化。对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...
摘要:为了支持在网络标准被广泛采用前,就已经建好的网站,这么做是必要的。在接近标准模式下,只有少数的怪异行为被实现。和有什么区别拥有更加严格的标签检查元素必须被正确地嵌套。元素必须被关闭。标签名必须用小写字母。 doctype(文档类型) 的作用是什么? doctype声明指出阅读程序应该用什么规则集来解释文档中的标记 浏览器标准模式 (standards mode) 、几乎标准模式(alm...
阅读 1071·2021-11-25 09:43
阅读 695·2021-11-22 14:45
阅读 3815·2021-09-30 09:48
阅读 1059·2021-08-31 09:41
阅读 1969·2019-08-30 13:52
阅读 1975·2019-08-30 11:24
阅读 1340·2019-08-30 11:07
阅读 948·2019-08-29 12:15