css-白红宇

css

阅读量：7155 次

发布时间：2019-06-29

本文共 19635 字，大约阅读时间需要 65 分钟。

CSS3有哪些新特性？

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}

个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}

颜色透明度 color: rgba(255, 0, 0, 0.75);

圆角 border-radius: 5px;

渐变 background:linear-gradient(red, green, blue);

阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url(bt_blue.png) 0 10;

转换
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

CSS3有哪些新特性？

1.CSS3边框：

· border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;

· box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;

· border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;

2.CSS3背景：

· background-size：属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

· background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

3.CSS3文字效果：

· text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;

· word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}

4.CSS3 2D转换：

transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

· translate()：元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

· rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。

· scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高x() 5.CSS3 3D转换：

· rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);

· rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);

5.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。

6.CSS3 动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

7.CSS3多列：

· column-count：属性规定元素应该被分隔的列数。

· column-gap：属性规定列之间的间隔。

· column-rule ：属性设置列之间的宽度、样式和颜色规则。

8.CSS3用户界面：

· resize：属性规定是否可由用户调整元素尺寸。

· box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。

· outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

9.CSS3盒模型：

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

. resize：none | both | horizontal | vertical | inherit

. box-sizing: content-box | border-box | inherit

. outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

10.CSS3伸缩布局盒模型(弹性盒)

css选择器有哪些？这些选择器的优先级是怎样的？哪些属性可以继承，哪些不可以？

（1）

选择器类型

1、ID #id

2、class .class

3、伪类 :hover

4、属性 [type="text"]

5、标签 p

6、伪元素 ::first-line

7、子选择器、相邻选择器

8、通用 *

（2）

权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 第六等：继承的样式没有权值。

（3）

可继承的属性：font-size, font-family, color，visibility，cursor，line-height

不可继承的样式：border, padding, margin, width, height

CSS如何计算选择器优先？

相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式

含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式

选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]

在同一组属性设置中，!important 优先级最高，高于行内样式

为什么要初始化CSS样式？如何进行初始化？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异

初始化样式会对 SEO 有一定的影响

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}ul,ol{list-style-type:none;}select,input,img,select{vertical-align:middle;}  a{text-decoration:none;}a:link{color:#009;}a:visited{color:#800080;}a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

什么是css盒子模型？盒子模型有哪些形式？如何设定？它们的区别是什么？

CSS-标准盒模型&怪异盒模型

（1）CSS盒子模型就是在网页设计中将网页中的元素看成一个盒子，它具有： margin，border，padding，content 四个属性，这就是盒子模型。

（2）盒子模型有两种形式：①标准盒子模型：元素的width、height（宽高）就是元素content的width、height；②IE盒子模型：元素的width、height（宽高）包含了元素的border、padding和content。

（3）通过box-sizing属性来设定元素的盒子类型

box-sizing常用的属性及使用场景？

box-sizing有三个属性值：

　　①content-box：使得元素的宽高即为内容区的宽高(默认模式)

　　②border-box：计算方式content + padding + border = 本身元素大小，即缩小了content大小

　　③inherit：继承父元素的盒模型模式

总结：

　　1、content-box 在元素内外部增加边距，会影响自身盒子大小，会破坏原有布局。

　　2、border-box 在元素内部增加边距，不会影响自身盒子大小，不会破坏原有布局。

请简要描述margin塌陷和margin重合问题？如何解决？

margin塌陷问题与合并问题

CSS中margin边界叠加问题及解决方案

垂直方向margin重叠原因与解决方法

折叠外边距。折叠的结果按照如下规则计算：

1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

3、两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的! (对于不产生折叠的情况，见参考文章的链接)

①.同向margin的重叠：

1图片的margin-top与3图片的margin-top发生重叠，2图片的margin-bottom与3图片的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。

在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

（2）

解决同向重叠的方法：

边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

补充解决方案:

1.外层padding

2.透明边框border:1pxsolidtransparent;

3.绝对定位postion:absolute:

4.外层DIVoverflow:hidden;

5.内层DIV 加float:left;display:inline;

6.外层DIV有时会用到zoom:1;

②.异向重叠问题：

1图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。

解决异向重叠问题：

float:left;display:inline;（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）

什么是BFC？怎样生成一个BFC？BFC的作用？

（1）

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。

（2）生成一个BFC的条件：

　　①float属性不为none；

　　②position为absolute或fixed；

　　③display为inline-block, table-cell, table-caption, flex, inline-flex；

　　④overflow不为visible(可以是hidden、scroll、auto)；

（3）BFC的作用

　　①清楚内部浮动；

　　②防止垂直margin合并；

　　③创建自适应两栏布局（防止浮动元素覆盖别的元素）

display：none与visibility：hidden的区别？

1.display:none视为不存在，不在文档流中占位，浏览器也不会解析该元素。

visibility:hidden是在视觉上看不见（完全透明），但还在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好。display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

伪类和伪元素有什么区别？它们的作用是什么？

伪类用一个冒号表示 :first-child

伪元素则使用两个冒号表示 ::first-line

伪元素在一个选择器里只能出现一次，并且只能出现在末尾。实则，伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

伪元素用于处理结构，伪类用于处理样式。

伪类的例子有：

:hover

:active

:first-child

:visited

等。

伪元素的例子有：

:first-line

:first-letter

:after

:before

::before 和 :after中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after

后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

图像格式jpg、gif、png、svg、bmp、WebP的区别以及应用场景？

什么是SVG？SVG的与其他图像格式（如jpeg、gif等）相比的优势？SVG和Canvas有什么区别？SVG用途？

HTML解析<svg>时，由于<svg>属于外部元素，解析机制使得每在<svg>标签内发现一个标签都会解析，而最最关键的是，<svg>遵循XML和SVG的定义，所以由XML特性，(会被解析成（，所以xss代码得到执行。

（1）

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，是一种使用XML技术描述二维图形的语言，是万维网联盟的标准。

（2）与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

（3）SVG 与 Canvas两者间的区别

1、SVG 是一种使用XML 描述 2D 图形的语言，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。（支持事件处理，容易编辑）

2、在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

3、SVG是基于矢量的（不依赖分辨率，放大不失帧）

4、不适合游戏应用（SVG要加载到DOM中，所以性能上不如canvas）

Canvas

1 、Canvas 通过 JavaScript 来绘制 2D 图形

2、在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，（不断重绘的过程）

3、不支持事件处理器

4、像素图（依赖分辨率）

5、能够以 .png 或 .jpg 格式保存结果图像

（4）SVG的用途

SVG在线条艺术，LOGO，图标，插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节的复杂图片。

CSS Sprites的原理？CSS Sprites的优点？CSS Sprites的缺点？CSS Sprites的使用？

（1）

　　CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

（2）CSS Sprites优点

　　①减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

　　②减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；

　　③减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

　　④更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

（3）CSS Sprites缺点

　　①在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

　　②背景设置时，需要得到每一个背景单元的精确位置；

　　③维护合成图片时，最好只是往下加图片，而不要更改已有图片。

（4）CSS Sprite的使用

　　①图片限制(Image Slicing)

　　②单图转滚(Single-image Rollovers)

　　③延长背景(Extend Background Image)

flex布局？

Flex 布局语法教程

弹性布局详解

常用的有：

flex-direction: row | row-reverse | column | column-reverse;//方向

flex-wrap: nowrap | wrap | wrap-reverse;//如何换行

justify-content: flex-start | flex-end | center | space-between | space-around;//在主轴上的对其方式

align-items: flex-start | flex-end | center | baseline | stretch;//在交互轴上的对齐方式

CSS优化、提高性能的方法有哪些

移除空的css规则（Remove empty rules）

正确使用display的属性

不滥用浮动、web字体

不声明过多的font-size

不在选择符中使用ID标识符

遵守盒模型规则

尽量减少页面重排、重绘

抽象提取公共样式，减少代码量

css预处理器

float和position的区别

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行；

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

rem布局的优缺点？

单独移动端网站或者app的时候建议使用 rem，它能让我们在手机各个机型的适配方面；大大减少我们代码的重复性，使我们的代码更兼容。

局限性：

目前ie不支持对pc页面来讲使用次数不多；

数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配。

css定位有哪些？float与position共同使用有什么影响？浮动定位于绝对定位的区别？

（1）css定位

　　　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

　　　　　　1.普通流：未专门指定的元素都在普通流中定位，position:static/relative;和float:none;也在普通流中定位。

　　　　　　2.绝对定位：position:absolute/fixed;元素框脱离普通文档流。　　

　　　　　　3.浮动：float:left/right;元素脱离普通文档流。

（2）float的定义

float 属性定义元素向左/右方向浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float的值：left/right/none

float实现文字环绕

带有浮动属性的元素也可以使元素inline-block化，具有包裹性，使得元素兼并了块元素和内联元素的的优点。带有浮动属性的元素会脱离标准流进行排列布局，脱离标准流后的浮动元素漂浮在正常块元素上面，但是依然占据正常文档流的文本空间，使得后面的文本以除了浮动元素之外的空间为排列基准，形成了文本环绕的效果。

（3）position的属性

static：默认值。没有定位，元素出现在正常的流中；

relative：相对定位,没有脱离标准量，参考点是元素原本的位置；

absolute：绝对定位，脱离标准流，参考点是第一个非static定位的父元素；

fixed：固定定位，脱离标准流，相对于浏览器窗口定位；页面如何滚动，这个盒子显示的位置不变。

　　关于position使用一般会引发的问题

　　 1.假如有一个默认100%宽度的div,一旦加上absolute绝对定位，该元素立马inline-block化，默认宽度就会自适应元素内部宽度，会导致页面的宽高塌陷。

　　 2.由于absolute绝对定位的灵活性，对于普通的页面布局，有时出于省事的原因很容易造成absolute/relative/top/left/z-index的滥用,这样会使后期的扩展和维护造成麻烦

（4）对元素同时使用position和float的情况

　　　　经过实践发现，无论position和float谁写在前面或后面，都是position先起作用。

　　　　　　1.当position为absolute/fixed时，元素已脱离文档流，再对元素应用float失效（即不起作用）。

　　　　　　2.当position为static/relative时，元素依旧处于普通流中，再对元素应用float起作用。

（5）css定位机制之绝对定位机制与浮动定位机制的区别

　　　　1.用position使元素脱离普通流后，该元素不占据空间，用top/bottom/left/right决定位置。

　　　　2.用float使元素脱离普通流后，该元素占据空间，用margin,padding等决定和周围内容的距离等。

position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

为什么有时需要清除浮动？清除浮动都有哪些方法？

（1）浮动的元素是脱离文档标准流的，如果不清楚浮动，那么会造成父元素高度塌陷，影响页面布局。

（2）清除浮动的方式：

1.父级div定义伪元素::after ，由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout

.pardent::after{

display: block;

clear: both;

height: 0;

content: “”;

visibility: hidden;

}

.pardent { zoom: 1; }

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

2. 包含浮动元素的父标签添加样式overflow为hidden或auto。

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会触发BFC机制，自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

3.最后一个浮动元素后加空div标签并添加样式clear:both。

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不好

4. 父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

display:inline-block 什么时候会显示间隙？为什么会出现间隔？该如何解决？

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距

非 inline-block 水平元素设置为 inline-block 也会有水平间距

可以借助 vertical-align:top; 消除垂直间隙

可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙

把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

你对 line-height 是如何理解的？

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离

如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的

一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容

把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中

line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

display: none; 与 visibility: hidden; 的区别

联系：它们都能让元素不可见

区别：
- display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
- display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
- 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
- 读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容

display有哪些值？说明他们的作用

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

请列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在

opacity: 0; CSS3属性，设置0可以使一个元素完全透明

position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外

display: none; 元素会变得不可见，并且不会再占用文档的空间。

transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留

<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态

height: 0; 将元素高度设为 0 ，并消除边框

filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度

rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

圣杯布局的实现原理？

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
- 好处：重要的内容放在文档流前面可以优先渲染
- 原理：利用相对定位、浮动、负边距布局，而不添加额外标签

.container {      padding-left: 150px; padding-right: 190px; } .main { float: left; width: 100%; } .left { float: left; width: 150px; margin-left: -100%; position: relative; left: -150px; } .right { float: left; width: 190px; margin-left: -190px; position: relative; right: -190px; }

什么是双飞翼布局？实现原理？

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局

原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

.container {    /*padding-left:150px;*/    /*padding-right:190px;*/} .main-wrap { width: 100%; float: left; } .main { margin-left: 150px; margin-right: 190px; } .left { float: left; width: 150px; margin-left: -100%; /*position: relative;*/ /*left:-150px;*/ } .right { float: left; width: 190px; margin-left: -190px; /*position:relative;*/ /*right:-190px;*/ }

什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC？

当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：

没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC

产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将停止之前的渲染。

等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。

解决方法：使用 link 标签将样式表放在文档 head

介绍使用过的 CSS 预处理器？

CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）

开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用

使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性

最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS

抽离样式模块怎么写，说出思路？

CSS可以拆分成2部分：公共CSS 和业务CSS：
- 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
- 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

iOS safari 如何阻止“橡皮筋效果”？

$(document).ready(function(){ var stopScrolling = function(event) { event.preventDefault(); } document.addEventListener('touchstart', stopScrolling, false); document.addEventListener('touchmove', stopScrolling, false); });

设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的 display 值自动变成 block

怎么让Chrome支持小于12px 的文字？

.shrink{    -webkit-transform:scale(0.8); -o-transform:scale(1); display:inline-block; }

让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）

-webkit-font-smoothing: antialiased;

font-style 属性 oblique 是什么意思？

font-style: oblique; 使没有 italic 属性的文字实现倾斜

css hack原理及常用hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。

常见的hack有
- 属性hack
- 选择器hack
- IE条件注释

一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

方案1： .sub { height: calc(100%-100px); }

方案2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }

方案3： .container { display:flex; flex-direction:column; } .sub { flex:1; }

实现一个两列或多列等高布局

方法一：使用flex布局


          
       
        多列等高布局左
        
多列等高布局左
       
 
       
        多列等高布局右

.container{  display:flex;}.left,.right{  flex:1;}.left{  background:pink;}.right{  background:green;}

2、利用border实现

</div>

<p>right</p>

</div>

#wrapper {

display: inline-block;

width: 400px;

border-left: 200px solid #6ee0b6;

background-color: #c3c3ff;

}

.left {

float: left;

width: 200px;

margin-left: -200px;

box-sizing: border-box;

padding: 20px;

}

.right {

float: left;

padding: 20px;

}

3、利用css中的table属性实现

<div>

</div>

<div>

<p>center</p>

</div>

<div>

<p>right</p>

</div>

.table {

width: 500px;

display: table;

}

.tableRow {

display: table-row;

}

.tableCell {

display: table-cell;

}

.cell1 {

background: #6ee0b6;

}

.cell2 {

background: #f3777b;

}

.cell3 {

background: #c3c3ff;

}

4、利用 margin 和 padding 对冲实现

这种方法最简单，只需要将padding值设的足够大，然后用相同大的负的margin来对冲。

</div>

<p>center</p>

</div>

<p>right</p>

</div>

#wrapper {

overflow: hidden;

}

.column {

float: left;

width: 200px;

margin-bottom: -99999px;

padding-bottom: 99999px;

}

.left {

background: #6ee0b6;

}

.center {

background: #f3777b;

}

.right {

background: #c3c3ff;

}

实现css动画有哪些

1、设置transition设置过渡，添加transform设置形状，形成动画效果，如下：

                            
.divadd { 
     
transition: All 0.4s ease-
in
-out;
         
-webkit-transition: All 0.4s ease-
in
-out;
         
-moz-transition: All 0.4s ease-
in
-out;
         
-o-transition: All 0.4s ease-
in
-out;
     
transform:rotate(360deg);
    
-ms-transform:rotate(360deg); 
/* IE 9 */
    
-webkit-transform:rotate(360deg); 
/* Safari and Chrome */
}
         
       