css知识点汇总

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

盒子模型就是元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型

标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin,宽高指的是 content 的宽高

低版本IE盒子模型：内容（content+padding+border）+ 边界margin,宽高指的是 content+padding+border 部分的宽高

CSS 如何设置这两种模型？

 box-sizing : content-box  box-sizing : border-box

js如何设置获取盒模型对应的宽和高

 dom.style.width/height;
 //设置获取的是内联样式dom.currentStyle.width/height;
 //只有IE支持window.getComputedStyle(dom).width/height;
 //兼容性好dom.getBoundingClientRect().width/height;
 //适用场所：计算一个元素的绝对位置

在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；

如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

请列举一下你所知道的css 隐藏元素的方法？

display:none不显示对应的元素，在文档布局中不再分配空间(回流+重绘),渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。子元素不会继承

visibility：hidden隐藏对应元素,在文档布局中仍保留原来的空间(重绘),但是不会响应绑定的监听事件。子元素会继承,可以通过visibility:visible来取消继承

opacity:0将元素的透明度设置为0,以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。子元素会继承,而且不能通过opacity:1来取消隐藏

通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

通过z-index负值,来使其他元素遮盖住该元素,以此来实现隐藏。

通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

通过transform:scale(0,0)来将元素缩放为0,以此来实现元素的隐藏.这种方法下,元素仍在页面中占据位置，但是不会响应绑定的监听事件.

height:0px;的时候不占页面空间如果元素中有文本的话需要给元素添加oveflow:hidden;font-size:0px;

CSS 常见的伪类和伪元素有哪些，他们的区别？

相同点:都是属于选择器中的一种，能实现对于页面元素的修饰

伪元素主要是用来创建一些不存在原有dom结构树种的元素

伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式

伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里

css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素

常见的伪类：
:link 应用于未被访问过的链接
:visited 应用于被访问过的链接
:hover 应用于鼠标悬停到的元素
:first-child 选择某元素第一个子元素
:last-child 选择最后一个
elem:nth-child(n) 选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。奇数：nth-child(odd) 偶数:nth-child(even)
elem:nth-last-child(n)作用同上,不过是从后开始查找。
elem:only-child如果elem是父元素下唯一的子元素，则选中之。
elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。
elem:first-of-type选中父元素下第一个elem类型元素。
elem:last-of-type选中父元素下最后一个elem类型元素。
elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。
:disabled 表单元素禁用
:enabled 匹配没有被禁用的元素
:checked单选框或复选框被选中。

常见的伪元素：
::first-letter 选择元素文本的第一个字
::first-line 选择元素文本的第一行
::before 在元素内容的最前面添加新内容
::after 在元素内容的最后面添加新内容
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标

CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？

CSS选择符：
id选择器（ #myid）
类选择器（.myclassname）
标签(元素)选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a:hover, li:nth-child）
伪元素选择器、分组选择器。

继承性
可继承的样式：

字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color

表格布局属性
caption-sideborder-collapseempty-cells

列表属性
list-style-type、list-style-image、list-style-position、list-style

光标属性
cursor

元素可见性
visibility

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

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

优先级算法计算
优先级就近原则，同权重情况下样式定义最近者为准
important>内联>ID>类|伪类|属性选择|伪对象>标签>继承>通配符
元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000,* 权重 0,继承的样式没有权重值。
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）

水平居中div

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

水平垂直居中一个浮动元素（position定位）
第一种：未知元素宽高

<div class="outer">
    <span>我想居中显示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute; 
        backgroond-color:red;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%); //这是关键
    }
</style>

第二种：已知元素宽高的

<div class="outer">
    <span>我想居中显示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute;
        background-color:red;
        width:150px;
        height:50px;
        top:50%;
        left:50%;
        margin:-25px 0px 0px -75px; //这是关键 上为自身高度的一半且为负值 左为自身宽度的一半且为负值
    }
</style>

绝对定位的div水平垂直居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}

如何垂直居中一个img（display : table-cell 或者 position定位）

<div class="outer">        
    <img src="nz.jpg" >    
</div>
<style>        
    .outer{            
        width: 300px;           
        height: 300px;            
        border: 1px solid #cccccc;            
        display: table-cell;            
        text-align: center;            
        vertical-align: middle;        
    }        
    img{            
        width: 150px;            
        height: 150px;        
    }    
</style>

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

inline默认。此元素会被显示为行内元素,不能设置宽度高度，并且能横向显示

block 此元素将显示为块级元素，还可以让元素控制元素显示,默认站宽一整行，能设置宽度高度，纵向排列

none 此元素不会被显示（隐藏）。

inline-block 行内块元素。能设置宽度高度并且横向显示

list-item此元素会作为列表显示。

table 此元素会作为块级表格来显示（类似table），表格前后带有换行符

flex代表的是触发弹性盒子

定位知道吗，说下，几种不同的定位分别有什么特点，详细说明

定位的含义是将元素放在指定的位置上，在css中特指position属性，他一共有5种属性值。

absolute
生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位.元素的位置通过 “left”,”top”, “right” 以及 “bottom” 属性进行规定。是基于最近的被设置了非静态定位的上级元素进行定位的，他会脱离文档流

fixed
生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。会脱离文档流.

relative
生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。因此，”left:20″ 会向元素的LEFT 位置添加 20 像素。

static
默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit: 规定应该从父元素继承 position 属性的值。

sticky 主要用在对scroll事件的监听上,粘性定位可以被认为是相对定位relative和固定定位fixed的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。该元素并不脱离文档流，仍然保留元素原本在文档流中的位置.
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

#one { position: sticky; top: 10px; }

在viewport视口滚动到元素top距离小于10px之前，元素为相对定位。之后，元素将固定在与顶部距离10px的位置，直到viewport视口回滚到阈值以下。

参照物问题

静态定位不会发生位置的调整所以不存在参照物的问题

相对定位添加偏移属性后，相对于自己原来的位置进行位置调整

绝对定位：如果父元素及外侧没有任何已经定位的元素，则参照浏览器屏幕左上角（body左上角）进行位置的调整；如果父元素或者是就近的父级元素有定位则相对于就进行元素的左上角进行位置的调整；绝对定位的参照物就是所谓的包含块的意思

固定定位：参照物是浏览器可视窗口位置的左上角进行位置调整，不会受到滚动条的滚动而影响

粘性定位：粘性定位参照物在实现固定吸顶效果的时候参照物与固定定位一样

CSS3有哪些新特性？

CSS选择器
1、p:first-of-type 选择属于其父元素的首个p元素的每个p元素。
2、p:last-of-type 选择属于其父元素的最后p元素的每个p元素。
3、p:only-of-type 选择属于其父元素唯一的p元素的每个p元素。
4、p:only-child 选择属于其父元素的唯一子元素的每个p元素。
5、p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。

盒子修饰
新增了边框属性：
1、border-radius
2、box-shadow 向方框添加一个或多个阴影
3、border-image

背景模块
1、background-size 规定背景图片的尺寸
2、background-origin 规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域。
3、background-clip

线性渐变（Linear Gradients）向下/向上/向左/向右/对角方向

文本效果
1、text-shadow 可向文本应用阴影
2、word-wrap 允许文本强制文本进行换行-即使这意味着会对单词进行拆分

CSS引入字体模块@font-face

transform 是向元素应用2D或者3D转换；
IE10：2D、3D都支持（2D IE9 需要前缀-ms-）；
Firefox：2D、3D都支持；
Chrome：2D、3D都支持（2D、3D需要前缀 -webkit-）
Safari：2D、3D都支持（2D、3D需要前缀 -webkit-）
Opera：只支持2D

过渡动画
1、transition 过渡属性
2、@keyframes 用于创建动画。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
3、animation 动画调用属性

多列布局(multi-column layout)

盒模型

flex布局

阴影和反射(Shadoweflect)

多媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性

用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

display:inline-block; 
/*为啥使用行内块元素,因为这样能与前面文本横向排列,避免浮动*/
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000; // 关键 底部有长度 三角形朝向是上 相反的方向

如何实现一个自适应的正方形

利用 CSS3 的 vw 单位

vw会把视口的宽度平均分为 100 份

.square {
 width: 10vw;
 height: 10vw;
 background: red;
}

利用 margin 或者 padding 的百分比计算是参照父元素的 width 属性

.square {
 width: 10%;
 padding-bottom: 10%; 
 height: 0; // 防止内容撑开多余的高度
 background: red;
}

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

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

display 属性规定元素应该生成的框的类型；

position属性规定元素的定位类型；

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

为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？

出现浮动的原因：
浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

关于css的定位机制:
普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。

浮动带来的问题：
浮动之后，后面的元素会上去补位置；导致父元素的高度降低，这种情况被称为：高度塌陷
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height，缺点是并不是所有元素的高度都是固定的

最后一个浮动元素后加空 div 标签并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）

包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。缺点：不能和position配合使用（不推荐）

使用after伪元素（推荐使用）
在父元素后添加伪元素

.father::after {  /*伪元素是行内元素 正常浏览器清楚浮动方法*/
    content: ‘ ’;
    display: block;
    clear: both;
    visibility:hidden;
}
.father {
    *zoom: 1;  /*IE6清楚浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

设置元素浮动后，该元素的 display 值是多少？

自动变成display:block

移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

head里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
CSS :
@media only screen and (max-device-width:480px) 
{
   /css样式/
}
@media属性主要有四种类型（包括screen）：

all—适用于所有设备。

print—打印预览模式/打印页面。

speech——适用于“朗读”页面的屏幕阅读器

screen——计算机屏幕（默认）

什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

其它 CSS 预处理器语言：

Sass（SCSS）

LESS

Stylus

Turbine

Swithch CSS

CSS Cacheer

DT CSS
为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

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

加载性能：
(1) css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。
(2) css单一样式：当需要下边距和左边距的时候，很多时候会选择使用margin:top 0 bottom 0；但margin-bottom:px;margin-left:px;执行效率会更高。
(3) 减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
(1) 关键选择器 (key selector) 。选择器的最后面的部分为关键选择器 (即用来匹配目标元素的部分) 。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
(2) 如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则 (这样样式系统就不会浪费时间去匹配它们了)
(3) 避免使用通配规则，如{}计算次数惊人，只对需要用到的元素进行选择。 (4) 尽量少的去对标签进行选择，而是用 class。 (5) 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。 (6) 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。 渲染性能： (1) 慎重使用高性能属性：浮动、定位。 (2) 尽量减少页面重排、重绘。 (3) 去除空规则:{ } 。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。 (4) 属性值为 0 时，不加单位。 (5) 属性值为浮动小数 0.*，可以省略小数点之前的 0。
(6) 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
(7) 不使用@import 前缀，它会影响 css 的加载速度。
(8) 选择器优化嵌套，尽量避免层级过深。
(9) css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，
再使用。
(10) 正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
(11) 不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能。
*可维护性、健壮性：*
(1) 将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用，提高css的可维护性。
(2) 样式与内容分离：将css代码定义到外部css中。

在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。
Windows自带的点阵宋体（中易宋体）从Vista开始只提供12、14、16px这三个大小的点阵，而13、15、17px时用的是小一号的点。（即每个字占的空间大了1px，但点阵没变），于是略显稀疏。
浏览器缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。

margin 和 padding 分别适合什么场景使用？

何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

浏览器兼容性问题
在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决

元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom,margin-left,margin-right 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
@media screen and ()

页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

meta viewport 有六个属性：

设置 viewport 的宽度：width

设置 viewport 的高度：height

设置页面的初始缩放值：initial-scale

允许用户最小缩放值：maximum-scale

允许用户最大缩放值: minimum-scale

是否允许用户进行缩放：user-scalable

3 个 viewport：

layout viewport：浏览器会默认将 viewport 设置成一个比可视区域更宽的值，这就是 layout viewport，其宽度通过 document.documentElement.clientWidth 来获取；

visual viewport：跟浏览器可视区域大小相同的值，其宽度通过 document.documentElement.innerWidth 来获取；

idea viewport：完美适配移动端的 viewport，无论在何种分辨率的屏幕下，针对 idea viewport 而设计的网站，不需要缩放和横向滚动条就可以完美呈现给用户。

响应式布局的优缺点

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

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

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

让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用
-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是 scroll 时候，必会出现滚动条。

参数是 auto 时候，子元素内容大于父元素时出现滚动条。

参数是 visible 时候，溢出的内容出现在父元素之外。

参数是 hidden 时候，溢出隐藏。

有哪项方式可以对一个 DOM 设置它的CSS样式？

外部样式表，引入一个外部css文件
内部样式表，将css代码放在标签内部
内联样式，将css样式直接定义在 HTML 元素内部

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性:
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的）。

常见的CSS布局单位

常用的布局单位包括像素(px),百分比(%),em,rem,vw/vh。

像素(px)是页面布局的基础，一个像素表示终端(电脑、手机、平板等)屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

百分比(%)，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
em：文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。具有继承特点,整个页面内em对应的值都不是固定的
rem：rem是CSS3新增的一个相对单位，相对于根元素(html元素)的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh 外，还有vmin和vmax两个相关的单位。
vw: 相对于视窗的宽度，视窗宽度是100vw；
vh: 相对于视窗的高度，视窗高度是100vh；
vmin: vw和vh中的较小值；
vmax: vw和vh中的较大值；

vw/vh和百分比很类似，两者的区别：

百分比(%)：大部分相对于祖先元素，也有相对于自身的情况比如(border-radius、translate等)

vw/vm：相对于视窗的尺寸

注意：vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的.

CSS引入的方式有哪些？使用Link和@import有什么区别？

内联，内嵌，外链，导入

相同:两者都是外部引用 CSS 的方式

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；

页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；

import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

如何水平并且垂直居中一张背景图

设置 background-position:center;

用于控制图像滚动的属性是什么？

background-attachment：该属性设置背景图像是随页面其余部分滚动还是固定滚动。

强制换行的css是什么？

Word-break:break-all;

请解释一下CSS3的Flexbox（弹性盒布局模型），以及适用场景？

Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flexcontainer），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称”项目”。
容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis），项目默认沿主轴排列。

场景应用

场景一：移动端和PC端布局中；能够高效解决间距调整的问题（移动端布局和PC端布局）

场景二：能快速高效实现元素水平垂直居中（点击删除的弹窗）

场景三：能够实现快速元素均分，避免了百分比设置的不确定性

场景四：快速实现多列布局，能高效实现瀑布流布局

场景五：后台管理系统的两栏和三栏布局

以下6个属性设置在容器上(父级)。
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上(子级)。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow默认值为0，当值大于0时，当父元素有剩余空间时当前元素放大，父元素没有剩余空间时，该元素不放大。
flex-shrnk默认值为1，父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
flex：1解析为flex：1 1 0%。
flex：auto解析为flex：1 1 auto。
flex：none解析为flex：0 0 auto。
flex：0 auto解析为flex：0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

说出space-between和space-around的区别？

这个是flex布局的内容，其实就是一个边距的区别，按水平布局来说，space-between是两端对齐，在左右两侧没有边距,而space-around是每个子项目左右方向的margin相等，所以两个item中间的间距会比较大。

浏览器是怎样解析 CSS 选择器的？

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

抽离样式模块怎么写，说出思路，有无实践经验？

我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放进业务相关的库里面做成对应功能的模块儿。

为什么不建议使用统配符初始化 css 样式

*{
  padding:0;
  margin:0;
}

这样的写法好处是写起来很简单，但是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。

出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符*来初始化。

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

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

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

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

使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。

word-spacing 与单词间距？

letter-spacing作用于所有字符,但word-spacing仅作用于空格字符.换句话说,word-spacing的作用就是增加空格的间隙宽度.

隐藏元素的 background-image 到底加不加载？

根据测试,一个元素如果display计算值为none，
在IE浏览器下(IE8～IE11,更高版本不确定)依然会发送图片请求，
Firefox浏览器不会,
至于Chrome和Safari浏览器则似乎更加智能一点：如果隐藏元素同时又设置了background-image，则图片依然会去加载；如果是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使用的。

什么是块级格式化上下文(BFC),如何工作？

相关概念

Box:Box是CSS布局的对象和基本单位，⼀个页面是由很多个Box组成的，这个Box就是我们所说的盒模型。

Formatting context：块级上下文格式化，它是页面中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

1. 规范解释

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2. 通俗解释

BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则该元素中的布局不受外部影响。

浮动元素会创建BFC，所以浮动元素内部子元素主要受浮动元素影响，两个浮动元素之间是互不影响的。

BFC中的内容不会与外面的浮动元素重叠。
计算 BFC 的高度需要包括 BFC 内的浮动子元素的高度。

3. 创建方式

根元素或包含根元素的元素 (body)
浮动元素float ＝ left | right 或 inherit（≠ none）
绝对定位元素position ＝ absolute 或 fixed
display ＝ inline-block | flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll (≠ visible)
4. 特点

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

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

每个元素的margin的左边，与包含块border的左边相接触。

BFC的区域不会与浮动的容器重叠。

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

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

5.常见的BFC应用有：

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了margin重叠的问题。

解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。

创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

z-index的使用

z-index是用于设置标签的层级关系，使用z-index的时候需要同时设置标签的position属性（如relative或者absolute或者fixed都可），标签的默认z-index为0，可以设置负数，值越大，越在外面
层叠上下文在z轴上高人一等，只要z-index生效，那么这个元素就含有层叠上下文
层叠水平指的是同一个层叠上下文中元素在z轴上的显示顺序，任何元素都有层叠水平
层叠顺序（表示元素发生层叠时有着特定的垂直显示顺序,对层叠水平制定的明确规则）：记住下面这张图

对于上图，由上到下分别是：
(1) 背景和边框：建立当前层叠上下文元素的背景和边框。
(2) 负的z-index：当前层叠上下文中，z-index属性值为负的元素。
(3) 块级盒：文档流内非行内级非定位后代元素。
(4) 浮动盒：非定位浮动元素。
(5) 行内盒：文档流内行内级非定位后代元素。
(6) z-index:0：层叠级数为0的定位元素。
(7) 正z-index：z-index属性值为正的定位元素。
注意: 当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为0，不会建立新的层叠上下文，除非是根元素。

注意两点:

这是同一个层叠上下文中元素的层叠顺序的比较，其中inline/inline-block属于网页内容部分，层叠顺序比网页布局更高；

同一个层叠上下文中，其他元素会显示在包含层叠上下文元素的background/border之上。

z-index在CSS3中生效范围

定位元素，z-index值不为auto；

z-index值为数字（不为 auto），父元素为flex项；

元素opacity不为1；

元素transform不为none;

filter不为none；滤镜

will-change属性为上面任意一个。

意味着只要z-index在以上的使用范围中，就会为使用它的元素生成一个层叠上下文，这也是定位元素在z轴上显示的优先级高的原因，而不在使用范围内的话，设置z-index属性无效。

两个黄金准则：
谁大谁上：在同一个层叠上下文领域，层叠水平高的覆盖低的；
后来居上：当元素的层叠水平相同时，在DOM流中处于后面的元素会覆盖前面的元素。

float的使用

float使元素脱离了文档流按照指定的方向发生了移动,直到它的外边缘碰到包含框或者另一个浮动的边框为止.浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的.
如果父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示.以换行的那个元素为基准,如果有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素”卡住”

普通文档流：块级/浮动/内联元素发生重叠发生在如 margin-left 为负值时，那么就遵循以上层叠顺序规律。
普通文档流中遵循：“后来者居上和谁大谁上的黄金准则”。
当两个元素都为块元素时，默认越后面的元素层级越高，但是背景的层级比文字小。后来的块元素也盖不住前面的文字。
当两个元素都为行内块和行内元素时，也是后来的元素比前面的元素层级高，但是与块元素不同的是行内块元素的背景层级比文字高，会盖住前面的文字。

旋转动画会涉及css的两个属性

transition：动画属性，可以写四个值：分别为对应动画的属性名称或者直接设置all、动画完成的时间（单位为s或者ms）、动画的变化曲线、动画开始的时间
transform：旋转属性主要有rotate（弧度旋转分别还有rotate3d，rotateX，rotateY，rotateZ），translate（同理有四个），scale（同理有四个）

grid网格布局

设置盒子的网格布局需要设置display为grid或者line-grid，其对应包括以下属性：

grid-template-columns：定义每一列的宽度

grid-template-rows：定义每一行的高度

grid-row-gap：定义行之间的间隙

grid-column-gap：定义列之间的间隙

grid-gap：定义行和列之间的间隙缩写

grid-teamplate-areas：定义一个区域由多个单元格组成

grid-auto-flow：定义容器排列顺序

justify-items：定义子元素的内容水平排列顺序

align-items：定义子元素的内容垂直排列顺序

place-items：定义子元素的内容水平和垂直顺序的缩写方式

justify-content：定义容器（网格）的水平排列顺序

align-content：定义容器（网格）的垂直排列顺序

place-content：定义容器的水平和垂直排列顺序的缩写方式

子元素的属性包括：

grid-column-start：列开始的位置

grid-column-end：列结束的位置

grid-row-start：行开始的位置

grid-row-end：行结束的位置

grid-column：列开始和结束位置

grid-row：行开始和结束的位置

grid-area：定义元素放置在哪个区域

justify-self：定义元素自己的水平排列方式

align-self：定义元素自己的垂直排列方式

place-self：定义元素自己的水平和垂直排列方式
:warning:：当设置为网格布局后，子元素的float，inline-block，table-cell，column-*属性全部失效

常见居中方案

行内元素水平居中：直接使用text-align：center
行内元素垂直居中：vertical-align：middle并设置父级元素的行高为父级元素的高度
固定宽度的元素水平居中使用：magin：0 auto
flex弹性布局：设置justify-content：center水平居中，align-items：垂直居中
通过padding属性进行垂直居中
设置父级元素为：display：table-cell，vertical-align：middle
通过伪元素设置垂直居中：设置父级元素一个伪元素并设置其为inline-block，同时设置vertical-align：middle
高度确定的时候：绝对定位+margin来垂直居中
高度不确定的时候:绝对定位+transform,具体为:设置需要垂直居中的元素为:position:absolute,top:50%,transform:translateY(-50%)
通过flex-duration:column来垂直居中:display:flex,flex-duration:column,justify-content:center

水平垂直居中方法：

父级元素高度已知，子元素高宽固定（高度可不固定）：text-align：center，line-height：父级高度。
绝对定位+margin实现垂直水平居中，需要知道子元素高宽度。
绝对定位+transform实现垂直水平居中，可以不知道子元素高宽度：position：absolute；top：50%；left：50%；transform：translate（-50%，-50%）
使用display为table，父元素为display：table-cell；vertical-align：center；text-align：center，子元素设置为vertical-align：center
使用父元素的伪元素进行垂直居中（父元素需要知道高度），设置伪元素的高度为100%，并设置vertical-align：middle，display：inline-block；子元素设置vertical-align：center；display：inline-block（子元素水平居中可以采用text-align：center或者margin：0 auto）
已知子元素的宽和高:子元素设置为margin：auto；position：absolute；top：0；left：0；right：0；bottom：0；父元素设置为position:relative(absolute、fixed)

less和sass的用法及比较

Less环境较Sass简单
Sass的安装需要安装Ruby环境，Less基于Javascript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中。
Less使用较Sass简单
Less并没有裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。
Sass功能较Less强大

sass有变量和作用域
sass有函数的概念
进程控制：条件、循环遍历、继承、引用
数据结构：数组、map

.sass：需要严格的遵循缩进的语法规则，不带{}和分号；例如：

 div 
    font-size: 24px

.scss：是sass语法进行改良后的语法，兼容原来的语法，只是将原来的缩进排版方式改成了熟悉的{}，扩展名改为.scss；例如：

div{
    font-size: 24px;
}

Less和Sass处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$

共同点

混入(Mixins)——class中的class；

参数混入——可以传递参数的class，就像函数一样；

嵌套规则——Class中嵌套class，从而减少重复的代码；

运算——CSS中用上数学；

颜色功能——可以编辑颜色；

名字空间(namespace)——分组样式，从而可以被调用；

作用域——局部修改样式；

JavaScript 赋值——在CSS中使用JavaScript表达式赋值;

IFC、BFC边距重叠问题,三种边距重叠的情况

父子元素，父元素的高度跟子元素重叠，解决方法是为父元素创建一个 BFC；
兄弟元素，比如一个有上边距，一个有下边距，这个时候会发生重叠，重叠的原则是取最大值，解决方法是给其中一个元素增加一个父元素，为这个父元素创建一个 BFC；
空元素同时有 marging-top 和 marging-bottom 时，会取一个最大值作为边距，解决方法是为空元素创建一个 BFC。

介绍下 BFC、IFC、GFC 和 FFC

BFC：块级格式上下文，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。
IFC：行内格式化上下文，将一块区域以行内元素的形式来格式化。
GFC：网格布局格式化上下文，将一块区域以 grid 网格的形式来格式化
FFC：弹性格式化上下文，将一块区域以弹性盒的形式来格式化

rem布局的优缺点

相对于em的好处是不会发生逐渐增大或者减小字体尺寸的情况，因为始终继承根元素的字体尺寸；

rem 单位不仅可应用于字体大小，还可以用于设定宽高等其他大小，使页面可以适配不同屏幕尺寸。

rem 一般只用于移动端

相邻的两个inline-block为什么会出现间距，该如何解决

display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。

消除间隙的方法:
1.将html标签要display:inline-block的元素写在一行。缺点：代码可读性差。
2.对父元素添加font-size:0;将字体大小设置为0，换行符也会为0px，从而消除间隙，再为inline-block 元素设置我们需要的字体大小；缺点:是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-size,增加了代码量。
3.将inline-block的margin-right/left设置为-4px；但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，所以这个方法不通用。
4.设置父元素display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。
5.给元素设置float:left,缺点需要清除浮动。

inline-block还有两个问题：即不同高度的两个inline-block顶部不对齐，以及inline-block底部多出几像素（多出空白）。解决方法是为inline-block元素设置vertical-align:top。

1px边框问题

边框粗细原因
在移动端下设置border为1px，在某些设备上看比1px粗。
这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。

devicePixelRatio的官方的定义为：设备物理像素和设备逻辑像素的比例，也就是devicePixelRatio = 物理像素(设备像素) / 逻辑像素(CSS像素)。

解决办法

使用border-image实现
根据需求选择图片，然后根据css的border-image属性设置。代码如下

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}

【解释】border-width指定边框的宽度，可以设定四个值，分别为上右下左border-width: top right bottom left。
border-image该例意为：距离图片上方2px（属性值上没有单位）裁剪边框图片作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框，以拉伸方式展示
结合起来就是：在边框图片中，裁剪图片上下方的2个像素宽度作为上下边框，并展示在宽度为1个像素的边框空间里。左右没有边框。注意这里的1个像素是特殊的，专指物理像素，而平时设定的长宽1px则表示逻辑像素（该观点为个人理解）。

当然，这种方式引入了图片，我们还能将图片装换成base64形式表现

优点：可以设置单条、多条表框。缺点：更换颜色和样式麻烦，某些设备上会模糊

使用background-image实现

除了使用图片外，当然也能使用纯css来实现，百度糯米团就是采用的这种方案。

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

【思路】将原本1个物理像素的边框大小利用线性渐变分割成几个部分（百分比控制），实现小于1像素效果
【解释】linear-gradient指定线性渐变，接受大于等于3个参数，第一个为渐变旋转角度，第二个开始为渐变的颜色和到哪个位置（百分比）全部变为该颜色，该例子中，第一句就是，渐变方向旋转180度，即从上往下（默认为0度从下往上），从红色开始渐变，到50%的位置还是红色，再渐变为继承父元素颜色。

【缺点】因为每个边框都是线性渐变颜色实现，因此无法实现圆角

使用box-shadow模拟边框
代码如下

.box-shadow-1px {
  box-shadow:0px -1px 1px -1px #c8c7cc;
}

参数分别表示: 水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，将外部阴影改为内部阴影，后四个可选。该例中为何将阴影尺寸设置为负数？设置成-1px 是为了让阴影尺寸稍小于div元素尺寸，这样左右两边的阴影就不会暴露出来，实现只有底部一边有阴影的效果。从而实现分割线效果（单边边框）。

优点：代码少，兼容性好。缺点：边框有阴影，颜色变浅。

transform: scale(0.5) 方案 – 推荐: 很灵活

其实1像素问题的产生基本发生在设置边框或分割线的时候，场景并不覆盖全局样式，因此，直接缩放需要设置的元素，才是我们真正需要的。tranform就能实现这个需求。

设置height: 1px，根据媒体查询结合transform缩放为相应尺寸。

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

用::after和::before,设置border-bottom：1px solid #000,然后再缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

div::after{
    content:'';
    width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}

用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5);

优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

媒体查询 + transfrom 优化

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

通过 viewport + rem 实现

该方案是对下述第六方案的优化，整体思路就是利用viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示。在页面初始化时，在头部引入原始默认状态如下：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

接下来的任务就是js的动态修改缩放比以及实现rem根元素字体大小的设置。

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

【缺点】以为缩放涉及全局的rem单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。

媒体查询利用设备像素比缩放,设置小数像素

IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样

.border { 
  border: 1px solid #999;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border { 
    border: 0.5px solid #999; 
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border {
    border: 0.333333px solid #999 
  }
}

或者可以先在JS中拿到window.devicePixelRatio的值，然后把这个值通过JSX或者模板语法给到CSS的data里，达到这样的效果(这里用JSX语法做示范)：

<div id="container" data-device={{window.devicePixelRatio}}></div>

然后就可以在CSS中用属性选择器来命中devicePixelRatio为某一值的情况，比如说这里尝试命中devicePixelRatio为2的情况：

#container[data-device="2"]{
    border:0.5px solid #333;
}

[缺点]这种方法的缺陷在于兼容性不行，IOS系统需要8及以上的版本，安卓系统则直接不兼容。

css布局

单列布局

header,content和footer等宽的单列布局
header与footer等宽,content略窄的单列布局

对于第一种，先通过对header,content,footer统一设置width：1000px;
或者max-width：1000px
(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);
然后设置margin:auto实现居中即可得到。

对于第二种，header、footer的内容宽度不设置，块级元素充满整个屏幕，
但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。

两列自适应布局
两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

float+overflow:hidden

如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。具体代码如下：

注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容

Flex布局
Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

//html部分同上
.parent {
  display:flex;
}  
.right{
  margin-left:20px; 
  flex:1; //重点内容 填充剩余部分
}

grid布局
Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

//html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px;
}

absolute定位和margin值实现

 <style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        position: absolute;
    }
    .right {
        height: 100%;
        background: pink;
        margin-left: 200px;
    }
</style>

calc(100% – 固定内容的宽度) 用calc函数动态计算数值

 <style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        float: left;
    }
    .right {
        height: 100%;
        background: pink;
        float: left;
        width: calc(100% - 200px);
    }
</style>

方法五：使用table和table-cell实现

 <style>
     .content {
         border: 1px solid #000;
         width: 100%;
         height: 800px;
         display: table;
     }
     .left {
         width: 200px;
         height: 100%;
         background: red;
         display: table-cell;
     }
     .right {
         height: 100%;
         background: pink;
         display: table-cell;
     }
</style>

三栏布局
特征：中间列自适应宽度，旁边两侧固定宽度

圣杯布局

比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。

.container{
    padding-left: 220px;//为左右栏腾出空间
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }
<article class="container">
    <div class="center">
      <h2>圣杯布局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </article>

实现步骤

三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行

通过设置margin-left为负值让left和right部分回到与center部分同一行

通过设置父容器的padding-left和padding-right，让左右两边留出间隙。

通过设置相对定位，让left和right部分移动到两边。

缺点

center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行

如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决，下文会介绍)

双飞翼布局
同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

    .container {
        min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
    <article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

实现步骤(前两步与圣杯布局一样)

三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；

通过设置margin-left为负值让left和right部分回到与center部分同一行；

center部分增加一个内层div，并设margin: 0 200px；

缺点

多加一层 dom 树节点，增加渲染树生成的计算量。

两种布局实现方式对比:

两种布局方式都是把主列放在文档流最前面，使主列优先加载。

两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位；双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

等高布局
等高布局是指子元素在父元素中高度相等的布局方式。

利用正padding+负margin

我们通过等布局便可解决圣杯布局的第二点缺点，因为背景是在 padding 区域显示的，设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。

    .center,
    .left,
    .right{
      padding-bottom: 10000px;
      margin-bottom: -10000px;
    }
    .container{
      padding-left: 220px;
      padding-right: 220px;
      overflow: hidden;//把溢出背景切掉
    }

粘连布局
特点

有一块内容main，当main的高度足够长的时候，紧跟在main后面的元素footer会跟在元素的后面。

当main元素比较短的时候(比如小于屏幕的高度),我们期望这个footer元素能够“粘连”在屏幕的底部

    <head>
    <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body{
      height: 100%;//高度一层层继承下来
    }
    #wrap{
      min-height: 100%;
      background: pink;
      text-align: center;
      overflow: hidden;
    }
    #wrap .main{
      padding-bottom: 50px;
    }
    #footer{
      height: 50px;
      line-height: 50px;
      background: deeppink;
      text-align: center;
      margin-top: -50px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
      <div class="main">
        main <br />
        main <br />
        main <br />
      </div>
    </div>
    <div id="footer">footer</div>
    </body>

浏览器渲染机制，重绘和回流

浏览器渲染机制

浏览器采用流式布局

浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就形成渲染树

有了渲染树，我们就知道所有节点的样式，然后计算他们在页面上的大小和位置，把它们绘制到页面上

注意：浏览器采用流式布局，对渲染树的计算只需要遍历一次就能完成，但table布局除外，他需要花费3倍的时间，所以我们要尽量避免使用table布局

重绘

元素样式发生变化，但是不影响页面整个布局的情况下会进行重绘，如outline、visibility、color、background-color等

回流

影响部分或全部页面的布局时，会进行回流，回流的代价比重绘高，回流一定会引起重绘，但重绘不一定会引起回流

浏览器优化

浏览器是通过队列机制来批量更新布局，浏览器刷新频率为（60帧/s）,每刷新一次需要16.6ms，也就是说16.6ms浏览器会清空队列，但是在我们获取布局信息的时候，有一些属性或方法会强制浏览器刷新，触发重绘和回流并且清空队列

所以我们要尽量少使用以上属性和方法

减少重绘和回流

使用transform代替top

使用visibility(只触发重绘)代替display(触发回流)

尽可能在DOM树的末端改变class，影响尽量少的节点

css选择器尽量不要嵌套过深，从右往左匹配

动画效果最好添加到position：absolute或fixed的元素上，不影响其他元素，只引发重绘，不引发回流，控制动画的速度可以使用requestAnimationFrame()

避免使用css表达式，calc()会引发回流

将频繁重绘或回流的节点设置为图层，如：will-change，video，iframe，canvas，防止影响别的节点

CSS3硬件加速，transform，opacity等不会引起回流重绘

通过createDocumentFragment创建一个游离于DOM树之外的节点，然后在此节点上批量操作，最后插入DOM树中，因此只触发一次重排
var fragment = document.createDocumentFragment();
for (let i = 0;i<10;i++){
 let node = document.createElement("p");
 node.innerHTML = i;
 fragment.appendChild(node);
}
document.body.appendChild(fragment);

如何触发重排和重绘？

当影响DOM元素可见性的属性发生变化(如color)时, 浏览器会重新描绘相应的元素,此过程被称之为重绘（Repaint)，

当涉及到DOM节点(页面的结构)的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫重排（Reflow）
参考答案：
任何改变用来构建渲染树的信息都会导致一次重排或重绘：

添加、删除、更新DOM节点

通过display: none隐藏一个DOM节点-触发重排和重绘

通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化

移动或者给页面中的DOM节点添加动画

添加一个样式表，调整样式属性

用户行为，例如调整窗口大小，改变字号，或者滚动。

重绘不一定需要重排，重排必然会导致重绘，重排成本比重绘成本高得多，因为一个节点的重排可能导致子节点、兄弟节点或祖先节点的重排，所以我们要尽可能减少重排次数、重排范围。

常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。解决办法是加一个全局的*{margin:0;padding:0;} 来统一；

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了，因为被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A :

a:link {} 
a:visited {} 
a:hover {} 
a:active {}

IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法：（条件注释）
缺点：是在IE浏览器下可能会增加额外的HTTP请求数。

CSS里的 visibility 属性有个 collapse 属性值是干吗用的？在不同浏览器下以后什么区别？

当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟 display: none 一样，也就是说，它们占用的空间也会释放。

在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。

在火狐浏览器、Opera和IE11里，使用 collapse 值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

overflow：hidden；transition：all 1000ms ease；

视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器

jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高

插件实现方式
例如：parallax-scrolling，兼容性十分好

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

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

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。

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

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

CSS Sprites是什么？它的优势和劣势？

CSS Sprites小图片背景共享技术（精灵图/雪碧图）。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

优势：

很好的减少网页的请求，大大提高页面的性能；

减少图片的字节；

解决了网页设计师在图片命名上的困扰；

更换风格方便，维护方便。

劣势：

图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；

开发较麻烦，测量繁琐；（可使用样式生成器）

维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。

base64是什么?

是网络上最常见的用于传输8Bit字节代码的编码方式之一，将原本二进制形式转成以64个字符基本单位，所组成的一串字符串。base64的图片会随着html或者css一起下载到浏览器,减少了请求，避免跨域问题，但是低版本的IE浏览器不兼容，体积比原来的图片大，不利于css的加载，所以如果是图比较大，就用精灵图合并为一张大图，使用base64直接把图片编码成字符串写入CSS文件

什么是 Css Hack？

解决各浏览器对 CSS 解释不同所采取的，区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack.

css Hack分类(CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack)

属性前缀法(即类内部Hack)：例如 IE6能识别下划线和星号“*”，IE7能识别星号“*”，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child + html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

什么是外边距重叠？重叠的结果是什么？怎样解决

外边距重叠就是 margin-collapse。

在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

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

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

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

相邻垂直的兄弟盒子：
只设置一个盒子的外边距
父子盒子外边距重叠：
将父盒子或子盒子设计为BFC容器（overflow只能设置在父盒子上）
- float 除 none 以外的值
- position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
将父子盒子的margin值隔离
- 给父盒子设置padding、border：1px

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

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

文字如何加下划线，上划线，删除线

text-decoration : underline | overline | line-through

清除列表符号，背景改成图片

list-style:none;
background-image:url()

offsetWidth offsetHeight clientWidth clientHeight 的区别

offsetWidth：content宽度 + padding宽度 + border宽度

offsetHeight：content高度 + padding高度 + border高度

clientWidth：content宽度 + padding宽度

clientHeight：content高度 + padding高度

css文本溢出

单行

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;

兼容

 p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

## 重绘与重排的区别？

重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素

由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

## 如何优化图片

对于很多装饰类图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替。

对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。

小图使用 base64 格式

将多个图标文件整合到一张图片中（雪碧图）

选择正确的图片格式：

对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好

小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替

照片使用 JPEG

## 已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

 <img src="1.jpg" style="width:480px!important;”>

css方法

max-width:300px; 覆盖其样式

transform: scale(0.625) 按比例缩放图片；

利用 CSS 动画的样式优先级高于 !important 的特性

js方法

document.getElementsByTagName(“img”)[0].setAttribute(“style”,“width:300px!important;”)

## css reset 和 normalize.css 有什么区别？

参考答案：

两者都是通过重置样式，保持浏览器样式的一致性

前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致

后者修复了常见的桌面端和移动端浏览器的 bug：包含了 HTML5 元素的显示设置、预格式化文字的font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。

前者中含有大段的继承链

后者模块化，文档较前者来说丰富

bootstrap 响应式的原理是什么

bootstrap 使用的是栅格布局。栅格布局的实现原理，是通过定义容器大小，平分 12 份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

CSS 的计算属性知道吗

即 calc( ) 函数，主要用于指定元素的长度，支持所有 CSS 长度单位，运算符前后都需要保留一个空格。比如： width: calc(100% – 50px);

background-size 有哪 4 种值类型？

background-size: length|percentage|cover|contain;

length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为“auto(自动)”

cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

transition、transform、animation 的区别？

transition：过渡效果，它有4个属性：
transition: property duration timing-function delay;
property ：css属性的名称

duration ：多长时间完成

timing-function：转速曲线

delay：开始的时候。

transform：应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

旋转：rotate

缩放：scale

移动：translate

倾斜：skew

animate:应用动画效果。语法如下：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation:复合属性
name 规定需要绑定到选择器的keyframe名称。
duration 规定完成动画所花费的时间，以秒或毫秒计。
timing-function 规定动画的速度曲线。

linear 规定以相同速度开始至结束的过渡效果。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。

delay 规定在动画开始之前的延迟。
iteration-count 规定动画应该播放的次数。

n 一个数字，定义应该播放多少次动画

infinite 指定动画应该播放无限次

direction 规定是否应该轮流反向播放动画。

normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后，动画将应用该属性值。
backwards 动画将应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值。
both 动画遵循forwards和backwards的规则。也就是说，动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性.

play-state属性指定动画是否正在运行或已暂停。

paused 指定暂停动画
running 指定正在运行的动画

form 初始状态
to 结束装填
可以替换成
0% 初始状态
100% 结束状态
后面的百分比可以称之为关键帧动画

transition 和 animation 的区别以及应用场景？

参考答案：

区别：

触发条件不同。transition 通常需要交互，由事件触发。animation 则与 gif 动图差不多，立即播放。

循环。animation 可以设定循环次数。

精确性。animation 可以设定每一帧的样式和时间，其中的每一帧都可以有单独的变化。而 transition 中的所有样式都是一起变化的。

与 JS 的交互。使用 JS 去操作时，transition 更多。

应用场景：

如果需要灵活定制多帧以及循环，使用 animation 。

如果只是简单的从 XX 样式变到 XX 样式，两者皆可。

如果要使用 JS 设定动画，使用 transition 。

margin padding(内外边距)取值 1 2 3 4 参数分别表示什么意思?

参考答案

1个值： margin {10px;} 表示上右下左

2个值： margin {10px 20px ;} 表示上下左右

3个值： margin {10px 20px 30px;} 表示上左右下

4个值： margin {10px 20px 30px 40px ;} 表示上右下左

如何在CSS中使用box-shadow？

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

浏览器前缀

-webkit- （Chrome，Safari，Opera的较新版本，几乎所有的iOS浏览器（包括Firefox for iOS）；基本上是任何基于WebKit的浏览器）
-moz- （Firefox）
-o- （旧的，WebKit之前的Opera版本）
-ms- （Internet Explorer和Microsoft Edge）

display的block、inline和inline-block的区别

block：会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
inline：元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

行内元素
设置宽高无效；
可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的padding 和 margin；
不会自动换行；

块级元素
可以设置宽高；
设置 margin 和 padding 都有效；
可以自动换行；
多个块状，默认排列从上到下。

对CSS工程化的理解

CSS工程化是为了解决以下问题：
1.宏观设计：CSS代码如何组织、如何拆分、模块结构怎样设计？
2.编码优化：怎样写出更好的CSS？
3.构建：如何处理我的CSS,才能让它的打包结果最优？
4.可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的CSS工程化实践：

预处理器：Less,Sass等；

重要的工程化插件:PostCss；

Webpack loader等。

基于这三个方向，可以衍生出一些具有典型意义的子问题，这里我们逐个来看：

(1) 预处理器：为什么要用预处理器？它的出现是为了解决什么问题？
预处理器，其实就是CSS 世界的“轮子” 。预处理器支持我们写一种类似CSS、但实际并不是CSS的语言，然后把它编译成CSS代码：

那为什么写CSS代码写得好好的，偏偏要转去写“类CSS”呢？这就和本来用JS也可以实现所有功能，但最后却写 React的jsx或者Vue的模板语法一样——为了爽！要想知道有了预处理器有多爽，首先要知道的是传统CSS有多不爽。随着前端业务复杂度的提高，前端工程中对CSS提出了以下的诉求：

1.宏观设计上：我们希望能优化CSS文件的目录结构，对现有的CSS文件实现复用；

2.编码优化上：我们希望能写出结构清晰、简明易懂的CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；

3.可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。

这三点是传统CSS所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性：

嵌套代码的能力，通过嵌套来反映不同css属性之间的层级关系；支持定义css变量；
提供计算函数；
允许对代码片段进行extend和mixin；
支持循环语句的使用；
支持将CSS文件模块化，实现复用。

PostCss：PostCss是如何工作的？我们在什么场景下会使用PostCss？

PostCss仍然是一个对CSS进行解析和处理的工具，它会对CSS做这样的事情：

它和预处理器的不同就在于，预处理器处理的是类CSS，而PostCss处理的就是CSS本身。Babel可以将高版本的JS代码转换为低版本的JS代码。PostCss做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于PostCss有着强大的插件机制，支
持各种各样的扩展，极大地强化了CSS的能力。

PostCss在业务中的使用场景非常多：

提高CSS代码的可读性：PostCss其实可以做类似预处理器能做的工作；

当我们的CSS代码需要适配低版本浏览器时，PostCss的Autoprefixer插件可以帮助我们自动增加浏览器前缀；

允许我们编写面向未来的CSS：PostCss能够帮助我们编译CSS next代码；

Webpack能处理CSS吗？如何实现？

Webpack在裸奔的状态下，是不能处理CSS的，Webpack本身是一个面向JavaScript且只能处理JavaScript代码的模块化打包工具；

Webpack在loader的辅助下，是可以处理CSS的。

如何用Webpack实现对CSS的处理：

Webpack中操作CSS需要使用的两个关键的loader:css-loader和style-loader;

css-loader:导入CSS模块，对CSS代码进行编译处理；

style-loader：创建style标签，把CSS内容写入标签。

在实际使用中，css-loader的执行顺序一定要安排在style-loader的前面。因为只有完成了编译过程，才可以对css代码进行插入;若提前插入了未编译的代码，那么webpack是无法理解这坨东西的，它会无情报错。

简单的一个盒子移动到另一个盒子,你用什么方式实现动画效果

方法一:使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置

方法二:使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现

方法三:复杂方法，可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动

<script>
    //获取元素
    //设置x和y的值
    //绑定鼠标移入事件==缓慢移动  x的位置进行移动  自减
    //绑定鼠标移出事件==缓慢移动  x的位置进行移动  自增
</script>

CSS的基本语句构成是？

CSS被称之为：层叠样式表（Cascading Style Sheets)是对页面结构的一种修饰；

CSS的基本语法是:选择器{属性:属性值;属性:属性值;属性:属性值}

CSS基本语法构成两个部分组成：选择器和{}样式规则（样式声明）组成；样式规则（样式声明）由两个部分组成的分别是属性和属性值；

使用CSS语法注意事项是:

属性和属性值使用（：）链接

属性和属性值结束之后需要使用（；）结束

如果属性和属性值是最后一组的话可以不用分号结束；但是建议添加上为了防止后面继续添加属性

css复用

CSS复用代表的是CSS的重复使用，主要是为了做到网站开发的优化，可以简化多重CSS

CSS复习：目的是为了创建一套可以不依赖内容的可重复使用的类名及公共的样式, 沿着复用这条思路走下去,久而久之基本可以构建一套全新的 UI 组件库而无需编写过多新的 CSS。

例如：我们在单位中实际开发的时候经常使用的公共样式表，重置样式表是一样的道理

css选择器有哪些(详细)?

基础选择器

通配符选择器 *{}
标签选择器标签名 p{}
class类选择器 .class属性值{}
多类名选择器 .类名n{} 标签中class属性为 class=”类名1 类名2 … 类名n”
id选择器 #id属性值{}
群组选择器选择器1,选择器2,…{}

结构选择器

子元素选择器E>F{} F必须是E的子元素
后代选择器E F{} F必须是E的后代
相邻兄弟选择器E+F{} F是紧挨这E后面的兄弟元素
通用选择器E~F{} F是E后面所有的兄弟元素

属性选择器

[Eattr] 元素E中存在attr属性
[Eattr=”value”] 元素E中存在attr属性,并且attr的属性值为value
[Eattr~=”value”] 元素E中存在attr属性,并且attr的属性值为value或者”value value1 …”的形式
[Eattr^=”value”] 元素E中存在attr属性,并且attr的属性值以value开始
[Eattr$=”value”] 元素E中存在attr属性,并且attr的属性值以value结尾
[Eattr*=”value”] 元素E中存在attr属性,并且attr的属性值存在value
[Eattr|=”value”] 元素E中存在attr属性,并且attr的属性值为value或者value-的形式

结构伪类选择器

X:first-child 匹配子集的第一个元素
X:last-child 匹配父元素中最后一个X元素
X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始
X:only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素

目标伪类

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

UI状态伪类

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分

否定伪类

E:not(s) （IE6-8浏览器不支持:not()选择器。）匹配所有不匹配简单选择符s的元素E

动态伪类

E:link 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active 用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover 用户行为选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器选择匹配的E元素，而且匹配元素获取焦点

img属于什么元素

浏览器中的computed计算属性中的图片的display的取值为inline，虽然为inline但是实际开发的时候图片是作为行内块元素进行使用的，因为遵循能设置宽度高度，并且还能横向显示；所以属于行内块元素.

知道渐变嘛，说下你的了解

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但通过使用CSS3渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3定义了两种类型的渐变（gradients）：使用都是background属性
一、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 基本语法:background-image: linear-gradient(direction, color-stop1, color-stop2, …);
二、径向渐变（Radial Gradients）- 由它们的中心定义
-基本语法:background-image:radial-gradient(shape size at position,start-color, …,last-color);
- 为了创建一个径向渐变，你也必须至少定义两种颜色节点。
- 颜色节点即你想要呈现平稳过渡的颜色。
- 同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）
- size的取值closest-side,farthest-side,closest-corner,farthest-corner
三、重复渐变
- repeating-linear-gradient()函数用于重复线性渐变：
  css #grad { /* 标准的语法 */ background-image:repeating-linear-gradient(red,yellow 10%, green 20%); }
- repeating-radial-gradient()函数用于重复径向渐变：
  css #grad { background-image:repeating-radial-gradient(red, yellow 10%, green 15%); }

一条0.5px的线，几种方法

方法一：采用meta viewport的方式

  <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
  <!--
  这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px,要记得viewport只针对于移动端，只在移动端上才能看到效果
  -->

方法二：采用transform:scale()的方式
transform:scale(0.5,0.5);
方法三：直接利用边框
border:0.5px solid red;//ios8以上支持，以下显示为0
方法四：渐变模拟：设置1px通过css实现的背景图片，50%有颜色，50%透明。

.border {
background-image:linear-gradient(180deg,red,red 50%,transparent 50%), linear-gradient(270deg,red,red 50%,transparent 50%), 
linear-gradient(0deg,red,red 50%,transparent 50%), 
linear-gradient(90deg,red,red 50%,transparent 50%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
  }
  /*
  优点：兼容性较好，单边框、多边框可实现，大小、颜色可配置。
  缺点：代码量多、无法实现圆角、同时占用了背景样式
  */

方法五：利用阴影

  -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
  /*
  利用 css 对阴影处理的方式模拟。 
  优点：兼容性较好，单边框、多边框、圆角可实现，大小、颜色、可配置。 
  缺点：模拟效果强差人意，颜色不好配置。
  */

方法六：边框图片:

  border-image:url() 2 0 stretch;border-width:0 0 1px; 
  /*缺点：图片边缘模糊，大小、颜色更改不灵活。*/

IE浏览器中的兼容

1)图片有边框BUG
当图片加在IE上会出现边框
Hack:给图片加border:0;或者border:0 none;
2)图片间隙
div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将</div与<img写在一行上；
hack2:将<img转为块状元素，给<img添加声明：display:block;
3)双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;
4)默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;
5)表单元素对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;
6)按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1：统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
7)鼠标指针bug
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer
8)透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1;例:opacity:0.5;)
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)

列举5种IE haslayout的属性及其值

haslayout：是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了hasLayout的属性，属性值可以为true或false。当一个元素的hasLayout属性值为true时，我们说这个元素有一个布局（layout）

display:inline-block
position:absoult
zoom:任何值除了normal
min-height:任意值
min-width:任意值

ie7的

min一height:(任意值)

max一height:(除none外任意值)

min一width:(任意值)

max一width:(除none外任意值)

overflow:(除visible外任意值)

overflow一x:(除visible外任意值)

overflow一y:(除visible外任意值)

position:fixed

媒体查询是什么?

媒体查询：是可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询中可用于检测的媒体特性有width、height和color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
媒体查询的基本语法如下：

@media 媒体设备 and (min-width:300px){
    选择器{
        属性：值；
    }
}
@media 表示媒体查询
screen 表示查询设备；媒体设备是个变量，在什么设备下就使用什么值  
speech阅读设备 all所有设备 screen电脑手机平板
and 链接符号；并列条件
（屏幕条件）
max-width：230px 在230px以下的尺寸中。使用媒体样式。
min-width：230px 表示在大于230px尺寸中使用媒体样式。

padding-top:50%的效果,margin-top:50%的效果

padding-top:50%;的效果是基于父元素宽度的一半

margin-top:50%;的效果:在没有出现垂直外边距重合与溢出的情况下分为两种情况:

情况一:当是两个并列元素中添加margin-top:50%;是距离是浏览器宽度的一半

情况二:当是嵌套元素中子元素添加了margin-top:50%; 是子元素距离父元素高度的一半

rem布局字体太大怎么处理

可以紧接着在body标签内设置一个字体大小为该应用的基本字体大小,例如给body设置{font-size:0.5rem;},文本大小属性可以继承,这样的话就可以让页面中所有的文本变小

怎么实现多重边框

利用描边(outline)属性==实现双重

使用边框样式为double

利用额外的DIV外层多嵌套几层div

利用伪元素（:before）的方式实现双重边框,但是属于CSS中的hack问题,不推荐使用

使用box-shadow阴影实现对应的多边框效果

使用多背景属性:background:url1() no-repeat,url2() no-repeat,url3() no-repeat

css选择器提取a标签中的href

a:after{
  content:"("attr(href)")";
}

如何居中一个浮动元素

单纯的浮动元素其实不是很好居中的，除非你再给他嵌套一个盒子，那这也就不是给浮动盒子居中了；要么就是加相对定位进行辅助，具体代码如下：

方法一：嵌套一个父盒子

.container{width:200px;margin:0 auto;}  
/*设置父盒子的宽度和子盒子一样就可以了*/
.container .inner{width:200px;float:left}

方法二：利用相对定位

.box{width:200px;float:left;position:relative;left:50%;margin-left:-100px}

如何实现一个自适应div，宽高比始终为4:3

如果想实现一个元素的宽高比例固定，那么就需要让他们参照同一个参照物，宽高本身是两个方向的，各自参照自己的父元素，所以不太好实现，那么就需要转换思维了，大家都知道我们的padding margin如果设置了百分数，他们不论是哪个方向参照的都是父盒子的width，所以我们可以这样来做：

父盒子{position:relative;width:100%;padding-top:75%;height:0;}
子盒子{position:absolute;top:0;bottom:0;left:0;right:0}

用padding来模拟父元素的高度，子元素设置绝对定位，四个方向都设置为0，就会把宽高拉伸开，那么他的宽高就会一直保持比例为4:3了

实现垂直居中的方法

单行文本垂直居中：当此标签高度和行高的值相等时；

父元素{position:relative;}
子元素{position:absolute;top:50%;margin-top:-高度的一半;}

父元素{position:relative;} 
子元素{position:absolute;top:0;bottom:0;margin:auto;}

父元素{position:relative;} 
子元素{position:absolute;top:50%;transform:translateY(-50%);}

父元素{display:flex;align-items:center;}

怎么实现一个椭圆,使用css

使用border-radius属性属性值可以设置一个/两个/三个/四个/八个以下是两种方法实现椭圆

width:250px;height:150px;background:#FFD900;border-radius: 50% 

width:250px;height:150px;background:#FFD900;border-radius: 50%/100% 100% 0 0;

脱离布局流有几种方法？

常见的有浮动和定位
第一种:浮动布局（float）浮动一般用于让块级元素排成一行在同一行显示任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：inline-block属性
第二种:定位布局(position)定位中的absolute绝对定位可以让元素脱离文档流的如果父级有定位属性就相对于父级定位如果父级没有就会一直往上级查找直至浏览器
脱离文档流布局的缺点:初始位置不存在就会破坏网页布局

为什么无法定义1px左右高度的容器

高版本浏览器里面是能够定义1px的高度的容器的
但是由于浏览器的版本和浏览器的内核不一样导致低版本浏览器中的兼容性不一样
在低版本IE6浏览器下面,容易出现这个问题,产生问题的原因是因为默认的行高造成的,
解决的方法也有很多,例如:overflow:hidden|zoom:0.08| line-height:1px

现在想调节—下父元素的透明度，但是又不影响子元素的透明度?

使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用,因为是在父元素基础上设置的

方法:为父元素设置background:rgba(0,0,0,0.5)

样式link引入,style引入,哪个层级高

style标签设置的样式为内部样式，link标签设置的样式为外部样式，html文件的执行是从上而下的顺序执行，所以style设置的样式和link设置样式的优先级，根据书写顺序而定，后书写的会把先书写的覆盖掉(选择符权重相同的情况下)，所以后书写的层级高。

移动端经常出现的兼容问题，谈谈移动端应用或者wap站的—些优化技巧和心得

移动端上下拉动滚动条时卡顿、慢
解决：设置弹性滚动条
body {
一webkit一overflow一scrolling: touch;
overflow一scrolling: touch;
}
长时间按住页面出现闪退
解决：禁止触摸并出现提示
element {
-webkit-touch-callout:none;
}
圆角bug
某些Android手机圆角失效background-clip:padding-box;
iphone及ipad下输入框默认内阴影
将webkit浏览器中的元素默认样式去除
element{
-webkit-appearance:none;
}