CSS篇
CSS的选择器
元素选择器：* 、E、 E#id、 E.class
关系选择器：E、F、E>F、E+F、E~F
属性选择器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
如何让一段文本中的所有英文单词的首字母大写
text-transform：none/capitalize(将每个单词的第一个字母转换成大写)
uppercase(将每个单词转换成大写 )
lowercase(将每个单词转换成小写 )
实现一个div在不同分辨率下的水平垂直居中
//方法一:使用百分比
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
//方法二:使用flex布局
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}方法一:先使用了绝对定位,使用top:50%;left:50%是以左上角为原点,故不处于中心位置,translate(-50%,-50%)作用是往上(x轴),左(y轴)移动自身长宽的50%,以使其居于中心位置
方法二:使用了flex布局,以body为父元素,使用父元素属性进行垂直水平居中
左右固定，中间自适应样式
<style>
//方法一:设置子元素属性
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
//方法二:运用父元素属性
.box {
display: flex;
height: 200px;
justify-content: space-between;
}
.left {
width: 100px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
width: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>两个方法都使用了flex布局,但是方法一针对子元素的flex子项目占的份数,flex:flex-grow,flex-shrink,flex-basis,分别表示放大比例(值大的放大)、缩小比例(为0不缩小,为1缩小)、占据固定空间,因此方法一只有center是方法缩小,其他都是固定大小。方法二,是先使用父元素属性,先两边贴边 再平分剩余空间,并且center进行中间的填充
阐述清楚浮动的几种方式（常见问题）
1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示2、解决浮动的方法
（1）clear: both在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
解释css sprites ，如何使用？
1、什么是精灵图
将一些小图标放在一张图上2、精灵图的优点
减少图片的总大小
减少下载图片资源请求，减小建立连接的消耗3、精灵图的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一个数是x轴， 第二个数是y轴
box-sizing常用的属性有哪些？分别有什么作用？
（1）content-box
宽高是元素本身的宽高 不包含border+padding（2）border-box
元素的宽高已经包含了border+padding（3）inherit
从父元素继承box-sizing属性
CSS样式覆盖规则
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
请简要描述margin重合问题，及解决方式
问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin
解决：
（1）设置padding代替margin
（2）设置float
（3）设置overflow
（4）设置position：absolute 绝对定位
（5）设置display： inline-block
对<meta></meta>标签有什么理解
1、meta是html文档头部的一个标签，这个标签对用户不可见，是给搜索引擎看的。
2、meta标签属性用法分成两大类
3、<meta charset="UTF-8"> 使用的编码格式，大部分是utf-8
display none visibility hidden区别？
重绘和回流（哪些情况重绘，哪些回流）
说说你对语义化的理解？
为什么要初始化css样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
移动端适配1px问题
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}居中为什么要使用transform（为什么不使用marginLeft/Top）
transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些
top/left属于布局属性，会引起页面layout回流和repaint重绘。
对BFC规范的理解
BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。
BFC是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
利用BFC可以闭合浮动，防止与浮动元素重叠。
CSS伪类与CSS伪对象的区别
CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西
根本区别在于：它们是否创造了新的元素（抽象）
伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
position的absolute与fixed共同点与不同点
相同：
a. 改变行内元素的呈现方式，display被置为block
b. 让元素脱离普通流，不占据空间
c. 默认会覆盖到非定位元素上
区别：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），变形（transform）
增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局
rgba()和opacity的透明效果有什么不同？
a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。
b. 设置rgba透明的元素的子元素不会继承透明效果！
常见的页面布局
- 水平居中布局
- 左侧固定 右侧自适应
- 流式布局
- 弹性布局
- 圣杯布局
- 双飞翼布局
常见单位
1. px：绝对单位，页面按精确像素展示
2. em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
3. rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
4. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%
5. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%
6. vmin：vw和vh中较小的那个
7. vmax：vw和vh中较大的那个
8. %:百分比
移动端视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
initial-scale：初始的缩放比例
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩放
Sass、Less、Stylus区别
Sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的。
Less 变量是以@开头的，其余sass都是一样的。
Stylus 对变量是没有任何设定的，可以是以$开头或者任意字符，而且变量之间可以冒号，空格隔开，但是在stylus中不能用@开头
9058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
