常见的盒子模型

标准盒模型（content-box）

怪异盒模型（IE盒模型）

IE盒模型和怪异盒模型的区别

标准盒模型的width = content-box；标准盒模型的宽度指的是内容宽度，不包括padding和border的宽度。
IE盒模型的width = border-box；IE盒模型的宽度包括padding和border。

利用css画出三角形以及梯形以及其余图形

css画其余图形

设置宽高，而且展现四个border

#div{
    width:20px;
    height:20px;
    margin:0 auto;
    border-top:100px solid red;
    border-bottom:100px solid green;
    border-left:100px solid black;
    border-right:100px solid yellow;
}
复制代码

不设置宽高，展现四个border

#div{
    width:0px;
    height:0px;
    margin:0 auto;
    border:100px solid;
    border-color:red green yello black;
}
复制代码

css画三角形

#div{
    width:0px;
    height:0px;
    margin:0 auto;
    border:100px solid;
    border-color:transparent transparent yellow transparent;
}
复制代码

css画梯形

width:60px;
    margin:0 auto;
    border:100px solid;
    border-color:transparent transparent yellow transparent;
}
复制代码

css画圆

width:100px;
    height:100px;
    margin:0 auto;
    border-radius:100%;
    background:red;
}
复制代码

css画扇形

#div{
    width:0px;
    height:0px;
    border:100px solid;
    border-color:transparent transparent yellow transparent;
    border-radius:100%;
}
复制代码

CSS选择器

CSS1和CSS2选择器

类选择器(.class)：选择全部类名为class的元素
ID选择器（#main）：选择全部ID为main的元素
通配符选择器（*）：选择全部元素
元素选择器（p）：选择全部p元素；
分组选择器（div，p）：选择全部的div和p元素
子代选择器（div>p）:选择父元素为div的全部p元素
相邻兄弟选择器（div+p）：紧邻在div的p元素，必须是兄弟关系
（div p ）:选择在div内部的全部p元素
属性选择器
- [target]:选择带有target属性的全部元素
- [src = imgUrl]：选择带有src属性且等于imgUrl的全部元素
- [class ~=hello ]:选择带有class属性，且属性值等于hello的全部元素
- [class |= h]:选择带有class属性且值以h开头的全部元素
a连接选择器
- a:link:未被访问的全部a连接
- a:visited：已经被访问的全部a连接
- a:active:被选择的a连接
:hover:鼠标移上的元素
:fous:鼠标的点击焦点
p:before:在每一个p元素里面的最前加入内容
p:after:在每一个p元素里面的最后面加入内容

CSS常见属性概括

overflow有哪些属性值，分别表明什么意思

overflow:visible（默认）。内容不会被修剪，超出内容会呈如今元素外
overflow:hidden；内容被修剪，超出部分隐藏。
overflow:auto;若是内容超出，则出现滚动条，若是没有超出则不出现滚动条
overflow:scroll,内容超不超出都会出现滚动条

CSS3常见知识概括

##calc函数css

calc函数是c3新增的新功能，可使用calc计算border、margin、padding、font-size、等属性设置动态值。
须要注意的是：
- 运算符先后都须要保留一个空格
- calc函数支持 + - * / 运算

#div{
    width:calc( (100% - 10px) * 2 )
}
复制代码

伪类和伪元素

伪类：伪类的意义是经过选择器找到不能被常规css选择器获取的元素;li中的第一个元素，first-child。以及获取不存在Dom树中的信息，好比a标签中的link，hover等等。简单理解只有一个:的大部分都是伪类

经常使用的伪类
- p:first-of-type:第一个p元素。
- p:last-of-type:最后一个p元素。
- nth-child(n):第n个元素。
- nth-last-child(n):从后面数第n个元素。
- a:link未被访问的a连接
- a:visited已经被访问的a连接
- a:active被选中的a连接

伪元素

伪元素：用于建立一些不在Dom树中的元素，并为其添加样式，例如咱们能够经过:before来在一个元素前增长一些文本。
建立的伪元素
- ::before在元素的前面插入内容，配合content使用
  - 注意：一、第一个子元素
  - 二、建立的的行内元素
  - 支持css样式
- ::after在元素的最后main插入内容，配置content使用，注意和::before同样。
- ::first-line选中块级元素的第一行文本
- ::first-letter选中块级元素的文本的首字母设置特殊样式；注意只能是块级元素
- ::selection定义被选中的部分，通常用于文本选中修改颜色背景色等等。

CSS3经常使用的新增属性

border-radius：圆角
box-shadow:h-shadow(水平阴影) v-shadow(垂直阴影) bulr(模糊距离) color(颜色) 盒子阴影
border-image:url()图片地址 left top定位 no-repeat不覆盖
- 多张图片组合用逗号分隔
text-show:h-shadow(水平阴影) v-shadow(垂直阴影) bulr(模糊距离) color(颜色) 文本阴影同上
文本超出部分以省略号的形式展现：
- white-space:nowrap超出文本不换行 // wrap换行
- overflow:hidden 超出部分隐藏
- text-overflow:ellipsis文本超出以省略号的形式展现 ///clip直接隐藏
非中日韩文本的换行：word-break
- word-break:keep-all以-拆分换行
- word-break:break-all直接拆分换行
全部文本换行word-wrap:break-word

CSS3，transform转换

transform2D转换：
- transform：translate(x,y)从当前位置顶部沿X轴和Y轴移动
- tansform: rotate(30deg)从当前位置的中心旋转30°
- transform: skew(x,y)从当前位置沿X轴和Y轴倾斜
- transform:scale(x,y)x轴的缩放放大，y轴的缩放放大
transform3D转换
- transform:translate3d(x,y,z),
- transform:rotate3d(x,y,z,angle)x,y,z的值是0到1；angle为角度

CSS3过渡 transition

transition all 2s ease 0s
- 第一个参数表示：须要过渡的属性，默认all，全部属性都过渡；基本上全部属性都能过渡，除了float、渐变。
- 第二个参数：过渡时间
- 第三个参数：缓冲描述；ease逐渐变慢、linear匀速、ease-in先慢后快、ease-out先快后慢、ease-in-out先慢后快再慢。
- 第四个参数：延迟时间。
执行单个transform转换

.box{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s,height 2s,transform 2s;
}
.box:hover{
    width:200px;
    height:200px;
    transform:rotate(180deg);
}
复制代码

执行多个transform转换

.box{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s,height 2s,all 2s;
}
.box:hover{
    width:200px;
    height:200px;
    transform:rotate(180deg) translate(100px,100px)
}
复制代码

CSS3动画 animation

@keyframes建立动画；再经过animation来执行动画
- animation属性
  - animation-name:动画属性
  - animation-duration:动画持续时长
  - animation-timing-function:定义动画的速率；ease、ease-in、linear、ease-in-out、ease-out等等
  - animation-delay:延迟时间
  - animation-interation-count:播放次数；infinite无限次
  - animation-fill-mode:forwards停留在最后一帧、backwards停留在第一帧、both轮流

.box {
    width:100px;
    height:100px;
    background:red;
    animation:rotate 1s infinite linear;
}
@keyframes rotate {
    0% {
        color:aqua;
    }
    50% {
        color:bisque;
    }
    100% {
        background:yellow;
    }
}
复制代码

infinite无限次循环播放
linear 开始到结束的速度一致

animation和transition有什么区别，animation如何停留在最后一帧

transition通常用来过渡，没有时间轴概念，经过事件触发，没中间状态，只有开始和结束。过渡的开销比较小，通常用于简单的页面交互。
animation通常是作动效的，有时间轴概念（帧可控），能够重复触发，有中间状态。

CSS3flex布局

flex布局后其全部的子元素都会自动变成flex项目；子元素的float、clear、vertical-align属性都会失效。
块级元素display:flex;行内元素则为display:inline-flex;

flex的属性介绍

flex容器属性

flex-direction设置主轴的方向
- row（默认值）：主轴的方向为水平方向，起点在左边
- row-reverse:主轴的方向为水平方向，起点在右边
- column：主轴的方向为垂直方向，起点在上沿
- column-reverse：主轴的方向为垂直方向，起点在下沿
flex-wrap设置在轴线上的项目若是排不下如何换行
- nowrap(默认)：不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
flex-flow是flex-direction和flex-wrap的简写形式；默认值为row nowrap
justify-content属性决定了主轴的对齐方式；下面假设flex-direction:row;
- flex-start:左对齐
- center：居中
- flex-end:右对齐
- space-between:两端对齐，项目之间的间隔相等
- space-around:每一个项目之间的间隔相等，因此两个项目之间的间隔是最左、右边的两倍
align-items属性决定交叉轴上的对齐方式;假设交叉轴为垂直方向
- flex-start：上对齐
- center：居中对齐
- flex-end：下对齐
- baseline：项目的第一行文字的基线对齐
- stretch(默认):若是项目未设置高度或者设为auto，将占满整个容器的高度
align-content属性决定了多跟项目轴线的对齐方式，意思就是项目换行产生的多跟水平轴线，顾必须有flex-wrap:wrap属性，才能生效，若是只有一根轴线该属性不生效。
- flex-start: 上对齐
- center：居中对齐
- flex-end:下对齐
- space-between:上下两端对齐，项目间隔相等
- space-around:项目之间的间隔相等，最上、下的两个项目是其余间隔的二分之一
- space-evenly:全部项目的间隔相等。

项目属性

order：默认0；用整数值来定义排列顺序，数值小的排在前面，能够为负值。
- 默认值order:0时
- 将中间的一个或者某些移到最前面的方法
flex-grow属性定义的是项目的放大比例，默认值为0；即若是由剩余控件也不放大。
- 若是flex-grow为1，项目将等分剩余空间；若是其中一个项目为2，其余都为1，则这个项目比其余的项目占据的空间多一倍。
flex-shrink定义了项目的缩小比例；默认值为1。值必须是正值
flex-basis属性定义了项目占据的主轴空间；默认值是auto，即项目原本的大小
- 它能够设为和width或者height同样的值，好比200px
flex 属性是flex-grow、flex-shrink、flex-basis的简写，默认值是0 1 auto；后两个属性可写
- flex属性有两个快捷值，auto(1 1 auto)、none(0 0 auto)
align-self属性容许单个项目与其余项目不同的对齐方式；可覆盖align-items属性，默认值为auto表明继承父元素的align-items属性
- auto：继承父级的align-items，若是没有父级值则为stretch（占满整个容器的高度）
- flex-start：上对齐
- flex-and；下对齐
- center：居中对齐
- baseline：项目的第一行文字基线对齐
- stretch：占满整个容器的高度

CSS媒体查询

在css中直接写入
@media screen(媒体类型) and (min-width:100px)(媒体功能){ .hello{ color:red } }
媒体类型
all适用于全部设备
screen 适用于电脑屏幕、平板电脑、智能手机
speech 适用于屏幕阅读器等发声设备
媒体功能
- max-width 设置输出设备最大页面可见宽度
- min-width 定义设备最小的可见宽度
- width 定义输出设备页面的最大可视宽度
- min-height定义设备页面的最小高度
- max-height 定义设备的页面的最大高度
经过link引入媒体查询定义的样式
- <link rel="stylesheet" media="screen and|not|only (max-width:300px)" href="mystylesheet.css">

css常见面试题总结

文本超过隐藏，并以省略号的方式展现

white-space:nowrap 超出文本不换行
overflow:hidden 超出部分隐藏
text-overflow:ellipsis

块级元素水平垂直居中

定宽高

子元素用绝对定位，设置宽高，top：50%；left：50%；再利用margin：-宽度一半 0 0 -高度一半

.father{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 100px;
}
复制代码

未知宽高

定位实现;子元素设置绝对定位，上左各50%，tranform tranlate -50%。

.father{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    tranform: translate(-50%, -50%);
    background: yellow;
}
复制代码

flex布局实现;父级元素display:flex;justify-content:center;align-items:center

.father{
    width: 400px;
    height: 400px;
    background: red;
    diapaly: flex;
    justify-content: center;
    align-item: center;
}
复制代码

模拟表格实现；父级display:table-cell;text-align:center;vertical-align:center;子元素设置display:inline-block

.father{
      width: 400px;
      height: 400px;
      background: red;
      diapaly: teble-cell;
      text-align: center;
      vertical-align: center;
  }
  .son{
      display: inline-block;
  }
复制代码

两边宽度固定，中间自适应的三栏布局

利用calc函数

.left{
    width: 200px;
    height: 100%;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
}
.content{
    width: calc(100% - 200px - 200px);
    position: absolute;
    height: 100%;
    background: yellow;
    left: 200px;
    top: 0;
}
.right{
    width: 200px;
    height: 100%;
    background: aqua;
    position: absolute;
    right: 0;
    top: 0;
}
复制代码

利用浮动和margin和padding

.main{
    overflow: hidden;
    padding: 0 200px;
}
.left{
    float: left;
    width: 200px;
    height: 100vh;
    margin-left: -200px;
    background: red;
}
.content{
    float: left;
    width: 100%;
    height: 100vh;
    background: yellow;
}
.right{
    float: left;
    width: 200px;
    height: 100vh;
    margin-right: -200px;
    background: aqua;
}
复制代码

CSS box-sizing属性决定了用哪一种盒子模型的解析模式

box-sizing = content-box标准盒模型 --默认
box-sizing = border-box IE盒模型

css有哪些选择器；哪些属性能够继承

css选择器有：id选择器、类选择器、组合选择器(div,p)、子代选择器（ul>li）、伪类选择器(:hover,li:neh-child(2))、属性选择器([src = imgUrl])、通配符选择器、标签选择器（div p span）
可继承的属性
- font-size、font-family、color
不可继承的属性
- width、height、padding、border

CSS优先级怎么计算的

元素选择符：1 通配符*;div.hello 类名为div的标签
类选择器：10
ID选择器：100
元素的标签：1000
!important声明的样式优先级最高
若是优先级相同，则选择最后的样式
继承获得的样式的优先级最低

dispaly有哪些值，都有什么做用

dispaly:none；隐藏元素，而且不保留元素的现实空间。
display:inline; 将元素定义为行内元素；行内元素不可定义宽高；宽高是内容撑开的宽高
dispaly:inline-block;将元素定位为行内块元素；使得这个元素能够设置宽高。可是注意行内块元素不支持margin：auto;margin只支持块级元素。
display:block；将元素定义为块级元素；元素继承父级宽度；独占一行

常见的兼容性问题

不一样浏览器的标签默认的margin和padding不一样；能够用*{margin:0;padding:0}来取消margin、padding不一样的问题

为何要初始化css样式

由于浏览器兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没有对css初始化会出现浏览器之间的页面差别

display:none和visibility有什么区别

display:none;不显示其元素，在文档中不保留分配的空间；（回流+重绘）
visibility:none；不显示其元素，在文档中保留分配的空间（重绘）

页面的回流和重绘

回流：元素因规模尺寸、布局的改变须要从新构建页面时，称为回流。回流必然伴随着重绘
重绘：更新元素的属性，并且这些属性只影响元素的颜色，外观等称为重绘。重绘不必定有回流，例如改变颜色

说说你对BFC的理解

BFC的布局规则

内部的box盒子会在垂直方向，一层一层的接着放置
box盒子垂直方向的距离由margin决定，属于同一个BFC元素的相邻盒子的margin会发生重叠。
每一个盒子的margin-left都与它的父元素的border相接触，及时存在浮动也同样；
- 不存在浮动
- 存在浮动
BFC区域不会与float盒子发生重叠。
BFC在页面上就是一个独立的容器，他里面的元素不会影响到外部的元素，反之如此。
计算BFC的高度时，浮动元素也参与计算。

如何建立BFC元素

float值不等于none；
display的值等于inline-block、table-cell、flex、inline-flex
position的值不等于static、relative
overflow的值不等于visible

BFC的做用

避免同一个BFC元素的margin重叠
自适应两栏布局：左浮动，右边加个overflow:hidden
清除浮动；利用BFC计算高度时会将浮动的高度也进行计算。

为何会出现浮动,清除浮动的方式有哪些

浮动是由于给一个元素设置浮动后，他将脱离文档流，影响父级高度的计算。
清除浮动的方式
- 给父级设置一个固定的高度
- 在最后一个浮动的元素加空div，并添加clear:both
- 在父级元素添加overflow:hidden

块级元素、行内元素、空（void）元素有哪些

块级元素:p、div、ul、li、header、footer等等。
行内元素：span、img、input、a
void元素：hr、br

link和@import的区别

link属于HTML标签，而@import是css提供的，页面被加载时，link会同时加载，而@import引用的css会等到页面加载完再加载
@import只在IE5以上才能被识别，而link是HTML标签，没有兼容性问题。
link的权重高于@import

让元素隐藏的方法

visibility:hidden;//元素隐藏，可是不会改变布局，绑定的事件不能触发。
display:none;/元素隐藏，而且页面布局会改变
opcity:0;//元素隐藏，布局不会改变，绑定的事件仍然能够触发
z-index:-100;//将元素置于其余元素之下

行内块元素之间的空白怎么解决

行内块之间出现空白的缘由：元素被当成行内排版的时候，元素之间的空白符、回车都会被浏览器处理，根据white-space的处理方式（默认normal，合并多余空白），原来html代码中的回车会被转成一个空白符，因此元素之间出现了空隙，这些元素之间的空隙会随着字体大小而变化。
行内元素之间没有设置margin的状况下也会出现空白间隙。
如何去除他们之间的空白方式有如下几种
- 之全部有空白间隙是由于有换行符、tab、空格等，咱们能够经过上一个元素的闭合标签和下一个元素的开始标签写在同一行，或者两个inline-block元素以前加上空白注释。
```
<div>
  <a>行内块元素</a
  ><a>排行榜</a>
</div>
//或者
<div>
  <a>你好</a><a>世界</a>
</div>
复制代码
```
- 父元素的font-size设置为0，子元素单独设置font-size
```
.father{
    font-size:0;
}
.son{
    font-size:16px
}
复制代码
```
- 用浮动代替样式
```
p{float:left}
复制代码
```
- 用弹性盒子代替样式;将其dispaly:flex

CSS经常使用基础概括

常见的盒子模型

标准盒模型（content-box）

怪异盒模型（IE盒模型）

IE盒模型和怪异盒模型的区别

利用css画出三角形以及梯形以及其余图形

css画其余图形

css画三角形

css画梯形

css画圆

css画扇形

CSS选择器

CSS1和CSS2选择器

CSS常见属性概括

overflow有哪些属性值，分别表明什么意思

CSS3常见知识概括

伪类和伪元素

伪类：伪类的意义是经过选择器找到不能被常规css选择器获取的元素;li中的第一个元素，first-child。以及获取不存在Dom树中的信息，好比a标签中的link，hover等等。简单理解只有一个:的大部分都是伪类

伪元素

CSS3经常使用的新增属性

CSS3，transform转换

CSS3过渡 transition

CSS3动画 animation

animation和transition有什么区别，animation如何停留在最后一帧

CSS3flex布局

flex的属性介绍

flex容器属性

项目属性

CSS媒体查询

css常见面试题总结

文本超过隐藏，并以省略号的方式展现

块级元素水平垂直居中

定宽高

未知宽高

两边宽度固定，中间自适应的三栏布局

CSS box-sizing属性决定了用哪一种盒子模型的解析模式

css有哪些选择器；哪些属性能够继承

CSS优先级怎么计算的

dispaly有哪些值，都有什么做用

常见的兼容性问题

为何要初始化css样式

display:none和visibility有什么区别

页面的回流和重绘

说说你对BFC的理解

BFC的布局规则

如何建立BFC元素

BFC的做用

为何会出现浮动,清除浮动的方式有哪些

块级元素、行内元素、空（void）元素有哪些

link和@import的区别

让元素隐藏的方法

行内块元素之间的空白怎么解决