文章目录
前言
题目后缀表示本人遇到的频率（高/低）
选择器都有哪些（高）
选择器优先级（高）
!important- 内联样式
- ID选择器
- 类选择器/属性选择器/伪类选择器
- 元素选择器/伪元素选择器
- 关系选择器/通配符选择器
带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
但是！实际上优先级的内部机制是这样的：
首先作者样式表的!important大于浏览器默认样式表的!important。
然后再看选择器权重：
- 分为四位数
- 第一位数，如果是内联就加1
- 第二位数，如果是id选择器，有几个就加几个1
- 第三位数，如果是属性、类、伪类选择器，有几个就加几个1
- 第四位数，如果是元素、伪元素选择器，有几个就加几个1
累计起来后相互比较，例如：
<style>
.box,
div {
color: red;
}
.box {
color: yellow;
}
</style>
第一个样式内容的权重是 0 0 1 1，第二个是0 0 1 0，两者比较的时候，从左向右比大小，到第4位数时前者胜，所以以前者为主生效。
不信可以ctrl鼠标移入选择器看，不过编辑器会不显示第一位：
空白文本节点/空白占位（高）
当盒子用了inline-block布局后，标签与标签之间会有空的地方：
横向排布会有空白文本节点占位5px的问题，解决方案如下：
- 使用浮动；
- 父级设置font-size: 0;
- 使用position定位；
- 相关子级margin为-5px；
- 父级设置letter-spacing: -5px；
- 标签不要换行；
纵向上没有这个问题。
这也引出一个问题，尽量不要用inline-block布局，因为他开启的是IFC（行级格式化上下文）布局，会带来什么问题呢？
- 上面说的空白问题，而且生产环境的代码是压缩的，这种现象又会消失
- 基准线琢磨不透，你会发现有时候，你的盒子里的文字在盒子底部，正常应该是在盒子顶部的，这就是IFC复杂的基准线机制导致的。
margin-top溢出问题（低）
当自己设置了margin-top，会有出现溢出父级外的情况。解决方案：
- 需要父级有顶边框才能生效，可以来个透明的边框
border：1px solid transparent;推荐使用； - 可以用绝对定位解决；
- 父级启用BFC；
- 父级用padding；
会影响排布的继承属性（低）
继承属性可以粗略的记成和文字相关的属性都可以继承，其他的不太能继承。
我懒就不记录了，直接看其他博主的文章
三个隐藏的布局区别（低）
分三种
layout树不生成该节点：
display: none;- 给标签加上hidden属性，例如
<div hidden></div>
视觉上的隐藏：
opacity: 0;不会改变页面布局，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的；visibility: hidden；不会改变页面布局，但是不会触发该元素已经绑定的事件；
语义上的隐藏：
- 例如
<div aria-hidden="true"></div>，表示不给例如残障模式的读屏软件读取，但还是可见的
双飞翼布局和圣杯布局（低）
双飞翼布局题目例子：写一个左中右布局占满屏幕，其中左右两块固定宽200，中间自适应，要求先加载中间块，写出结构和样式；
这里就贴出两栏和三栏的双飞翼布局写法，要学会举一反三。
两栏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 一般使用在后台管理系统的布局
2栏的布局：左边固定大小，右边自适应
原理：flex布局 块级元素自动占满空间-->
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
height: 100vh;
display: flex;
}
.left {
flex: 0 0 200px;
background-color: #0000ff;
}
.right {
flex: 1;
background-color: #2ac845;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
三栏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 一般使用在后台管理系统的布局
3栏的布局：左右边固定大小，中间自适应，且中间的dom先加载
原理：浮动 块级元素自动占满空间-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main > div {
/* 这里是重点 */
float: left;
}
.wrap {
width: 100%;
}
.mid {
background-color: red;
margin-left: 200px;
margin-right: 200px;
height: 100vh;
}
.left {
background-color: blue;
width: 200px;
margin-left: -100%;
height: 100vh;
}
.right {
background-color: yellow;
width: 200px;
margin-left: -200px;
height: 100vh;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="mid">mid</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
圣杯布局就是在双飞翼的基础上加了头部和尾部：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 圣杯布局：分为头部，中间，底部。其中中间又分为左中右，且中是自适应
原理：flex布局 块级元素自动占满空间-->
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
header{
background-color: #007AFF;
height: 100px;
}
section{
flex: 1;
display: flex;
}
.left, .right{
background-color: #008000;
flex: 0 0 100px;
}
.center{
flex: 1;
background-color: red;
}
footer{
background-color: #007AFF;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<header>头部</header>
<section>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</section>
<footer>底部</footer>
</div>
</body>
</html>
个人觉得这两种布局没有考的意义，真正工作中不可能还用上面的方式去布局。
浮动带来的特性（高）
- 给一个元素浮动，如果后面是行内元素，则浮动元素仍会占据空间，后面的元素还是乖乖的跟在后面。
- 如果后面是块级元素，则浮动元素直接脱离普通流，但块级元素内的文字不会被浮动元素覆盖。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: bisque;
}
.left {
float: left;
}
.block {
display: block;
}
</style>
</head>
<body>
<div class="left">1</div>
<div class="block">2</div>
</body>
</html>
块级元素被浮动元素挡住，但是文字不会。
- 会使行内元素的宽高可设置；
- 会使块级元素的宽不是默认100%，由内容撑大；
如何清除浮动塌陷（高）
- 给父级设置高度，缺点不灵活，难维护；
- 让父元素也浮动起来，缺点影响之后元素的布局；
- 在子元素末尾加一个块级元素，并添加clear: both，进行闭合浮动；缺点是多了一个无语义的块级元素；所以又衍生出下个方法；
- 最常用的方式，父元素加入伪元素；一样的机制，一样的效果；
.main:after{
content: "";
clear: both;
display: table;
}
- 给父元素加入over: hidden（BFC）；缺点容易造成不会自动换行导致超出的尺寸被隐藏掉，无法显示要溢出的元素；
- 还有一个最好的带有浏览器兼容的方法；
/* 清除浮动 */
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
一般回答最常用的方式即可！
z-index的相关细节（高）
这块和层叠上下文知识点有关。
使用z-index时，要设置position属性。
如何判断两个盒子的层级关系？
首先每个盒子先往父祖找，看那个父级有设置position和z-index的，有的话这个父级就是盒子的层叠上下文。然后就可以判断了：
- 先看他们是不是同父的，是的话看自己谁的z-index数值大，谁大谁在上面。如果盒子都没开启z-index，那么后面的盒子层级高于前面的盒子。
- 如果不是同父的，就那他们的父级的层级比较，父级层级大的无论子级z-index设置多小都比对方层级高。
- 如果找不到有设置position和z-index的父级，就那html根节点作为父级。
特殊1：如果子父都设置了position和z-index，子级设置成负数，也会在父级之上。
特殊2：如果找不到层叠上下文，且盒子设置了负数，父级是块盒，那么他会在父级下面。
CSS3之后又出了很多规则，例如：
- 如果一个节点设置了flex，且他的子级设置了z-index，那么这个子级不设置position也会被当做一个孙级的层叠上下文。
- …很多记不住
单位容易忽略的细节：%、em、rem、vh、vw、vmin、vmax区别（高）
单位分为绝对单位和相对单位，之间的区别这里就不赘述了。
一、%分为几种情况：
- 子级width的百分比为包含块width的百分比，子级height的百分比为包含块height的百分比
- 子级margin和padding的上下左右百分比都为包含块width的来计算
二、em与rem
- 1em相当于父级的font-size大小
- rem，r表示root，1rem相对于根元素（html标签）的font-size大小
你以为你理解了，其实并不，耐心看下面的例子，看看自己心算对不对：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
div {
font-size: 40px;
width: 10em;
/* 400px */
height: 10em;
outline: solid 1px black;
margin: 10px;
}
p {
font-size: 0.5em;
/* 20px */
width: 10em;
/* 200px */
height: 10em;
outline: solid 1px red;
}
span {
font-size: 5px;
width: 10em;
height: 10em;
outline: solid 1px blue;
display: block;
}
</style>
</head>
<body>
<div>
我是父元素div
<p>
我是子元素p
<span>我是孙元素span</span>
</p>
</div>
</body>
</html>
然后再改成rem试试。
三、vw与vh
- 1vw，浏览器视口宽度的1%
- 1vh，浏览器视口高度的1%
所以，内嵌的盒子就不应该使用这俩单位。
四、vmin和vmax
写一个三角符号
/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
不用伪元素也行。
也可以用css3的clip-path去绘制，有空可以去学学
伪类和伪元素
参考：http://t.csdn.cn/keASZ
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
