CSS(3)
1.水平居中的方法
1.元素为行内元素,设置父元素text-align:center
2.如果元素宽度固定,可以设置左右margin为auto;
3.如果元素为绝对定位,设置父元素position为relative,元素设left:0;right:0;margin:auto;
4.使用flex-box布局,指定justify-content属性为center
5.display设置为tabel-ceil
2.垂直居中的方法
1.将显示方式设置为表格,display:table-cell,同时设置vertial-align:middle
2.使用flex布局,设置为align-item:center
3.绝对定位中设置bottom:0,top:0,并设置margin:auto
4.绝对定位中固定高度时设置top:50%,margin-top值为高度一半的负值
5.文本垂直居中设置line-height为height值
3.简要介绍一下CSS3的新特性
在布局方面新增了flex布局,
在选择器方面新增了例如:first-of-type,nth-child等选择器,
在盒模型方面添加了box-sizing来改变盒模型,
在动画方面增加了animation、2d变换、3d变换等。
在颜色方面添加透明、rgba等,
在字体方面 允许嵌入字体和设置字体阴影,同时当然也有盒子的阴影
最后还有关键的媒体查询。
4.如何使用CSS实现硬件加速?
硬件加速是指通过创建独立的复合图层,让GPU来渲染这个图层,从而提高性能, 一般触发硬件加速的CSS属性有transform、opacity、filter,为了避免2D动画在 开始和结束的时候的repaint操作,一般使用tranform:translateZ(0)
5.说一说css3的animation
6.绝对定位和相对定位的区别?
绝对定位是相对于最近的已经定位的祖先元素,没有则相对于body,绝对定位脱离文档流,
而相对定位是相对于元素在文档中的初始位置,并且 相对定位的元素仍然占据原有的空间。
7.BFC是什么?介绍一下,如何触发BFC?
BFC也就是常说的块格式化上下文,这是一个独立的渲染区域,规定了内部如何布局,并且这个区域的子元素不会影响到外面的元素。其中比较重要的布局规则有内部box垂直放置、计算BFC的高度的时候,浮动元素也参与计算。 触发BFC的规则有根元素、浮动元素、position为absolute或fixed的元素、display属性为inline-block、table-cell、table-caption、flex、inline-fllex、overflow不为visible的元素。
8.css sprite是什么,有什么优缺点
概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点:
- 减少HTTP请求数,极大地提高页面加载速度
- 增加图片信息重复度,提高压缩比,减少图片大小
- 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现
缺点:
- 图片合并麻烦
- 维护麻烦,修改一个图片可能需要从新布局整个图片,样式
9.display: none;
与visibility: hidden;
的区别
联系:它们都能让元素不可见
区别:
- display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
- display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式
- 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
- 读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容
10.link
与@import
的区别
link
是HTML方式,@import
是CSS方式link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现FOUClink
可以通过rel="alternate stylesheet"
指定候选样式- 浏览器对
link
支持早于@import
,可以使用@import
对老浏览器隐藏样式 @import
必须在样式规则之前,可以在css文件中引用其他文件- 总体来说:link优于@import
11.display: block;
和display: inline;
的区别
block
元素特点:
1.处于常规流中时,如果width
没有设置,会自动填充满父容器
2.可以应用margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中时布局时在前后元素位置之间(独占一个水平空间)
5.忽略vertical-align
inline
元素特点
1.水平方向上根据direction
依次布局
2.不会在元素前后进行换行
3.受white-space
控制
4.margin/padding
在竖直方向上无效,水平方向上有效
5.width/height
属性对非替换行内元素无效,宽度由元素内容决定
6.浮动或绝对定位时会转换为block
7.vertical-align
属性生效
8.非替换行内元素的行框高由line-height
确定,替换行内元素的行框高由height
,margin
,padding
,border
决定
12.容器包含若干浮动元素时如何清理(包含)浮动
- 容器元素闭合标签前添加额外元素并设置
clear: both
- 父元素触发块级格式化上下文(见块级可视化上下文部分)
- 设置容器元素伪元素进行清理推荐的清理浮动方法
/** * 在标准浏览器下使用 * 1 content内容为空格用于修复opera下文档中出现 * contenteditable属性时在清理浮动元素上下的空白 * 2 使用display使用table而不是block:可以防止容器和 * 子元素top-margin折叠,这样能使清理效果与BFC,IE6/7 * zoom: 1;一致 **/ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /** * IE 6/7下使用 * 通过触发hasLayout实现包含浮动 **/ .clearfix { *zoom: 1; }
13.如何创建块级格式化上下文(block formatting context),BFC有什么用
创建规则:
- 根元素
- 浮动元素(
float
不是none
) - 绝对定位元素(
position
取值为absolute
或fixed
) display
取值为inline-block
,table-cell
,table-caption
,flex
,inline-flex
之一的元素overflow
不是visible
的元素
作用:
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的margin折叠