CSS
1、怎么实现三栏布局？
- float
- 定位（position)
- flex布局
- table-cell
- bfc (set middle area overflow is hidden)
- 网格布局
2、垂直居中问题
- line-height
- absolute + transform 居中为什么要使用 transform（为什么不使用marginLeft / Top），这是一道重绘重排的问题。(重绘重排后面再讲）
- flex + align-items: center（flex布局太强大）
- absolute + top:0 bottom:0 margin:auto (如果加上right和left为0，就能横向居中了）
3、盒模型
- w3c标准盒模型：content（设置宽高） + padding + border = 实际宽高
- ie盒模型：content + padding + border = 实际宽高 = 设置宽高
4、CSS单位
尺寸
- em：1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
- %：百分比。
- px：像素 (计算机屏幕上的一个点)
- pt：磅 (1 pt 等于 1/72 英寸)
颜色
- rgb：RGB 值 (比如 rgb(255,0,0) 或者RGB 百分比值 (比如 rgb(100%,0%,0%))
5、CSS选择器
-
元素选择器：标签名{ }
-
ID选择器： #id属性值{ }
-
类选择器：.类名{ }
-
后代元素选择器 ： 先代标签名 后代标签名{ }
-
子元素选择器： 父标签名>子标签名{ }
-
伪类选择器：
1、未访问的链接a:link { }、已访问的链接a:visited { }、鼠标移动到链接上a:hover { }、选定的链接a:active { } 。注意：a:hover 必须被置于 a:link 和 a:visited 之后。a:active 必须被置于 a:hover 之后。
2、:focus获取焦点，当鼠标点击文本框时，对应状态改变。
3、::selection:为选中的文字设置样式。 -
伪元素
1、first-letter:为元素第一个字设置样式
2、first-line:为元素第一行设置样式
3、:before
4、:after -
子元素的伪类
1、:nth-child(数字/even/odd)：选中任意位置/偶数位/奇数位
2、:first-of-type ：last-of-type :nth-of-type 和前几个非常类似，只不过child是在所有的子元素中排列，而type是在当前类型的子元素中排列 -
否定伪类
p:not(.hello){ }为p段落中的除了class=“hello”的添加样式。 -
属性选择器
语法：
元素[属性名] 选取含有指定属性值的元素
元素[属性名=“属性值”] 选取含有指定属性值的元素
元素[属性名^=“属性值”] 选取属性值以指定内容开头的元素
元素[属性名$=“属性值”] 选取属性值以指定内容结尾的元素
元素[属性名*=“属性值”] 选取属性值含有指定内容的元素，如：有若干属性值ab、bag、sd，若指定的为a，则会选取ab、bag。 -
兄弟元素选择器
前一个+后一个{} 选中一个元素紧挨着的后一个兄弟元素添加样式
前一个~后一个 选中后边的所有兄弟元素 -
样式的继承
背景相关的样式不会被继承,包括边框、定位
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。1、css可以和不可以继承的属性
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。2、值的继承
继承也是基于文档树的，文档树中元素的某些属性可以被其子元素继承，每一个CSS属性都定义了它能否被继承。要设定文档的某些缺省样式属性，可以在文档树的根上设定该属性，如果这个属性可以继承，则其后代元素将继承这个属性，例如color、font-size等属性。
3、“inherit（继承）”值
每一个属性可以指定值为“inherit”，即：对于给定的元素，该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值，它可以通过显式地指定“inherit”而得到加强，例如：p { font-size: inherit; }
4、继承的局限性
继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景等。5、能否取消
css属性一旦继承了不能被取消，只能重新定义样式。6、案例
父元素position:relative 子元素：position:absolute 父元素宽度固定，子元素会继承父元素的宽度（对于二级导航很重要，当隐藏的那个导航栏宽度不固定，或者宽度大于父元素时，此时一般只能重新设置子元素的宽度） -
选择器的优先级
内联样式(1000)>id选择器(100)>类和伪类(10)>元素选择器(1)>全局选择器>继承的样式(0)
注意：当选择器中包含多种选择器时（p#p2），需要将多种选择器的优先级相加再比较.选择器的优先级不会超过他的最大数量级，比如多个id选择器相加不会超过999.
如果选择器的优先级一样，则使用位置靠后的样式。class=“p1 p2”
并集选择器h1，p，div{}的优先级是单独计算的，会各自运用到自己的内容中。在样式的最后添加一个!inportant会获得最高的优先级，优先显示。 -
css3选择器
CSS3选择器大全
6、层叠上下文z-index
7、常见页面布局？响应式布局？
一、静态布局(Static Layout)
概念：
最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点
采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
缺点
但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
实现方法
PC端:
最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。
例如百度首页外层body设置了一个min-width:1000px;,当我打开调试器的时候,底部x轴滚动条就出现了。
移动端：
由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。
例如刚刚百度的PC端我们切换成手机模拟器访问试试:
访问一下百度的手机端页面:m.baidu.com
总结：
PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条
移动端限制了最大的宽度, 超过了则以最大宽度居中显示
二、流式布局(Liquid Layout)
概念：
流式布局也叫百分比布局
这边引入一下自适应布局:
分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
流式布局常用的设计模板:
左侧固定+右侧自适应
左右固定宽度+中间自适应(参考京东手机版)
页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
优点：
元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化
缺点：
屏幕尺度跨度过大的情况下，页面不能正常显示。
三、弹性布局(Flex Layout)
概念：
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。
优点：
简单、方便、快速
缺点：
CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
主要属性及实现方式：
flex-flow: ||
flex-direction和flex-wrap的简写,在两者选其一。
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。
row:主轴为水平方向，项目沿主轴从左至右排列
column：主轴为竖直方向，项目沿主轴从上至下排列
row-reverse：主轴水平，项目从右至左排列，与row反向
column-reverse：主轴竖直，项目从下至上排列，与column反向
8、BFC
BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
Box：css布局的基本单位
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
run-in box: css3 中才有， 这儿先不讲了。
Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的布局规则
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
如何创建BFC（触发）
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC的作用
- 利用BFC避免margin重叠。
- 自适应两栏布局
- 清楚浮动。
9、css预处理器
一般回答 变量 / 嵌套 / 自动前缀 / 条件语句 / 循环语句
常用css预处理器：less、sass
10 、css3新特性
animation和transiton的相关属性，animate和translate
11、display
12、相邻的两个inline-block节点为什么会出现间隔，该如何解决
13、meta viewport 移动端适配
14、CSS实现宽度自适应100%，宽高16:9的比例的矩形
概念：
到目前为止，CSS实现这种效果已经非常容易了，它有一个专业的术语叫“宽高比”或“纵宽比”。就CSS实现方案来说有多种方案可以实现。
这种方案是最早被采用的一种方案，简单地说，就是把容器的height设置为0，然后设置padding-top或padding-bottom的值为宽高比=56.25%。
padding-top = (元素高度 / 元素宽度) * 100%
padding-bottom = (元素高度 / 元素宽度) * 100%
如果用SCSS可以这样来写：
@mixin fixed-aspect-rations($height, $width) {
padding-bottom: $height / $width * 100%;
// 或者
padding-top: $height / $width * 100%;
}
// 或者···
@function aspect-ratio($height, $width) {
$aspect-ratio: $height / $width * 100%; @return $aspect-ratio;
}
示例：
<div class="container">
<iframe class="embed"></iframe>
</div>
/*CSS*/
.container {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25% // 9 / 16 * 100%
}
.embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
15、rem 布局的优缺点
什么是Rem：
rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em
em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
我在面试时经常问会一道和em有关的题，来看一下面试者对css细节的了解程度，如下，问s1、s2、s5、s6的font-size和line-height分别是多少px，先来想一想，结尾处有答案和解释
<div class="p1">
<div class="s1">1</div>
<div class="s2">1</div>
</div>
<div class="p2">
<div class="s5">1</div>
<div class="s6">1</div>
</div>
.p1 {font-size: 16px; line-height: 32px;}
.s1 {font-size: 2em;}
.s2 {font-size: 2em; line-height: 2em;}
.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s6 {font-size: 2em; line-height: 2em;}
em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能
em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算，X﹏X
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
rem取值分为两种情况，设置在根元素时和非根元素时，举个例子
/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}
rem有rem的优点，em有em的优点，尺有所短，寸有所长，我一直不觉得技术没有什么对错，只有适合不适合，有对错的是使用技术的人，杰出与优秀的区别就在于能否选择合适的技术，并让其发挥优势
我一直觉得em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系
Rem布局原理：
其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊
假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比
16、画三角形
实现原理：
三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。
实现：
transparent属性
注：用来指定全透明色彩。
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook™ Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。IE6不支持border的颜色为transparent，边框色会显示为黑色。
在CSS3中，transparent被延伸到任何一个有color值的属性上。IE8及以下，color属性值为transparent时，文本显示为黑色。
6903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
