width: height = 4: 3
)的div,怎么设置flex: 1
完整写法display: none
和 visibility:hidden
的区别em
rem
vh
vw
calc()
line-height
百分比rem
实现原理及相应的计算方案postcss
是什么css modules
CSS
预处理器vertical-align
有哪些值?它在什么情况下才能生效?css
引入伪类和伪元素概念是为了格式化文档树以外的信息。伪类和伪元素是用来修饰不在文档树中的部分。
伪类 用于当元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,用户悬停在指定的元素时,我们可以通:hover来描述这个元素的状态。虽然它和普通的css类类似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
图片来源网络
伪元素 用于创建不在文档树中的元素,并为其添加样式,比如说,我们可以通过:before来在一个元素前添加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
图片来源网络
CSS3 规范中的要求使用双冒号 (::) 表示伪元素,以此来区分伪元素和伪类,比如::before 和::after 等伪元素使用双冒号 (::),:hover 和:active 等伪类使用单冒号 (:)。虽然 CSS3 标准要求伪元素使用双冒号的写法,但也依然支持单冒号的写法。
总结伪类和伪元素[1]
利用css中 padding
百分比的计算方法:padding
设置为百分比,是以元素的宽度乘以100%
从而得到的padding
值的。
在div
的width
为固定的情况下,设置height
为0
,使内容自然溢出,再通过设置padding-bottom
使元素有一定高度。
.element {
/* 16:9宽高比,则设padding-bottom:56.25% */
/* height: 0px, 防止矩形被里面的内容撑出多余的高度*/
width: 100vw;
height: 0px;
padding-bottom: 56.25%;
background: pink;
}
利用将padding-top
或padding-bottom
设置成百分比,来实现高度满足宽度的某个比例。因为,当margin/padding
取形式为百分比的值时,无论是left/right
,还是top/bottom
,都是以父元素的width
为参照物的!
css实现宽高比[2]
详细查看CSS选择器笔记[3]
选择器的优先级(就近原则):!important > [ id > class > tag ]
CSS选择器是 从右向左解析 。
若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。
若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找父节点直到找到根元素或者满足条件的匹配规则,则结束这个分支的遍历。
两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
举例说明:
.mod-nav h3 span { font-size: 16px; }
为什么从右向左的规则要比从左向右的高效?
若从左向右的匹配,过程是:从.mod-nav
开始,遍历子节点header
和子节点div
,然后各自向子节点遍历。在右侧div
的分支中,最后遍历到叶子节点a
,发现不符合规则,需要回溯到ul
节点,再遍历下一个li-a
,假如有1000个li
,则这1000
次的遍历与回溯会损失很多性能。
再看看从右至左的匹配:先找到所有的最右节点span,对于每一个span
,向上寻找节点h3
,由h3
再向上寻找class=mod-nav
的节点,最后找到根元素html则结束这个分支的遍历。
很明显,两种匹配规则的性能差别很大。之所以会差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。
答案来源于 CSS选择器从右向左的匹配规则[4]
Flex 布局概念: 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"
flex
属性是flex-grow
, flex-shrink
和 flex-basis
, 默认值为0 1 auto
。后两个属性可选。
flex-grow
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
Flex 布局教程:语法篇[5] 、Flex 布局教程:实例篇[6]
em: 相对单位,参考物是父元素的font-size,具有继承的特点。如果字体大小是16px(浏览器的默认值),那么 1em = 16px
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,不会像em那样,依赖于父元素的字体大小,而造成混乱
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:取当前vw和Vh中较小的那一个值, vmax:取当前Vw和Vh中较大的那一个值
vw、vh 与 % 百分比的区别:
calc(): CSS3中新增的一个函数, 用于动态计算宽/高, 语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示
可以直接查看MDN[7]上的相关解释:
line-height 属性被指定为以下任何一个:
rem布局的本质是等比缩放,一般是基于宽度.
需要了解的基础知识:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
rem实现适配的原理:
计算方案:
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+ scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
// 设置根元素字体大小。此时为宽的100等分
document.documentElement.style.fontSize = ocument.documentElement.clientWidth / 100 + 'px';
实际开发过程中,可以使用 lib-flexible[8]库,但是如果每次写的时候都要手动去计算有点太过麻烦了,我们可以通过在webpack中配置 px2rem-loader[9], 或者 pxrem-loader[10],主要原理就是需要自己配置 px转rem的计算规则,在编辑的时候直接计算转成rem。所以在开发的时候直接按照设计稿的尺寸写px,编译后会直接转化成rem;
Rem相关文章推荐:
为什么要清除浮动:父元素因为子级元素浮动引起的内部高度为0的问题。
清除浮动常用的四种方式:
div
定义height
clear:both
。.clearfix
工具样式,当需要清除浮动时,就为其加上这个类 .clearfix:after { display: block; clear :both; content: '';}
。overflow
属性:包含浮动元素的父标签添加样式overflow
为hidden
或auto
,通过触发BFC方式,实现清除浮动清除浮动的四种方式及其原理理解[14]
我们都知道”babel“的存在,可以让我们使用比较新的js语法,postcss则可以理解为CSS的”babel“,可以让我们使用比较新的CSS语法
postcss 不是类似less的CSS预处理器, 而是一种允许用JS插件来转变样式的工具。postcss提供了一个解析器,它能够将CSS解析成抽象语法树(AST)。
postcss的常用插件
css modules作用: - 避免css相互覆盖的方法,CSS Modules 加入了局部作用域和模块依赖 实现原理 CSS的规则是全局的,任何一个组件的样式规则,对整个页面有效; 产生局部作用域的唯一方法,就是使用一个独一无二的class名字,不会与其他选择器重名,这就是CSS Modules的实现原理:将每个类名编译成独一无二的哈希值;
CSS Modules 用法教程[19]
CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。绝大多数CSS预处理器会增加一些原生CSS不具备的特性,例如代码混合,嵌套选择器,继承选择器等
最流行的CSS预处理器
vertical-align属性值:
负值相对于基线往下偏移,正值往上偏移,事实上vertical-align:base-line等同于vertical-align:0。这个负值真的是 CSS 神器!vertical-align生效前提:
格式化上下文, 它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互渲染作用 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。
只要元素满足下面任一条件即可触发
<html>
)10 分钟理解 BFC 原理[20], MDN文档[21]
display: flex; justify-content: center; slign-items: center
position: absolute
+ transform: translate(-50%, -50%)
, translate是基于元素本身的宽高去计算百分比的,所以同样适用于宽度和高度都不固定的情况position: absolute
+ let: 0; right: 0; top: 0; bottom: 0; margin: auto
;左边宽度固定, 右边宽度自适应
width: 100%; padding-left:left
元素的宽度; 右边宽度固定, 左边宽度自适应中间自适应, 左右两边固定有如下几种方法
display: flex; ustify-content: space-between;
left面板
的left值为负的left面板
宽度,right面板
的right值为负的right面板
的值但是圣杯布局有个问题:当面板的middle部分比两边的子面板宽度小的时候,布局就会乱掉。因此也就有了双飞翼布局来克服这个问题。如果不增加任何标签,想实现更完美的布局非常困难,因此双飞翼布局在主面板上选择了加一个标签
对比两者可以发现,双飞翼布局与圣杯布局的主要差别在于:
详解查看 常见CSS布局的实现[23]
CSS这些题其实都不难,平常开发的时候也经常会遇到,死记硬背也是记不住的,需要自己多动手敲一下才能理解并且记忆深刻,真正融化为自己的知识,很多词(比如BFC,圣杯布局,双飞翼布局等)我第一次听到的时候并不知道他们是什么,而且感觉从名称上很难理解,但是多看几遍,多理解,见多了也就记住了。
上面给出的答案大多是从网上搜的,也不一定是最好的,主要是通过题目来查漏补缺,有问题或者有更好的答案,欢迎大家补充。
[1]
总结伪类和伪元素: http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto
[2]
css实现宽高比: https://blog.csdn.net/Honeymao/article/details/77884744
[3]
CSS选择器笔记: http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
[4]
CSS选择器从右向左的匹配规则: http://www.cnblogs.com/zhaodongyu/p/3341080.html
[5]
Flex 布局教程:语法篇: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[6]
Flex 布局教程:实例篇: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[7]
MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height
[8]
lib-flexible: https://github.com/amfe/lib-flexible
[9]
px2rem-loader: https://github.com/Jinjiang/px2rem-loader
[10]
pxrem-loader: https://github.com/cupools/pxrem-loader#readme
[11]
移动端页面开发适配 rem布局原理: https://segmentfault.com/a/1190000007526917
[12]
使用Flexible实现手淘H5页面的终端适配: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
[13]
Rem布局的原理解析: https://zhuanlan.zhihu.com/p/30413803
[14]
清除浮动的四种方式及其原理理解: https://juejin.im/post/59e7190bf265da4307025d91
[15]
autoprefixer: https://github.com/postcss/autoprefixer
[16]
precss: https://github.com/jonathantneal/precss
[17]
postcss-cssnext: https://github.com/MoOx/postcss-cssnext/
[18]
PostCSS 是个什么鬼东西?: https://segmentfault.com/a/1190000003909268
[19]
CSS Modules 用法教程: http://www.ruanyifeng.com/blog/2016/06/css_modules.html
[20]
10 分钟理解 BFC 原理: https://zhuanlan.zhihu.com/p/25321647
[21]
MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
[22]
负边距: http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
[23]
常见CSS布局的实现: https://github.com/funnycoderstar/blog/issues/125
[24]
50道 CSS 基础面试题(附答案): https://www.itcodemonkey.com/article/2853.html
[25]
你未必知道的49个CSS知识点: https://juejin.im/post/5d3eca78e51d4561cb5dde12
[26]
你未必知道的CSS知识点(第二季): https://juejin.im/post/5d9ec8b0518825651b1dffa3
[27]
个人总结(css3新特性): https://juejin.im/post/5a0c184c51882531926e4294
[28]
前端基础篇之CSS世界: https://juejin.im/post/5ce607a7e51d454f6f16eb3d