Cascading Style Sheet 层叠样式表

Cascading Style Sheet 层叠样式表

CSS选择器

盒模型

盒模型有两种， IE 怪异盒子模型、W3C标准盒子模型；

盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。

标准模型的宽高是指的content区宽高； IE盒模型的宽高是指的content+padding+border的宽高。

CSS如何设置这两种盒模型？

标准盒模型：

box-sizing: content-box;

怪异盒模型：

box-sizing: border-box;

BFC

什么是BFC

W3C对BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC作用：

1. 利用BFC避免外边距折叠
2. 清除内部浮动 （撑开高度）
   1. 原理: 触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
3. 避免文字环绕
4. 分属于不同的BFC时，可以阻止margin重叠
5. 多列布局中使用BFC

如何生成BFC：（脱离文档流，满足下列的任意一个或多个条件即可）

1. 根元素，即HTML元素（最大的一个BFC）
2. float的值不为none
3. position的值为absolute或fixed
4. overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
5. display的值为inline-block、table-cell、table-caption

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. 属于同一个BFC的两个相邻的Box的margin会发生重叠
3. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float
4. BFC的区域不会与float box重叠。
5. 计算BFC的高度，浮动元素也参与计算

非布局样式

• 字体、字重、颜色、大小、行高
• 背景、边框
• 滚动、换行
• 粗体、斜体、下划线
• 其他

行高的构成

• 行高是由 line-box 组成的
• line-box 是由一行里的 inline-box 组成的
• inline-box中最高的那个，或字体最大的拿个决定行高

float

• 元素"浮动"
• 脱离文档流
• 不脱离文本流
• 位置尽量靠上，并靠左或右

对自己的影响

• 形成"块"(BFC)
• 这个块会负责自己的布局，宽高由自己决定

比如 span 中用 float 这个span就形成了一个BFC，就可以设置宽高了

对兄弟元素的影响

• 上面一般贴非float元素
• 靠边贴float元素或边
• 不影响其他块级元素位置
• 影响其他块级元素文本

对父级元素的影响

• 从布局上"消失"
• 高度塌陷

清楚浮动

浮动的元素布局时不会占据父元素的布局空间，即父元素布局时不会管浮动元素，浮动元素有可能超出父元素，从而对其他元素造成影响。

方法一：让父元素变为一个BFC。 父元素 overflow: auto/hidden。 让父元素去关注里面的高度。 必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

方法二： 使用伪元素清楚浮动

.container::after {
  content: " ";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

inline-block的间隙

两个并列的inline-block中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。

解决办法：

1. 删除两个标签间的空格，但是这样html排版不好
2. 容器元素font-size: 0 然后再在里面再重新设置字体大小

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

• line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
• 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
• 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
• line-height 和 height 都能撑开一个高度，height 会触发 haslayout（一个低版本IE的东西），而 line-height 不会

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

图片下面有一个缝隙是因为什么

因为 img 也相当于一个 inline 的元素， inline 就要遵守行高的构成，它会按照base基线对齐，基线对齐的话那么它就会和底线间有一个缝隙。

如何解决： 因为它会遵守文字对齐方案，那么就把图片的对齐方式修改为 vertical-align: bottom。或者让他display: block，这样图片虽然会换行，但是没有间隙了。

边框

• 边框的属性： 线型、大小、颜色
• 边框背景图
• 边框衔接

滚动

• visible 滚动条隐藏, 文字超出显示
• hidden 滚动条隐藏, 文字超出不显示
• scroll 滚动条一直显示，无论文字是否够多
• auto 滚动条自动隐藏

文字折行

• overflow-wrap(word-wrap)通用换行控制
  • 是否保留单词
• word-break 针对多字节文本文字
  • 中文句子也是单词
• white-space 空白处是否换行

装饰属性及其他

• 字重（粗体） font-weight
• 斜体 font-style: itatic
• 下划线 text-decoration
• 指针 cursor

CSS Hack

在一部分不合法，但是在某些浏览器上生效的写法就叫CSS Hack，一般用来兼容老的浏览器， 缺点是难理解、难维护、易失效

替代方案：

• 特征检测
• 针对性的加class
  • 比如第一步检测是IE6，那么只需要添加一个专门的 class 名来兼容IE6就好

写Hack时需要注意

• 标准属性写在前面， hack代码写在后面

单行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;

多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

display: none; 与 visibility: hidden; 的区别

相同： 它们都能让元素不可见

区别：

• display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见
• display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式
• 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
• 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容
• 无论是 display:none; 还是 visibility: hidden; 他们都依然可以被 JS 所获取到

外边距折叠(collapsing margins)

外边距重叠就是 margin-collapse

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距

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

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
• 两个外边距一正一负时，折叠结果是两者的相加的和

新手在做导航栏的时候发现页面整体掉下来一截就是这个原因。

CSS单位

1. px 绝对单位。传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。

2. % 父元素宽度的比例。

   1. 如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为 16px），如62.5%即等于10px（62.5% * 16px = 10px）。

3. em 相对单位。 不同的属性有不同的参照值。

   1. 对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
   2. border, width, height, padding, margin, line-height）在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。

4. rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。

   1. 好处：rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。

5. vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。

   1. vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
   2. vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
   3. vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
   4. vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一

transform变形

与transition、translate名字有点像，transition是做过渡动画的，而translate是用来做平移的。

• none
  • 定义不进行转换。
• matrix(n,n,n,n,n,n)
  • 定义 2D 转换，使用六个值的矩阵。
• translate(x,y)
  • 从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）
• translate3d(x,y,z)
  • 定义 3D 转换。
• translateX(x)
• translateY(y)
• translateZ(z)
• scale(x[,y]?)
  • 定义 2D 缩放转换。
• scale3d(x,y,z)
  • 定义 3D 缩放转换。
• scaleX(x)
• scaleY(y)
• scaleZ(z)
• rotate(angle)
  • 定义 2D 旋转，在参数中规定角度。
• rotate3d(x,y,z,angle)
  • 定义 3D 旋转。
• rotateX(angle)
• rotateY(angle)
• rotateZ(angle)
• skew(x-angle,y-angle)
  • 定义沿着 X 和 Y 轴的 2D 倾斜转换。
• skewX(angle)
• skewY(angle)
• perspective(n)
  • 为 3D 转换元素定义透视视图。

CSS预处理器

• 嵌套
  • 反映层级和约束
• 变量和计算
  • 减少冗余代码
• entend和mixin
  • 代码片段重用
  • mixin是直接把CSS代码每个地方重复写一份
  • extend是使用逗号分割的选择器来为多个不同的地方使用同一段CSS
• 循环
  • 适用于复杂有规律的样式
• import
  • CSS模块化

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

• 多个 css 合并，尽量减少 HTTP 请求
• css 雪碧图
• 抽象提取公共样式，减少代码量
• 选择器优化嵌套，尽量避免层级过深 （用‘>’替换‘ ’）
• 属性值为 0 时，不加单位
• 压缩CSS代码
• 避免使用 CSS 表达式
  • 它们要计算成千上万次并且可能会对你页面的性能产生影响。

link 与 @import 的区别

• link 是 HTML 方式， @import 是 CSS 方式
• link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC
• link 可以通过 rel="alternate stylesheet" 指定候选样式
• 浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
• @import 必须在样式规则之前，可以在 css 文件中引用其他文件
• 总体来说：link 优于@import

CSS 有哪些继承属性

• 关于文字排版的属性如：
  • font
  • word-break
  • letter-spacing
  • text-align
  • text-rendering
  • word-spacing
  • white-space
  • text-indent
  • text-transform
  • text-shadow
• line-height
• color
• visibility
• cursor

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

• block 像块类型元素一样显示。
• none 此元素将显示为块级元素，此元素前后会带有换行符。
• inline 内联元素，元素前后没有换行符。
• inline-block 象行内元素一样定位，但其内容象块类型元素一样显示。
• list-item 象块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示
• inherit 规定应该从父元素继承 display 属性的值

position 有哪些值？ relative 和 absolute 定位原点是？

• absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。
• fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
• relative 生成相对定位的元素，相对于其正常位置进行定位。
• static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
• inherit 规定从父元素继承 position 属性的值

CSS3新特性？

• 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
• 弹性盒模型 display: flex;
• 多列布局 column-count: 5;
• 媒体查询 @media (max-width: 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;
• 平滑过渡 transition: all .3s ease-in .1s;
• 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
• 变形 transform
  • 旋转 transform: rotate(20deg);
  • 倾斜 transform: skew(150deg, -10deg);
  • 位移 transform: translate(20px, 20px);
  • 缩放 transform: scale(.5);

如何水平居中一个元素？

如果需要居中的元素为inline或inline-block，为父元素设置 text-align: center;即可实现

如果要居中的元素为一个块级元素的话，一般使用 margin: 0 auto; 进行居中。

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

把border的其他三条边设为透明 注意，这里要把 border-width 、border-style、 border-color 分开写。

.tri {
  width: 0px;
  height: 0;
  border-style: solid;
  border-width: 100px;
  border-color: transparent transparent red transparent;
}

li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符, 这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了

display:inline-block 什么时候会显示间隙？(携程)

• 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
• 非 inline-block 水平元素设置为 inline-block 也会有水平间距
• 可以借助 vertical-align:top; 消除垂直间隙
• 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
• 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

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

• 响应式设计就是网站能够兼容多个不同大小的终端，而不是为每个终端做一个特定的版本
• 基本原理是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式
• 对于低版本的 IE，可采用 JS 获取屏幕宽度，然后通过监听window.onresize 方法来实现兼容

谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。 浮动框脱离文档流，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

清除方法：

1. 父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}

1. 在结尾处添加空 div 标签 clear:both

<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

<style>
    .left {float:left}
    .clearfloat{clear:both}
</style>

父级 div 定义 overflow:auto。 同时需要父级指定宽度

参考链接几种常用的清除浮动方法

box-sizing 常用的属性有哪些？分别有什么作用？

• box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
• box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
• box-sizing: inherit; // 继承父元素 box-sizing 属性的值

请列举几种隐藏元素的方法

• 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() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

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

元素竖向的百分比设定是相对于容器的宽度，而不是高度

a 标签上四个伪类的使用顺序是怎么样的？

link > visited > hover > active 简称 lvha(love-ha)

伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）

在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色

伪元素和伪类的区别和作用？

伪元素:在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

::before 和 :after 中双冒号和单冒号有什么区别？

• 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
• 伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
• 后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
• 由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
• 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容 IE 的老语法

设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的 display 值自动变成 block

请解释 CSS sprites，以及你要如何在页面或网站中实现它

• CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。
• CSS Sprites 为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片。

base64的使用

• 写入CSS， 减少HTTP请求
• 适用于小图片
• base64的体积约为原图4/3

margin叠加几种情况

margin叠加的意思是：当两个或者更多的垂直外边距 相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距中高度较大者。

1. 当一个元素出现在另一个元素上面时，第一个元素的底边外边距与第二个元素的顶边外边距发生叠加。如图： 

2. 当一个元素在另一个元素中时，它们的顶边距和低边距也会发生叠加 

3. 如果一个元素是空元素（即一个元素没有内容，内边距和边框），这种情况外边距的顶边距和低边距碰在一起也会发生叠加 

4. 在上面那种空元素的情况，如果该空元素与另一个元素的外边距碰在一起，也会发生叠加。 

以上4种外边距叠加情况只会发生在普通文档流的垂直方向。行内框、浮动框、绝对定位框之间的外边距不会发生叠加，同样水平方向也不会发生叠加