css

 

CSS3有哪些新特性？

• 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
• 弹性盒模型 display: flex;
• 多列布局 column-count: 5;
• 媒体查询 @media (max- 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-标准盒模型&怪异盒模型 https://www.jianshu.com/p/d775045f5573

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

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

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

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

https://www.jianshu.com/p/2f2cf326795d

box-sizing有三个属性值：

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

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

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

总结：

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

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

 

 

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

margin塌陷问题与合并问题 https://blog.csdn.net/Sunshineanl/article/details/70767277

CSS中margin边界叠加问题及解决方案  https://www.aliyun.com/jiaocheng/656457.html

垂直方向margin重叠原因与解决方法  https://my.oschina.net/u/2612473/blog/2221555

 

margin塌陷问题和合并问题都只对垂直方向有效

 

1. margin塌陷问题

   这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。

2. margin合并问题

   具体表现为两个元素并列时，两者相隔的外边距取的是两者所设置margin的最大值。

（2）

解决同向margin塌陷的方法：

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

补充解决方案:

1.外层padding 

2.透明边框border:1px solid transparent;

3.绝对定位postion:absolute:

4.外层DIV overflow:hidden;

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

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

解决异向margin重叠问题：

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

 

 

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

https://blog.csdn.net/wky_csdn/article/details/73554720

https://www.jianshu.com/p/acf76871d259

（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切换是否显示时则不会引起回流。

     

 

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

http://www.php.cn/div-tutorial-412365.html

伪类用一个冒号表示 :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的区别以及应用场景？

https://blog.csdn.net/bangbanggangan/article/details/81094908

https://www.jianshu.com/p/c66f52d875d9

 

 

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

 

https://www.cnblogs.com/ndos/p/8367168.html

（1）

 

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

（2）CSS Sprites优点

　　①减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
　　②减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；

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

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

 

（3）CSS Sprites缺点

 

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

 

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

 

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

（4）CSS Sprites的使用

 

　　①图片限制(Image Slicing)

 

　　②单图转滚(Single-image Rollovers)

 

　　③延长背景(Extend Background Image)

 

 

flex布局？

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局语法教程 http://www.runoob.com/w3cnote/flex-grammar.html

弹性布局详解 https://www.cnblogs.com/jerehedu/p/7358329.html

常用的有：

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 属性定义元素向左/右方向浮动。浮动元素的display属性值都变为block;，而不论它本身是何种元素。

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值需要调整。

 

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

https://www.cnblogs.com/nxl0908/p/7245460.html

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

（2）清除浮动的方式：

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

.pardent::after{

 content: “”;

 display: block;

 height: 0;

 line-height: 0;

 visibility: hidden;

 clear: both;

}

.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？

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4. 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

 

让页面里的字体变清晰，变细用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; }

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

https://blog.csdn.net/qq_41139830/article/details/83478619

 

方法一：使用flex布局

<div class="container">
    <div class="left">多列等高布局左<br/>多列等高布局左</div> 
<div class="right">多列等高布局右</div>
</div>

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

2、利用border实现
<div class="container">
<div class="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.container {
display: inline-block;
400px;
border-left: 200px solid #6ee0b6;
background-color: #c3c3ff;
}

.left {
float: left;
200px;
margin-left: -200px;
box-sizing: border-box;
}
.right {
float: left;
}

3、利用css中的table属性实现
<div class="table">
<div class="tableRow">
<div class="tableCell cell1">
<div>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
</div>

<div class="tableCell cell2">
<div>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
</div>

<div class="tableCell cell3">
<div>
<p>right</p>
<p>right</p>
</div>
</div>

</div>
</div>
.table {
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 class="contianer">
<div class="column left">
<p>left</p>
<p>left</p>
</div>
<div class="column center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div class="column right">
<p>right</p>
<p>right</p>
</div>
</div>
.container {
overflow: hidden;
}

.column {
float: left;
200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.left {
background: #6ee0b6;
}
.center {
background: #f3777b;
}
.right {
background: #c3c3ff;
}

实现css动画有哪些

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

1 2 3 4 5 6 7 8 9 10

.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 */ }

　　此种方式比较小众，不易控制

2、添加animation属性，设置动画效果，如下：

1 2 3 4 5 6 7 8 9 10 11

.a1 {     position: absolute;     animation: a1 3s;     opacity: 0 } @keyframes a1 {     0% {left: 10px;opacity: 0}     30% {left: 60px;font-size:23px;opacity: 1}     90% {left: 100px;opacity: 1}     100% {left: 10px;opacity: 0} }

CSS实现一个自适应的正方形

方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width

.box{
20%;//20vw也可以
height: 20vw;
background: pink;
}
方法二：设置盒子的padding-bottom样式，让盒子的padding-bottom和盒子的宽度一样，同时设置heigh = 0px；

*{
margin: 0;
padding: 0;
}
.box{
20%;
/* 设置height为0 ，避免盒子被内容撑开多余的高度 */
height: 0px;
/* 把盒子的高撑开，
和width设置同样的固定的宽度或者百分比 ，
百分比相对的是父元素盒子的宽度 */
padding-bottom: 20%;
background: pink;
color: #666;
position: relative;
overflow: hidden;
}
p{
position: absolute;
100%;
height: 100%;
background: yellow;
}

CSS实现宽度自适应100%，宽高16:9的比例的矩形

第一步先计算高度，假设宽100%，那么高为h=9/16=56.25%

第二步利用之前所说设置padding-bottom方法实现矩形

<style>
*{
margin: 0px;
padding: 0px;
}
/* .wrap:包裹矩形的div，用来控制矩形的大小 */
.wrap{
20%;
}
/* .box 矩形div，宽度是.wrap的百分百，这主要是为了方便高度的计算 */
.box{
100%;
/*防止矩形被里面的内容撑出多余的高度*/
height: 0px;
/* 16:9padding-bottom:65.25%，4:3padding-bottom:75% */
padding-bottom: 65.25%;
position: relative;
background: pink;
}
/* 矩形里面的内容 ，要设置position：absolute，才能设置内容高度100%和矩形一样 */
.box p{
100%;
height: 100%;
position: absolute;
color: #666;
}
</style>
<body>
<div class="wrap">
<div class="box">
<p>&nbsp;&nbsp;这是一个16：9的矩形</p>
</div>
</div>
</body>

flex弹性布局，移动端适配方案有哪些

https://blog.csdn.net/tcf_jingfeng/article/details/80814015