前两篇文章总结了 html 部分针对面试的一些沉淀
今天主要是 css 部分内容,下面开始。
两种盒模型分别说一下
box-sizing:content-box(外加)
box-sizing:border-box(内减)水平居中
行内元素:text-align:center
块级元素:margin: 0 auto
绝对定位和移动:position:absolute; transform:translate()
绝对定位和负边距:position:absolute; margin:
flex布局:display:flex; justify-content:center;如何垂直居中
- 不定高度,
padding:10px
- 定高度
1.table
2.伪装display:table
3.加上100%的before和after,并且display:inline-block
4.子绝父相,top和left为0,margin:auto
5.子绝父相,top和left为50%,margin调整
6.子绝父相,top和left为50%,translate调整
7.flex
BFC 是什么
块格式化上下文(Block Formatting Context,BFC)是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域
浮动元素、绝对定位元素、行内块元素、弹性元素、overflow 值不为 visible 的块元素会触发BFC其中上外边距塌陷,解决方法如下
.selector
.selector::before{ content: ""; display:table; }
CSS 选择器优先级
越具体优先级越高
同样优先级写在后面的覆盖写在前面的
!important 优先级最高,但是要少用
如何清除浮动
.clearfix
.clearfix:after { content: ''; display: block; /*或者 table*/ clear: both; } .clearfix { zoom: 1; /* IE 兼容*/ }
CSS 加载方式有几种
行内,内联,外链,import简述 src 和 href 的区别
href 时指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src 时指向外部的资源位置,指向的内容将会嵌入到文档中当前标签所在位置css选择器(e代表元素) 相关文章
阐述 | 写法 |
---|---|
通用 | * |
元素 | e |
类 | .class |
id | #id |
群组 | e1,e2 |
后代 | e1 e2 |
子代 | e1>e2 |
相邻兄弟 | e1+e2 |
通用兄弟 | e1~e2 |
属性 | [attr] elem[attr] [attr1][attr2] [attr=value] |
属性相关 | [attr^=value] [attr$=value] [attr*=value] [attr~=value] |
伪类– 链接伪类 | :link :visited |
伪类– 动态伪类 | :hover :active :focus |
伪类– 结构伪类 | :first-child :last-child :nth-child(n) :empty :only-child |
伪类– 目标伪类 | :target |
伪类– 否定伪类 | :not |
伪元素 | :first-letter :first-line ::selection |
伪元素–内容生成 | :before或::before :after或::after 必须要有content属性 |
line-height: 2和line-height: 200%的区别
两个属性设置给具体的某一个元素时是没有区别的
区别就是他们设置两种不同的属性后其子元素表现样式上的区别!2是子元素自身,200%是父元素,也就是固定值行内元素的“框属性”是 line-height 控制
对于行内元素来说,上下的 margin padding 不生效,只有左右的 margin padding 生效!
- inline-block 在实际工作中有什么作用
如果看到页面上有一排并列的按钮,如果不用浮动,就可以用 inline-block
让一个元素“看不见”的几种方式
将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景.
opacity:0
设置height,width等盒模型属性为0
设置元素的position与left,top,bottom,right等,将元素移出至屏幕外
设置元素的position与z-index,将z-index设置成尽量小的负数
——能不能点击
display,visibility不能,opacity可以,height看情况
——能不能动画
display立即消失,没有动画
visibility按时消失,没有动画
opacity和height正常css实现文本溢出显示省略号
单行文本p { width: 300px; overflow: hidden; /*文本不会换行*/ white-space: nowrap; /*当文本溢出包含元素时,以省略号表示超出的文本*/ text-overflow: ellipsis; }
多行文本看链接css多行文本溢出显示省略号
- 三栏布局
1.flex布局:容器flex,两边固定px,中间flex1
2.绝对定位布局:容器相对,两边绝对,中间margin固定
3.圣杯模式: 中间100%,fll,然后左边fll+负向ml再定位调整,右边同理
关键在于理解负边距的作用,left的margin-left:-100%使它上移一行.wrapper { overflow: hidden; padding: 0 100px; } .middle { position:relative; width: 100%; float: left; height: 80px; background: green; } .left { position: relative; float: left; width: 100px; background: yellow; height: 80px; left: -100px; margin-left: -100%; }
4.双飞翼布局: 中间容器wrapper浮动,width100%,main的ml和mr固定,左右浮动和ml、mr
跟圣杯布局没多大区别,就是middle的实现不一样,圣杯布局是middle+padding,双飞翼采用子元素+margin,最主要的还是负边距的使用
- 列举你了解的 HTML5、CSS3 新特性
CSS3 和 HTML5 新特性一览
CSS3:
选择器,边框,背景,渐变,转换,过渡,动画,盒模型,flex,媒体查询
HTML5:
语义标签,增强型表单,音频视频,canvas, svg,地理位置,webWorker,webStorage,webSocket(全双工通讯)
- flex:1代表什么意思
flex: flex-grow flex-shrink flex-basis
取值 | 结果 |
---|---|
默认 | 0 1 auto |
none | 0 0 auto |
auto | 1 1 auto |
非负数 | 非负数 1 0% |
长度或百分比 | 1 1 长度或百分比 |
非负数 非负数 | 非负数 非负数 0% |
非负数 长度或百分比 | 非负数 1 长度或百分比 |
flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况:
auto:首先检索该子元素的主尺寸,如果主尺寸不为 auto,则使用值采取主尺寸之值;如果也是 auto,则使用值为 content。
content:指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值,等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。
👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆一个显示「绝对」伸缩(以零为基准值开始)与「相对」伸缩(以项目的内容大小为基准值开始)差异的图解。这三个项目的伸缩比例分别是「1」、「1」、「2」。
- Canvas 和 SVG 有什么区别
SVG 矢量图优点:不失真,放大缩小图像都很清晰学习成本低,也是一种 DOM 结构使用方便,设计软件可以直接导出
Canvas 像素图优点(在元素特别多的情况 1000+):性能高,可以自己控制绘制过程,还能使用 WebGL可控性高,像素级控制内存占用恒定,就是像素点个数
SVG 的应用范围更广一些。
- 渐进增强和优雅降级分别是什么意思
渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
- css reset 是什么?css 预编译器是什么? 后编译器(post css)是什么?
css reset 即重置浏览器标签的样式表现在所使用的主流浏览器对一些标签的默认属性上并没有做到统一,所以我们偶尔会发现,某个页面在chrome浏览器上很正常,到了firefox上面却有意想不到的偏差。当然编程人员不喜欢这样的兼容性问题的,而reset.css就是解决默认样式不兼容问题的办法之一。
预编译器
CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
后编译器(post css)
PostCSS是一个使用JavaScript插件来转换CSS的工具。它将CSS转换成抽象语法树(AST),也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS,它请允许插件执行和转换你的代码。
实际上,对于CSS的操作,PostCSS插件并没有任何限制。只要你有想得到的,你都可以写一个PostCSS插件来实现。
- 浅谈css预处理器,Sass、Less和Stylus
下面从特性上比较三者异同:
变量:
Sass声明变量必须是『$』开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:分隔开。
Less 声明变量用『@』开头,其余等同 Sass。
Stylus 中声明变量没有任何限定,结尾的分号可有可无,但变量名和变量值之间必须要有『等号』。但需要注意的是,如果用“@”符号来声明变量,Stylus会进行编译,但不会赋值给变量。就是说,Stylus 不要使用『@』声明变量。Stylus 调用变量的方法和Less、Sass完全相同。作用域:
css 预编译器把变量赋予作用域,也就是存在生命周期。就像 js 一样,它会先从局部作用域查找变量,依次向上级作用域查找。Sass:三者最差,不存在全局变量的概念。也就是说在 Sass 中定义了相同名字的变量时你就要小心蛋疼了。
Less:我认为跟 JS 一样,逐级查找,向上冒泡。
Stylus:完全等同 Less。Stylus 和 Sass 则更倾向于指令式。嵌套:
十分真诚的说,三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别(也可能是我没发现)。Sass 除了常规的采用『&』替代父级选择器之外,还提供了「奇葩的属性嵌套」:
.footer {
font: {
family: 微软雅黑;
size: 5rem;
weight: bolder;
}
}
除了少打几个字,感觉没啥用啊。
4. 继承:
css 属性的继承是一个非常重要的特性,好消息是三种预编译器都对此做出了改善。
Sass和Stylus的继承非常像,能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始,后面接被继承的选择器。
.shit {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .shit;/*继承.block*/
border: 1px solid #aaa;
}
ul,li {
@extend .shit; /*继承.block*/
color: #aaa;
}
将被编译成标准 css:
.shit,p,ul,.shit,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #aaa
}
ul,li {
color:#aaa;
}
Less 继承:与前两者继承方式有所区别,它不是在选择器上继承,而是将Mixins中的样式嵌套到每个选择器里面。然而这样会带来一个明显的缺点:每个选择器中会出现重复的样式。
- 导入@Import:
CSS中,不建议用@import导入css,因为会增加http请求。但 CSS 预处理器中的导入和CSS的有很大区别,它是将不同 css 是在语义上导入,最终编译结果会生成一个CSS文件。
值得注意的是,如果不同文件相互引入的时候,出现相同变量名时可能会引起错误。所以我的建议是单独有一个 var.sass/less/styl 文件来记录所有你定义的变量。
Less 为@Import 扩展了语法,而 Sass 和 Stylus 并没有。具体扩展的 import 语法请见:Less 的 Import 扩展
总结
Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css,所以它可能学习起来更容易。
Sass 和 Compass、Stylus 和 Nib 都是好基友。
Sass 和 Stylus 都具有类语言的逻辑方式处理:条件、循环等,而 Less 需要通过When等关键词模拟这些功能,这方面 Less 比不上 Sass 和 Stylus。
Less 在丰富性以及特色上都不及 Sass 和 Stylus,若不是因为 Bootstrap 引入了 Less,可能它不会像现在这样被广泛应用
- CSS中 link 和@import 的区别
link属于HTML标签,而@import是CSS提供的页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别,而link是HTML标签,无兼容问题
link方式的样式的权重 高于@import的权重
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!