一、css有哪些基本选择器，它们的权重是如何表示的
基本选择器：标签选择器（div），类选择器（.class）， ID选择器（#id）
权重：!important>内联样式>ID选择器>类选择器>标签选择器
注意：当把选择器组合使用时，相应的层级权重也会递增
二、css引入方式
1、行内式：把样式写在元素的style属性内
2、内嵌式：把样式写在style标签内
3、外链式：通过link标签，引入css文件内的样式
三、link和@import的区别
| link | @import |
| link是XHTML的标签，除了加载css文件，还可以加载模板等 | 只能加载css文件 |
| 同步加载：页面载入时同时加载 | 异步加载：等网页加载完后再加载css文件 |
| 是XHTML标签，没有兼容问题 | 不支持低版本浏览器 |
| 支持js控制DOM和修改样式 | 不支持js控制DOM和修改样式 |
四、为什么清除浮动，怎么清除
原因：浮动会让父元素高度坍塌即父元素高度为0
方法一：为父元素添加高度
方法二：给父元素添加overflow:hidden
方法三：添加空元素，并设置clear:both
方法四：伪元素
clearfix:after {
content " "；
display:block;
clear:both;
}五、position的值
| 值 | 说明 |
| static | 默认值，没有定位，元素出现在正常的文档流中 |
| relative | 相对定位，相对于自己在正常文档流中的位置定位 |
| absolute | 绝对定位，让元素依据最近已定位的父元素进行定位，如果没有相对于根元素定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
| sticky | 粘性定位，根据正常文档流计算得出 |
六、 position:absolute和float属性的异同
相同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置宽高
不同点：
float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
absolute会覆盖文档流中的其他元素，即遮盖现象。
七、css选择器有哪些
1、标签选择器（div，span，h1）
2、类选择器（.class）
3、ID选择器（#my）
4、后代选择器（div p）
5、子选择器（div>p）
6、相邻选择器（p+a）
7、通配符选择器（*）
8、属性选择器（button[disabled="true"]）
9、伪类选择器（li:nth-child）：表示一种状态
10、伪元素选择器（li::before）：文档某个部分的表现
注意：伪类用单冒号:表示，伪元素用双冒号表示::
八、css有哪些样式可以继承，哪些不可以继承
可继承：font-size font-family color
不可继承：width height margin padding border
总结：与字体相关的样式可以继承，与尺寸相关的样式不能继承
九、css优先级
!important>style（内联）>id>class>标签
十、为什么要初始化css
因为浏览器的兼容问题，不同浏览器对标签的默认值不同，如果没有初始化css，会导致页面在不同浏览器出现差异
十一、让元素水平垂直居中
方法一：flex布局
方法二：定位+margin（margin左右值为盒子的一半，前提是知道盒子的大小）
方法三：定位+平移
方法四：定位+margin（top bottom left right都为0，margin：0 auto）
十二、display有哪些值
| 值 | 说明 |
| block | 块级元素 |
| inline | 行内元素 |
| inline-block | 行内块元素 |
| none | 隐藏 |
| list-item | 像块元素一样显示，并添加样式列表标记 |
| table | 元素会作为块级表格显示 |
| inherit | 从父元素继承display的值 |
十三、两栏布局，左边定宽，右边自适应
方法一：flex布局
<div>两栏布局</div>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
/* 两栏布局flex */
.box {
display: flex;
}
.box .left {
width: 200px;
height: 200px;
background-color: salmon;
}
.box .right {
flex: 1;
height: 200px;
background-color: aquamarine;
}
</style>方法二：浮动
<style>
/* 浮动 */
.box2 {
overflow: hidden;
}
.box2 .left {
float: left;
width: 200px;
height: 200px;
background-color: aquamarine;
}
.box2 .right {
height: 200px;
background-color: khaki;
}
</style>
<div class="box2">
<div class="left"></div>
<div class="right"></div>
</div>十四、三栏布局，左右定宽，中间自适应
方法一：flex布局
<style>
.box3 {
display: flex;
}
.box3 .left {
width: 200px;
height: 200px;
background-color: palegreen;
}
.box3 .mid {
flex: 1;
height: 200px;
background-color: pink;
}
.box3 .right {
width: 200px;
height: 200px;
background-color: khaki;
}
</style>
<div class="box3">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>方法二：定位
<style>
.box4 {
position: relative;
margin-top: 50px;
}
.box4 .left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 600px;
background-color: pink;
}
.box4 .mid {
height: 600px;
background-color: yellowgreen;
}
.box4 .right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 600px;
background-color: skyblue;
}
</style>
<div class="box4">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>十五、解释一下css sprite，在页面或网站怎么使用
介绍：把一些背景图片整合到一张图片文件中，再利用css的background-image background-repeat background-position等进行背景定位 ，background-position可以用数字定位出背景图片的位置
优点：减少网页的http请求，提高页面性能
缺点：不好维护（例如图片位置进行修改或者内容宽高修改）
十六、隐藏元素的方法
| 方法 | 说明 |
| display:none; | 隐藏元素，不占据位置，不会响应元素绑定的监听事件 |
| visibility:hidden | 隐藏元素，会占据位置，不会响应元素绑定的监听事件 |
| opacity:0 | 隐藏元素，会占据位置，会响应元素绑定的监听事件 |
| transform:scale(0,0) | 将元素缩放为 0，以此来实现元素的隐藏。会占据位置，不会响应元素绑定的监听事件 |
十七、行内元素可以实现浮动吗
在css中，任何元素都可以浮动
十八、描述css中content属性的作用
介绍：content属性和::before 和 ::after 伪元素配合使用，用来插入生成的内容，可以在元素之前或者之后放置生成的内容，可插入文本，图像，引号，编号等
示例：
.title::before {
content: '第';
}
.title::after {
content: '篇';
}
<h1 class="title">1</h1>十九、如何定义高度很小的容器
因为有一个默认的行高，所以在ie6下无法定义小高度的容器
方法一：overflow:hidden
方法二： font-size:容器高度
二十、如何在图片下方设置几像素的空白间隙
定义img为块级元素
二十一、如何解决ie6双倍margin的bug
将元素设置为行内元素
二十二、单行文本超出隐藏显示省略号，多行文本超出隐藏显示省略号
二十三、英文单词词内断行
word-wrap:break-word
二十四、px rem em vw vh
px：绝对单位长度，值指定为多少就是多少
rem :相对于根元素字体大小而言
em：相对于父元素大小而言
vw：视口宽度的1%
vh：视口高度的1%
二十五、网页制作会用到那些图片格式
| 格式 | 说明 |
| jpg | 压缩率高，文件小 |
| PNG | 支持无损压缩，色彩损失小，保真度高，文件稍大 |
| GIF | 支持动画显示，但只支持256色显示，目前已经被fash大量取代 |
二十六、谈谈你对BFC规范的理解
介绍：BFC块级格式化上下文，即创建新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素
特点：
决定元素如何对其内容进行布局，也决定与其他元素的关系和相互作用
二十七、 访问超链接后 hover样式就不出现的原因是什么？应该如何解决？
因为访问过的超链接样式覆盖了原有的 hover和 active伪类选择器样式，解决方法是将CSS属性的排列顺序改为L→V→H→A（link, visited, hover, active）。
二十八、CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向的属性是 line-height.水平方向的属性是 letter-spacing。
letter- spacing可以用于消除 inline- block元素间的换行符空格间隙
二十九、浏览器标准模式和怪异模式之间的区别是什么（包斗斗传媒）
标准模式：按浏览器支持的最高标准来运行
怪异模式 ：向后兼容
区别：盒子模型的渲染模式不同
可以使用 window. top document compatMode判断当前模式为何种模式结果为 Back Compat，表示怪异模式结果为 CSSICompat，表示标准模式。
三十、css中自适应的单位有哪些
-
百分比：%
-
相对于视口宽度的单位：ww
-
相对于视口高度的单位：vh
-
相对于父元素字体大小的单位：em
-
相对于根元素字体大小的单位：rem
-
相对于视口宽度或者高度（取决于哪个小）的单位：Vm
三十一、css中的盒模型
介绍：分为内容、内边距、边框、外边距
分类：标准盒模型（content-box） 怪异（IE）盒模型（border-box）
区别：计算方式不同
标准盒模型：width height只包含content，不包含border和padding
怪异盒模型：width height包含content+padding+border
三十二、flex布局
三十三、如果需要手写动画，你认为最小间隔是多久，为什么
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms
三十四、有一个高度自适应的盒子，里面有两个div，一个高度为100px，如何让另一个填满剩下的高度
方法一： 外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;
方法二：使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。
三十五、css3新特性
三十六、用纯css创建三角形的原理是什么
介绍：把元素的宽高设为0，然后设置边框样式，将所有边框设为透明，然后再设置一边为你想要的边框颜色
示例：
{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
或者简写
{
width: 0;
height: 0;
border: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}三十七、什么是响应式布局，基本原理是什么，如何兼容低版本的IE
介绍：一个网站兼容多个多个终端，而不是为每一个终端 做一个特定的版本
原理：通过媒体查询检测不同的设备屏幕尺寸做处理
兼容：页面头部必须有meta声明的viewport
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
三十八、怎么让Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
四十、transition和animation的异同点
相同点：随时间改变元素的属性值
不同点：
| transition | animation |
| 需要触发事件才能改变属性 | 不需要触发事件就能改变属性值 |
| 时间为2帧 | 可以是一帧一帧的 |
示例：
.box {
border: 1px solid #000;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s,
background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
四十一、主流浏览器的内核
| 浏览器 | 内核 |
| Chrome,Opera | Blink内核（基于webkit） |
| IE | trident内核 [‘traidnt ] |
| Firefox | gecko 内核 [ˈɡekəʊ] |
| Safair | webkit内核 |
四十二、一个页面有大量图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载
1、使用精灵图
2、图片懒加载
3、图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载
四十三、opacity和rgba的异同点
相同点：实现透明度效果
不同点：
| 区别点 | opacity | rgba |
| 取值 | 取值范围0到1,0表示完全透明，1表示不透明 | 取值在正整数或者百分数 |
| 继承 | 会继承父元素的opacity属性值 | 不会继承父元素的rgba属性值 |
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
