CSS知识总结CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、填充(padding

盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、填充(padding)、边界(margin)、边框(border)。

使用box-sizing来控制盒子模型的解析模式，默认content-box(标准盒模式),border-box(IE盒模式)。

盒模型如下：

标准盒模型（W3C盒模型）

box-sizing:content-box

宽度 = 内容宽度width(content)+border+padding+margin

.box{
    box-sizing:content-box;
    width:100px;
    height:100px;
    background-color: aquamarine;
    padding:10px;
    margin: 20px 50px;
    border: 10px solid black;
}

怪异盒模型（IE盒模型）

box-sizing:border-box

宽度 = 内容宽度width(content+border+padding)+margin

.box{
     box-sizing:border-box;
     width:100px;   //两边的padding+两边的border+content = width
     height:100px;
     background-color: aquamarine;
     padding:10px;
     margin: 20px 50px;
     border: 10px solid black;
}

display常用属性

block（块级元素）

元素前后带有换行符，独占一行，自动填满父级元素。
可以修改width和height。
margin、padding上下左右均有效。
块级元素可以包含行内元素和块级元素。

inline（行内元素）

元素前后没有换行符，与其他行内元素共享一行，满了换行显示。
不可以修改width、height。
margin、padding上下有效，左右无效，即：即使设置了，对其他元素也没有影响。参考链接
行内元素只能包含文本和其他行内元素。

inline-block（行内块元素）

可以与其他行内块元素共享一行。
可以修改width、height。
margin、padding上下左右均有效。

渐进增强 & 优雅降级

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。（相当于向上兼容）

多应用在：一些大型的公开网站、门户类网站都会使用渐进增强的方式开发，因为你不知道用户会使用什么样的浏览器和设备访问，你必须做到页面功能的全部兼容。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。（相当于向下兼容）

参考链接

为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

外边距折叠？

外边距折叠：多个相邻(兄弟或父子) 普通流的块级元素在垂直方向的margin会重叠

垂直方向外边距合并计算:

参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 进行正负相加。

隐藏元素的方法？

display:none ：不会占有原来的位置，对页面布局不起作用；资源会加载，DOM可以访问。
visibility:hidden：将元素本身及其子元素都置为不可见的；占有原来的位置，对页面布局起作用；不触发该元素绑定的事件。

子元素恢复可见：visibility: visible

opacity:0：将元素本身及其子元素都置为不可见的；占有原来的位置；可以触发元素绑定事件。
使用HTML5中的新增属性 hidden="hidden"，不会占有原来的位置

<p hidden>这个段落应该被隐藏。</p>

参考链接

Rem，em，px的区别

px是绝对长度单位。

em是相对长度单位，相对于父元素的大小。

rem是相对长度单位，相对于根元素（html），所以不会像em一样造成混乱。

'rem'是'css3'新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。有了rem这个单位，我们只需要调整根元素html的font-size就能达到所有元素的动态适配了。

z-index属性：解决多个元素重叠问题

z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。当多个元素层叠在一起时，数字大者将显示在上面。

如何画一条0.5px的线？

采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
采用transform: scale()的方式 transform: scale(0.5,0.5);

CSS动画&过渡

animation

animation学习链接

首先需要使用@keyframes定义动画名称，以及变化各个阶段所对应的样式

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

接着把创建的动画绑定到一个选择器，并且指定动画的名称、动画的时长

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

transition

transition学习链接

transition是过渡，从一个样式转变为另一个样式，也可以实现动画。

使用时需要规定两项内容：

指定要添加效果的属性，如width
指定效果持续时间

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

transition需要触发才可以改变属性，例如鼠标指针悬浮于元素上时改变：

div:hover
{
    width:300px;
}

两者的区别？

transition：过渡 animation：动画

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值。

他们的主要区别是：

transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下会随时间改变属性值；
并且transition为2帧，从from .... to，而animation可以一帧一帧的。

calc属性

Calc用于动态计算长度值，任何长度值都可以使用calc()函数计算。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

calc()函数支持 "+", "-", "*", "/" 运算；

为什么img是inline元素，还可以设置宽高？

img既为行内元素，也为置换元素。

置换元素一般内置宽高属性，所以可以设置宽高。

<img src=" " width="300" height="300"/>

CSS选择器有哪些？

参考链接

通配符选择器（*）
id选择器（#myId）
类选择器（.myClass）
标签选择器（p div h1）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器 (li a)
属性选择器（a[rel = 'external']）
伪类选择器（a:hover, li:nth-child）
伪元素选择器 (a::after)

CSS优先级

参考链接

内联样式 > 内部样式表 > 外部样式表

我们可以知道内联样式的优先级是最高的，但是外部样式有没有什么办法覆盖内联样式呢？有的，那就要 !important 出马了。因为一般情况下，很少会使用内联样式 ，所以 !important 也很少会用到！如果不是为了要覆盖内联样式，建议尽量不要使用 !important 。

计算

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器 出现的次数;
C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
D 的值等于 标签选择器 和 伪元素 出现的总次数。

比较规则是: 从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的

使用display:inline-block会产生什么问题？解决方法？

1. 问题：

两个display：inline-block元素放到一起会产生一段空白。

空白产生的原因：

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

2. 解决方法：

将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

<div class="container">
  <div class="left">
      左
  </div><div class="right">
      右
  </div>
</div>

父元素中设置 font-size: 0，在子元素上重置正确的font-size

.container{
  width:800px;
  height:200px;
  font-size: 0;
}

为子元素设置 float:left（所有子元素都要设置）

.left{
  float: left;
  font-size: 14px;
  background: red;
  display: inline-block;
  width: 100px;
  height: 100px;
}
//right是同理

【扩展】： 使用display:inline-block，需要设置以下属性：

需要设置每一列的宽度。
需要设置vertical-align。因为inline-block默认的vertical-align为：baseline。

浮动

参考链接

浮动是：

当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。

元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

优点：

在图文混排的时候可以很好的使文字环绕在图片周围。
另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等。但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题。

缺点：

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷。

清除浮动:

清除浮动不是不用浮动，而是清除浮动产生的父容器高度塌陷。

在最后一个浮动元素后，添加额外标签（必须是块级元素）

在浮动元素后面添加一个不浮动的空元素，父容器必须考虑浮动子元素的位置，子元素出现在浮动元素后面，所以显示出来就正常了。 同时要给空元素加上:style="clear:both"

<div class="parent">
    <div class="float"></div>
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

缺点：需要添加额外的html标签，这违背了语义网的原则

父级添加overflow属性(通过触发BFC，实现清除浮动)

给父容器加上overflow:hidden，加上之后，形成BFC，需要计算超出的大小来隐藏，所以父容器会撑开放入子元素，同时计算浮动的子元素。

<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>

缺点：但是一旦子元素大小超过父容器大小就会显示异常。

建立父级元素伪类选择器清除浮动（推荐）

它父容器尾部自动创建一个子元素，原理和空元素一样，可以把它设置为height：0不显示，clear：both display:block，保证空白字符不浮动区块。 (但是：after不支持IE6，只需要添加上zoom：1,这个是激活父元素的haslayout属性，让父元素拥有自己的布局）

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>

img和background-image的区别?

解析机制：img属于html标签，background-image属于css。img先解析（因为HTML先解析）
SEO：img标签有一个alt属性可以指定图像的替代文本，有利于SEO，并且在图片加载失败时有利于阅读
语义化角度：img语义更加明确

CSS哪些属性可以被继承?

字体相关属性

font-family 字体系列
font-weight 字体粗细程度
font-size 字体大小
font-style 字体风格

文本相关属性

text-indent 文本缩进
text-align 文本对齐方式
line-height 行高
color 文本颜色

元素可见性

visibility 控制元素的显示和隐藏

列表布局属性

list-style 列表风格包括list-style-type list-style-image等

光标属性

cursor 光标显示的各种形态

BFC(块格式化上下文)

W3C对BFC的定义如下：

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

什么是BFC？

BFC是块级格式化范围，决定了元素如何对其内容进行定位，以及和其他元素的关系和相互作用。

可以理解为它就是个独立的容器，容器里面的布局与外面互不影响。即：形成一个独立的渲染区域，让这里的元素不会受外界影响。

触发条件：

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

float的值不为none
position的值为 absolute 或 fixed
display的值为inline-block，table-caption、table-cell中的一个
overflow的值不为 visible

BFC渲染规则

1.BFC内部，盒子由上至下按顺序排列，间隙由盒子的外边距决定。并且同一个BFC内的两个相邻盒子具有相对方向的外边距时，外边距会发生折叠。
BFC内部无论是浮动盒子还是普通盒子，其左都和包含块的左边接触。
BFC区域不会和float区域相叠加。
BFC内外布局不会互相影响。
计算BFC高度的时候会把浮动元素的高度也计算在内。

应用场景

防止浮动导致父元素高度塌陷：父元素设置overflow：hidden

<style>
    .container {
        border: 10px solid red;
        overflow: hidden;
    }
    .inner {
        float: left;
        background: #08BDEB;
        height: 100px;
        width: 100px;
    }
</style>
<body>
    <div class="container">
        <div class="inner"></div>
    </div>
  </body>

**避免外边距折叠 **

两个块同一个BFC会造成外边距折叠，但如果对这两个块分别设置BFC，那么边距重叠的问题就不存在了。

<style>
    .container {
        background-color: green;
        overflow: hidden;
    }

    .inner {
        background-color: lightblue;
        margin: 10px 0;
    }
    .bfc{
        overflow: hidden;
    }
}
  </style>
<div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>

position属性的值？

static： static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个static元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
relative: 生成相对定位的元素，相对于其正常位置进行定位。移动后，元素仍然占据原来的空间。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。这意味着即便页面滚动，它还是会停留在相同的位置。不会保留他原本在页面应有的空隙（脱离文档流）；不随窗口滚动而滚动。
absolute： **相对于最近的“positioned”祖先元素。**生成绝对定位的元素。

如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

CCS中，给span加`vertical-align: middle`不起作用，那么文字应该如何实现垂直居中？

单行文本：设置line-height的值为height。
多行文本：vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。所以要实现上下垂直居中对齐，可以采用如下样式：

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

上面的设置方式相比设置line-height属性，可以兼容文字有多行的情形。相关博文：www.cnblogs.com/younes/p/10…

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

怎么让Chrome支持小于12px 的文字？

谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px。

针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放：

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

style标签写在body后与body前有什么区别？

写在body前有利于浏览器逐步渲染。

页面加载自上而下当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，**当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，**在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

CSS属性overflow属性:定义溢出元素内容区的内容

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

响应式设计

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

（还需要后续深入了解）

手写

CSS实现单行、多行文本溢出省略号

单行文本溢出省略号

overflow:hidden;
white-space:nowrap;  //控制不换行  
text-overflow:ellipsis;

多行文本溢出省略号

display: -webkit-box;          //弹性伸缩盒子
-webkit-box-orient:vertical;   //子元素的排列方式
-webkit-line-clamp:3;          //一个块元素显示的文本的行数
overflow:hidden;

画一个正方形

利用width=height

.square {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

利用CSS3的vw单位。（vw：相对于视口的宽度）

.square {
  width: 10vw;
  height: 10vw;
  background-color: lightblue;
}

利用padding-bottom撑开元素（百分比计算参照元素的width）

注意：height要设置为0

.square {
  width: 10%;
  height: 0;
  padding-bottom: 10%;
  background-color: lightblue;
}

画一个三角形

利用边框的均分原理

当把上图中的content部分设为0，那么div就是由四个三角形（边框宽度不等时会出现四边形）组成的。只显示一个三角形，可以把上左右边框设为透明

.triangle{
  width: 0px;
  height: 0px;
  border:100px solid transparent;
  border-bottom-color: red;

color:transparent：代表透明

画一个等边三角形

.box{
    width:0;
    height:0;
    border:100px solid transparent;
    border-bottom: 173px solid red;
}

画一个直角三角形

把中间的节点拉到右上角，即把top和right设为0。

.box{
    width:0;
    height:0;
    border-left:100px solid transparent;
    border-bottom:100px solid red;
}

![image-20210304173153019](/Users/masiyan/Library/Application Support/typora-user-images/image-20210304173153019.png)

画一个圆形

**利用border-radius:50%**

.circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background-color: bisque;
}

画一个扇形

方法1：

.sector {
    border-radius: 80px 0 0 0;
    width: 80px;
    height: 80px;
    background-color: cadetblue;
}

![image-20210304173606078](/Users/masiyan/Library/Application Support/typora-user-images/image-20210304173606078.png)

background-color属性设置一个元素的背景颜色。

方法2：

.sector {
  box-sizing: border-box;
  width: 200px;
  border: solid 100px transparent;
  border-top-color: thistle;
  border-radius: 50%;
}

Flex布局

学习链接

Flex是弹性布局，用来为盒装模型提供最大的灵活性。布局的传统解决方案基于盒装模型，依赖display、position和float属性。任何一个容器都可以指定为 Flex 布局。

注意：设置为 Flex 布局后，子元素的 float 、clear 和 vertical-align 属性将失效。

属性分为容器属性和元素属性：

容器属性：

flex-direction:决定主轴的方向

.box{
    flex-direaction:row|row-reverse|column|column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：如果一条轴线排不下，如何换行。

.box{
    flex-wrap:nowrap|wrap|wrap-reverse;
    /*不换行|换行第一行在上|换行第一行在下*/
}

flex-flow:前面两个的简写

.box{
      flex-flow:<flex-direction>||<flex-wrap>;
  }

justify-content：定义了项目在主轴上的对齐方式。

.box{
      justify-content:flex-start|flex-end|center|space-between|space-around;   
  }

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items：定义项目在交叉轴上如何对齐。

.box{
    align-items:flex-start|flex-end|center|space-between|space-around;
}

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

项目属性：

order：定义项目的排列顺序，越小越靠前。
flex-grow：放大比例，默认为0，即使存在空间也不会放大；1是说等分剩余空间。
flex-shrink：缩小比例，当空间不够的情况下，会等比例缩小；0是不缩小，1是等比缩小。
flex-basis：设置项目的初始大小。
- em、px、%：项目将占据固定空间
- auto：依赖自身内容
flex：上面三个属性的缩写，默认是0 1 auto。后两个属性可选。
align-self：允许单个与其他不一样的对齐方式，可以覆盖align-items属性，默认是auto表示继承。

Grid布局

学习链接

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

display:grid：指定一个容器采用网格布局

grid-template-columns：定义每一列的列宽
grid-template-rows：定义每一行的行高

1. repeat():网格很多时。这时，可以使用repeat()函数，简化重复的值。
	 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
	 grid-template-columns: repeat(3, 33.33%);
2. auto-fill关键字表示自动填充。
	 grid-template-columns: repeat(auto-fill, 100px);
	 表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
3. fr 关键字：为了方便表示比例关系，网格布局提供了fr关键字

grid-column-gap：列间距
grid-row-gap：行间距
grid-gap：上面两个的简写，行间距列间距（先行后列）

grid-column：定义网格项开始和结束的位置，进而控制网格项占据的列数 grid-column:2/4：从左侧第2条线到第4条线结束。
grid-row：定义行的开始和结束的水平线

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

justify-items属性设置单元格内容的水平位置（左中右）
align-items属性设置单元格内容的垂直位置（上中下）

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

justify-content属性是整个内容区域在容器里面的水平位置（左中右）
align-content属性是整个内容区域的垂直位置（上中下）。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

网格单位：

（1）绝对/相对单位：px、em （2）fr：列/行占剩余空间的比例（3）auto：列/行宽自动等于它的内容宽/高度。

多端适应

静态布局

特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
一般都使用min-width定宽，小于这个宽度就会出现滚动条，大于就内容居中加背景。
设计方法：

PC端居中布局所有样式绝对宽高，设计一个layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩的部分。

移动设备另外建立，单独设计一个布局，使用不同的域名如wap或m

流式布局

布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】
设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。

自适应布局

分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

响应式布局

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

媒体查询+流式布局。通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

优点：适应pc和移动端，如果足够耐心，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

弹性布局

特点是：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

CSS预处理

优点

用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以便项目使用。
CSS更加简洁、适应性更强，更易于代码的维护

基本语法

Less的基本语法和CSS差不多，SASS和Stylus都可以利用缩进代替花括号，并且空格有重要的意义。

- less&scss;
ul{
    list-style:none;
}
-sass
ul
    list-style:none
- stylus:
ul
    list-style none

变量

-less&scss;
@orange:#feb914;
header{
    background-color:@orange;
}
- sass
$orange:#feb914;
header
    background-color:$orange;
- stylus
bgorange=#feb914;
header
    background-color bgorange

变量作用域

less中素有变量的计算，都是以这个变量最后一次被定义的值为准，这个行为叫懒加载

@size:40px;
.content{
    width:@size;
}
@size:60px;
.container{
    width:@size;
}
 
=>编译输出
.content{
    width:60px;
}
.container{
    width:60px;
}
 
-sass stylus
$size:40px;
.content{
    width:$size;
}
$size:60px;
.container{
    width:$size;
}
=>编译输出
.content{
    width:40px;
}
.container{
    width:60px;
}

总结：

sass和less语法严谨，Stylus相对自由，因为Less更像原生的CSS，所以可能学起来更加容易
sass和compass、stylus和nib都是好朋友
sass和stylus都具有类语言的逻辑方式处理：条件、循环等；less需要通过when等关键词模拟这些功能，这方面less比不上sass和stylus
less在丰富性及特色上都不及sass和stylus，如果不是bootstrap引入了less，可能不会这样被广泛应用。

CSS知识总结

盒模型

标准盒模型（W3C盒模型）

怪异盒模型（IE盒模型）

display常用属性

block（块级元素）

inline（行内元素）

inline-block（行内块元素）

渐进增强 & 优雅降级

为什么要初始化CSS样式？

外边距折叠？

隐藏元素的方法？

Rem，em，px的区别

z-index属性：解决多个元素重叠问题

如何画一条0.5px的线？

CSS动画&过渡

animation

transition

两者的区别？

calc属性

为什么img是inline元素，还可以设置宽高？

CSS选择器有哪些？

CSS优先级

计算

使用display:inline-block会产生什么问题？解决方法？

1. 问题：

空白产生的原因：

2. 解决方法：

浮动

浮动是：

优点：

缺点：

清除浮动:

img和background-image的区别?

CSS哪些属性可以被继承?

BFC(块格式化上下文)

W3C对BFC的定义如下：

什么是BFC？

触发条件：

BFC渲染规则

应用场景

position属性的值？

CCS中，给span加vertical-align: middle不起作用，那么文字应该如何实现垂直居中？

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

怎么让Chrome支持小于12px 的文字？

style标签写在body后与body前有什么区别？

CSS属性overflow属性:定义溢出元素内容区的内容

响应式设计

手写

CSS实现单行、多行文本溢出省略号

画一个正方形

画一个三角形

画一个等边三角形

画一个直角三角形

画一个圆形

画一个扇形

Flex布局

容器属性：

项目属性：

Grid布局

多端适应

静态布局

流式布局

自适应布局

响应式布局

弹性布局

CSS预处理

优点

基本语法

变量

变量作用域

CCS中，给span加`vertical-align: middle`不起作用，那么文字应该如何实现垂直居中？