CSS基础

CSS基础

两种盒模型

w3c盒子模型 content-box

IE盒子模型 border-box

w3c的盒子模型中盒子宽度为content+padding+border 其中设置width的时候只设置了content 其他不设置

IE的盒子模型中盒子宽度为content+padding+border 其中设置width的时候会将content padding border一起算进去

如何实现垂直居中(方案尽可能多)

transfrom

.center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

flex

.parent{
    display:flex;
    align-items:center;
    justify-content:center;
}

grid

.parent{
    display:grid;
}
.center{
    margin:auto;
}

text-center

.parent{
    text-align:center;
}

margin

.center{
    margin:0 auto;
}

table-cell

.parent{
    display:table-cell;
    vertical-align:middle;
}
.center{
    margin:auto;
}

移动端适配方案

1.Flexible

先根据html元素的font-size来做计算的计算属性值通过设置documentElement的fontSize属性来统一页面的布局标准

控制viewport的width和scale值适配高倍屏显示

缺陷:

不能兼容iframe
对高倍屏的安卓手机没做处理
不兼容响应式布局
无法正确响应系统字体大小

2.vh/vw

根据CSS3规范，视口单位主要包括以下4个：

1.vw：1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

vw/vh和100%的区别
100%是相对于包含它的最近的父元素的高度和宽度。
vw (viewport width) vh (viewport height) 是相对于视口的宽度和高度，用vw，vh设定的大小只和视窗大小有关，和他们的父元素高度宽度没关系，可以用来开发自适应多种屏幕设备。

后面的文章链接

viewport

width	设置*layout viewport* 的宽度，为一个正整数，或字符串”width-device”
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置*layout viewport* 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

面经css - 图1

面经css - 图2

BFC

BFC到底是什么东西

BFC 全称：Block Formatting Context，名为 “块级格式化上下文”。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

怎样触发BFC

这里简单列举几个触发BFC使用的CSS属性

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

选择器优先级

CSS选择器类型

样式类型

行内样式：<style></style>

内联样式：<div style="color:red;">

外部样式：<link>或@import引入

选择器类型

id选择器、class选择器、属性选择器、*、伪类选择器、伪元素、后代选择器、子类选择器、兄弟选择器

权重计算规则

第一优先级：!important会覆盖页面内任何位置的元素样式
1.内联样式，如style="color: green"，权值为1000
2.ID选择器，如#app，权值为0100
3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
4.标签、伪元素选择器，如div::first-line，权值为0001
5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
6.继承的样式没有权值

比较规则

1.1000 > 0100，从左向右逐个比较，前一级相等才能往后比较
2.无论是行内样式、内部样式还是外部样式，都是按照以上提到的权重方式进行比较，面试的时候遇到优先级比较，答案往往是：行内>id>class>元素(标签)，我们以为给了能令面试官满意的答案，其实不然，比如对同一个元素操作，在权重相等的情况下，后面的样式会覆盖前面的，这样我们给出来的答案就不成立了
3.权重相同的情况下，位于后面的样式会覆盖前面的样式
4.通配符、子选择器、兄弟选择器，虽然权重为0000，但是优先于继承的样式

比较规则

1.1000 > 0100，从左向右逐个比较，前一级相等才能往后比较
2.无论是行内样式、内部样式还是外部样式，都是按照以上提到的权重方式进行比较，面试的时候遇到优先级比较，答案往往是：行内>id>class>元素(标签)，我们以为给了能令面试官满意的答案，其实不然，比如对同一个元素操作，在权重相等的情况下，后面的样式会覆盖前面的，这样我们给出来的答案就不成立了
3.权重相同的情况下，位于后面的样式会覆盖前面的样式
4.通配符、子选择器、兄弟选择器，虽然权重为0000，但是优先于继承的样式

position的值有哪些，区别是什么

relative(相对定位)

相对于元素自身定位，定位后空间不释放

absolute(绝对定位)

相对于最近的已定位的祖先元素进行定位，定位后空间释放，最深的祖先元素是body

fixed(固定定位)

相对于浏览器窗口(window)定位,定位后空间释放

sticky(粘性定位)

相当于relative 和 fixed 的混合,在元素处于正常文档流时，定位是relative，滑出当前浏览器窗口时，定位fixed；

animation的参数，怎样实现一个动画

面经css - 图3

如何实现一个动画

css设置元素隐藏，两种有什么区别？

属性	表现
`display:none`	不占据空间，不会触发事件，触发重排和重绘
`visibility:hidden`	占据空间，不会触发事件，只触发重绘
`opacity: 0`	占据空间，会触发事件，只触发重绘
`transfrom: scale(0)`	占据空间，不会触发事件，只触发重绘
`width和height设置为0`	不占据空间，不会触发事件，触发重排和重绘

css有哪些单位

PX、EM、REM、%、VW、VH、VM

Link与@import的区别

本质上，这两种方式都是为了加载css文件，但还是存在细微的差别。

差别1：老祖宗的差别，link属于XHTML标签，而@import完全是css提供的一种方式。

link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

差别2：加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

差别4：使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。