css3复习大纲

r囧r小猫 2022-05-11 10:08 470阅读 0赞

# css3部分： #

CSS3有很大的兼容性问题，IE9以下不兼容CSS3.0，IE10才开始全面支持CSS3。  
而由于浏览器厂商的不同，我们在使用CSS3的时候，有时候需要单独为每一种浏览器写兼容。

### 浏览器兼容形式 ###

> 前缀 浏览器  
> \-webkit chrome、safari  
> \-moz Firefox  
> \-ms IE  
> \-o opera

因此我们在写面向所有移动端设备的CSS3属性的时候，需要先写-webkit，再写-moz，再写-ms，再写写-o，最后写一个没有前缀的，  
这样浏览器会根据内核来选择相对应的前缀，而其他的浏览器不支持的前缀则无法识别。

### 常见浏览器内核 ###

IE-------->trident
    Chrome---->webkit/blink
    Safari----->webkit
    Firefox---->Gecko
    Opera------>presto

### CSS3的功能 ###

CSS3提供了强大而且精准的选择器，提供了多种背景填充方案、可以实现渐变颜色、改变元素形状、角度、加阴影效果，新的报纸布局(多列布局)、弹性盒子，  
ie6混杂模式的盒子模型，新的计量单位，动画效果等等。

#### 一些新的CSS3属性: ####

> /1.border-radius  
> /2.box-shadow  
> /3.border-image  
> /5.background: linear-gradient  
> /6.word-wrap

#### border-radius ####

border-radius：左上，右上，右下，左下。  
border-top-left-radius: 左上  
border-radius: 左上x，右上x，右下x，左下x/ 左上y，右上y，右下y左下y

#### em rem ####

em是指相对于父节点字体的大小，父节点字体大小是1em  
rem是相对于根节点（html），根节点默认字体是16px，一般时候会将html的font-size设置为10px，或者是62.5%；

#### box-shadow ####

box-shadow：2px, 5px, 3px, \#333,inset  
参数：x轴偏移量，y轴偏移量，模糊半径，拓展半径，颜色, 向内投影还是向外投影（向外投影时，不需要添加最后一个参数，添加就不好使啦）  
同一个盒子可以同时加多个阴影，阴影之间用逗号隔开，常用于给不同的方向加不同颜色的阴影  
box-shadow:4px 2px 6px \#f00,-4px -2px 6px \#000, …  
性能杀手，少用

#### text-shadow ####

参数：x轴偏移量，y轴偏移量，模糊半径，颜色  
模糊半径不建议设置太大，会使文本看不清楚。

#### 渐变的背景颜色 ####

（1）线性渐变  
语法：background:linear-gradient(\[direction\],color\[percent\],color\[percent\],…)  
eg：background：linear-gradient（to right，red 30%， green 80%，orange）；  
（2）径向渐变  
语法：radial-gradient（shape at position， color\[\[percent\],color,…）  
eg： background: radial-gradient(circle 100px at 50% center, red 30%, green 80%, orange);  
eg: background: radial-gradient(ellipse 100px 50px at 50% center, red 30%, green 80%, orange);  
shape:可以是正圆:circle，或者椭圆：eclipse  
poaition：圆心位置，可以为两个值，也可以为一个，如果是一个值，第二个值默认是center即50%，值类型可以是百分数，像素，也可以是方位值（left，top… ）角度单位：deg

#### word-wrap：normal | break-word 文本边界换行 ####

#### font-face ####

字体库：[http://www.w3cplus.com/content/css3-font-face][http_www.w3cplus.com_content_css3-font-face]  
@font-face\{  
font-family: ‘myFont’ 自定义字体名字  
src:url(字体路径.ttf),url(字体路径.eot) format(‘eot’);  
\}  
a \{  
font-family: ‘myFont’;  
\}  
有些浏览器不支持ttf格式的文字，所以又是要用eot来兼容，format是告诉浏览器，我的文件是什么格式的。

#### border-image：url（路径）number ####

number 切割的长度  
stretch 拉伸，有多长拉多长，有多远滚多远、  
repeat （和四角同样大小的图片进行平铺，当边框中间区域长度不是死角图片大小的整数倍，会被切割）  
round （四角上的图片 进行拉伸平铺 不会被切割）（共三个参数）

> number即，将图片从上至下，从左至右进行切割，左上交给左上角，其他四角一样，中间的给边框，当number大于图片的一般长度时候，只有四角有图片，边框没有。

eg：border-image：url（./border.png） 30 30 stretch;

#### background-origin ####

设置背景图片时，默认从padding区域开始引入。  
background-orign：border-box|padding-box|content-box  
参数表示图片是从边框，还是内边框还是内容区域开始展示的。  
默认background-repeat：repeat；

#### background-position：x轴偏移量，y轴偏移量、 ####

即改变图片中心点的位置，将其中心进行偏移。常于雪碧图进行使用，可用百分比，像素值，关键字：center, top left, …

#### background-size ####

设置图片的大小，以长度或者百分比来表示，还可以用关键字cover，contain进行伸缩，  
1、auto：默认值，不改变原始图片的长度和宽度  
2.长度值：成对出现，将背景图片宽高依次设置为前面的两个值，设置一个值的时候，将其作为图片宽度值来比例缩放。  
3.百分比：按比例缩放  
4.cover:用图片铺满整个背景，比例不符合，截断图片。  
5.contain：尽量让图片铺满整个背景。

#### background-clip 裁剪背景图片 ####

background-clip:border-box|padding-box|content-box|text  
即从border区域进行裁剪，即保留图片border到content区域，。。。  
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。  
注意：webkit独有属性，且必须配合text-fill-color属性使用  
\-webkit-background-clip：text；  
\-webkit-text-fill-color：transparent（透明色）  
text-fill-color：-webkit-background-clip：

#### 盒模型 ####

css3有一个选择盒模型的属性。  
box-sizing：border-box/content-box  
border-box为IE6混杂模式的盒子  
content-box为W3C标准盒子，  
混杂模式盒子即，将padding，border加入到content里面去，即设置width为100px，padding：10px，border：10px的时候，content区域width是60px，

#### columns 多列布局 ####

> columns 规定设置 column-width 和 column-count 的简写属性。  
> column-count 规定元素应该被分隔的列数。  
> column-width 规定列的宽度。（最小的宽度，多余会平分）

column-fill 规定如何填充列。  
column-gap 规定列之间的间隔。默认：浏览器默认font-size ，大小是font-size 的大小。

> column-rule 设置所有 column-rule-\* 属性的简写属性  
> column-rule-color 规定列之间规则的颜色。  
> column-rule-style 规定列之间规则的样式。  
> column-rule-width 规定列之间规则的宽度。字并不会因为列之间的宽度而被挤开

column-span 规定元素应该横跨的列数，只有1或者all（常用语设置标题）

#### 弹性盒子 display：flex ####

flex是复合属性，必须配合父元素display：flex使用  
以下6个属性设置在项目（子元素）上：

> 1.flex-grow 放大比例  
> 2.flex-shrink 缩小比例  
> 3.flex-basis 伸缩基准值  
> 4.flex 是前三个属性的简写，是复合属性  
> 5.order 排列顺序，n，默认是0  
> 6.align-self 单个项目对齐方式，auto（默认），

1.flex-grow 放大比例，默认是0，不放大，n（放大的比例n：n：n），按照剩余的空间进行计算。  
2.flex-shrink 缩小比例，默认是1，即1：1，设置为0（不缩放）例如设置两个div缩放比例分别为2，3，超出100px，就分别缩放2/5 \* 100px, 3/5 \* 100px,即缩放40px，60px。  
3.flex-basis 伸缩基准值 ，该属性设置元素的宽度或者为高度，当与元素的宽度冲突时，以flex-basis为准。当主轴是垂直时，代表高度，主轴是水平，代表宽度。  
4.flex 是前三个属性的简写，是复合属性  
5.order 排列顺序，n，默认是0  
6.align-self 单个项目对齐方式，auto（默认），flex-start， flex-end，center，baseline（基准线以第一行文字为准，无字以最底下对齐），strech（当元素没有设置高度时，高度会撑开整个夫级），可覆盖align-items属性  
当设置夫级是弹性盒子，子级是div（块级元素）的时候，div不会独占一整行，而是具有了行级块的性质，但是依旧是块级元素。  
以下6个属性设置在父元素上：

> 1.flex-direction 决定主轴的方向  
> 2.flex-wrap 是否换行  
> 3.flex-flow flex-direction和flex-wrap简写  
> 4.justify-content 项目在主轴的对齐方式  
> 5.align-items 在侧轴上如何对齐  
> 6.align-content 多根轴线的对齐方式

1.flex-direction(决定主轴的方向，即项目的排列方向) ：row（主轴为水平方向，起点在左端） ，

> row-reverse （主轴为水平方向，起点在右端），  
> column（主轴为垂直方向，起点在上沿），  
> column-reverse（主轴为垂直方向，起点在下沿）

2.flex-wrap 默认情况下，项目都排在一条线上（又称轴线）该属性定义，如果一条轴线排不下，如何换行。

> nowrap（默认，不换行）  
> wrap（换行，第一行在上方）  
> wrap-reverse（换行，第一行在下方）

3.flex-flow flex-direction和flex-wrap简写  
默认为 row nowrap  
4.justify-content 项目在主轴的对齐方式

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

5.align-items 在侧轴上如何对齐  
侧轴即夫级的y轴

垂直水平居中：夫级：  
align-content：center；  
justify-content:center；  
6.align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。当主轴是水平轴时，交叉轴（侧轴）即y轴。

> flex-star（与交叉轴的起点对齐）  
> flex-end（与交叉轴的终点对齐）  
> center（与交叉轴的中心对齐）  
> space-between（与交叉轴的两端对齐，轴线之间的间隔平局分布）  
> space-around（每根轴线两侧的间隔相等，所以，轴线之间的间隔要比边框的间隔大一倍）  
> strech（默认值）轴线占满整个交叉轴

#### 类选择器 ####

##### 属性选择器 #####

element\[attr^=str\] : 即匹配属性r以str开头的element元素。  
element\[attr$=str\]：以str结尾的属性的element元素  
element\[attr\*=str\] ： 属性中包含str的element元素。  
element\[attr=str\] ： 属性为str的element元素。

##### 伪类选择器 #####

CSS3中新增的伪类选择器：  
1.root 根标签选择器  
‘root’选择器等同于元素，例如：：root \{\}  
2.not 否定选择器  
element：not(\[attr=str\]) \{ \}  
3.empty 空标签选择器  
element：empty\{\} 选择没有内容的标签  
选择没有内容的元素。dom树上面没有内容，：after\{ content：‘sss’\}，不影响  
4.target 目标元素选择器  
用来匹配被location.hash选中的元素(即锚点元素)  
选择器可用于选取当前活动的目标元素  
锚点 例子：

<a href="#item">click</a> <a href="#item1">click me</a> <div id="item" class="o"></div> <div id="item1"></div> div:target { background-color: brown;}

5.first-child 第一个子元素（夫级的第一个子元素）  
last-child 最后一个子元素  
nth-child（） \{\} 第几个子元素，n代表变量自然数，2n偶数标签。  
nth-last-child 从后往前数  
如果当前位置元素不是前面所修饰的元素，那么无效

//.wrapper 是夫级 .wrapper li:first-child { } .wrapper li:nth-child(2) { } .wrapper li:nth-child(2n) { } //第1,3,5,7有该样式 .wrapper li:last-child { } .wrapper li:nth-last-child(1) { }

6.first-of-type 第一个子元素（同一个类型下的标签的第一个）  
last-of-type 最后一个子元素  
nth-of-type 第几个子元素  
nth-last-of-type（） \{\} 从后往前数常用这个，不常用child

.wrapper p:first-of-type { } .wrapper li:last-of-type { } .wrapper li:nth-of-type(2n) { } .wrapper li:nth-last-of-type(2n - 1) { }

7.only-child 唯一子元素选择器  
必须是独生子  
8.only-of-type  
必须是唯一的女孩或者是唯一的男孩  
9. :enable 可用元素  
:disabled 不可用元素

form表单里面一般都可以设置这两个属性  
10.checked 选择框被选中的状态

11.input：checked + span\{ \}  
找的是被选中的input后面跟着的兄弟标签span  
11.read-only 选中只读元素

12.read-write 选中非只读元素

##### 3.条件选择器 #####

/1.E>F  
F是E的直接子元素  
这里p是div的直接子元素，span不是  
/2.E+F  
F是E的兄弟节点而且是E后面的第一个  
/3.E~F  
F是E后面的兄弟节点

#### 4.伪元素选择器 ####

伪元素的效果是需要添加一个实际的元素才能选到。  
::first-letter(第一个单词的第一个字母)，  
::first-line(第一行)，  
::before,::after  
::selection 用来匹配突出显示的文本（用鼠标选择文本的时候）。当全选择的时候，可以直接 ::selection \{\}  
user-select:none;(表示文本不可以被选中，例如百度一些文章不能复制粘贴)，放在body \{ user-selct：none;\}

##### transform属性 #####

1.  rotate(默认是沿Z轴旋转)，  
    rotateX(角度)沿x轴旋转，rotateY, rotateZ,  
    rotate3d(x,y,z,角度)给他一个从原点到想x,y,z的向量，以他做轴，旋转度数。  
    2.scale（写一个值，默认是x轴和y轴），  
    scaleX(缩放的倍数)， scaleY， scaleZ(一般不用，因为看不到)，即scale（0.5，2）x轴缩放0.5，y轴缩放2，scale3d，负值代表翻转  
    3.skew（不写，默认是x轴，y轴，y轴不写，默认是0）  
    skewX（角度）：扭曲，skewY， skewZ，  
    4.translate(不写，默认x轴平移和y轴平移，第二个参数可以不写，不写就不平移)  
    translateX（像素值，百分数，）：平移，translateY, translateZ,  
    5.translate-origin：这个属性是设置变换原点的作用，  
    关键字：top（上面中心点）、bottom、left、right、top left（左上角）…, 像素值（x轴值和y轴的值），以自己的左上角开始找合适的像素值、百分比

## 动画 ##

### 1.transition：transition就是过渡动画的属性。 ###

这个属性可以让元素从一个位置变换到另外一个位置，或者宽高等属性发生变化的时候，不是突兀的过去，而是缓缓地有一个过渡动画。

transition 简写属性，用于在一个属性中设置四个过渡属性。

> transition-property 规定应用过渡的 CSS 属性的名称。  
> transition-duration 定义过渡效果花费的时间。默认是 0。  
> transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。指定过渡函数。  
> transition-delay 规定过渡效果何时开始。默认是 0。

div{ width: 100px; height: 100px; background-color: burlywood; transition: width linear 2s; } div:hover { width: 500px; }

![在这里插入图片描述][70]

### 2.animation ###

二维动画——animation 这个属性必须配合@keyframes动画关键帧来使用。keyframes里面包含一个百分数，后面跟上在这段时间内变换的css样式。  
animation是一个复合属性，它包括以下几个组成部分：

> 1.animation-name：执行动画的keyframes的名字。  
> 2.animation-duration：执行动画的总时长。  
> 3.animation-timing-function：指定过渡函数。  
> 4.animation-delay：执行延迟时间。  
> 5.animation-direction：动画播放的方式。这个属性的值主要有：normal正常播放模式、reverse倒序播放、alternate动画在奇数次正向播放偶数次倒序播放、alternate-reverse动画在奇数次倒序播放偶数次正向播放。  
> 6.animation-iteration-count：动画执行的次数。infinite是无限次，写一个数字就是要执行几次。  
> 7.animation-fill-mode：执行完动画后物体停止的位置。  
> 默认值是none（动画完成最后一帧时，会返回初始帧）  
> forwards（动画在结束后，继续应用最后关键帧的位置）  
> backwards（当给动画设置延迟的时候，最开始在初始位置等待，设置该值之后，在0%位置等待）  
> both（元素动画同时具有forwards 和 backwards效果）

animation-play-state：控制动画的播放状态。running是播放、paused是暂停。

div{ position: absolute; left: 0px; width: 100px; height: 100px; background-color: burlywood; animation: move 2s ease 300ms infinite alternate both; } @keyframes move { 0% { left:50px; } 100% { left: 500px; } }

.css3动画卡了

用css3的时候动画卡了怎么解决？
    transform: transition3d(0, 0, 0);
    transform: translateZ(0);
    这两个属性可以开启GPU加速模式
    然而面试官问我为什么，你知道原理么？
    这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画的时候从CPU转向GPU。

1： 说一下css选择器的优先级

1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。 2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。 3、第三级的优先属性由<link/>标签所引入的样式表定义。 4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。 5、第五级优先的样式有用户设定。 6、最低级的优先权由浏览器默认。

/ 权重的进制是256  
属性选择器的权重问题:  
// !important ---------> 无穷  
// 行间样式-------------> 1000  
// id------------------> 100  
// class|属性|伪类------> 10  
// 标签|伪元素 ---------> 1  
// 通配符（\*）--------------->  
2.说一下link和@import的区别  
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。  
1.@import 机制不同于link，link是加载页面前css加载完毕，@import 是先读取文件再加载  
2.@import是css2.0里的 ie5以上不支持  
3.用js控制dom时改变样式，只能用link，@import不是dom能控制的  
4.最后一个很有意思，@import url有最大次数的限制，IE6最多引入31次，firefox并没有发现  
/@import的优点： 多个样式表导入一个样式表中，页面只需要引入一个即可

3. 说一下position都有哪些，并详细的说说他们之间的区别  
position：  
1、absolute 绝对定位 脱离原来位置进行定位 相对于自身最近的父级进行定位  
2、relative 相对定位 保留原来位置进行定位 参照元素自身 用于设置参照物  
3、static 默认属性 元素默认定位是static  
4、fixed 可视窗口进行定位 网页上应用的广告栏  
4.position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，  
在目标区域在屏幕中可见时，它的行为就像position:relative;  
而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。  
淘宝的侧边栏  
5.inherit:继承父级的定位

4：如果position设置成absolute属性该元素的display属性会变成什么  
position:absolute和float会隐式的改变display类型，不论之前是什么类型的元素（display:none除外），只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。

5.块级元素行级元素的区别  
“block” 块级元素 ：占满整行 可以改变宽高  
“inline” 行级元素内联元素 ：不占满整行 不可以改变宽高  
“inline-block” 行级块元素：可以改变宽高 也不独占整行  
块级元素列表

<address>	定义地址
    <caption>	定义表格标题
    <dd>	定义列表中定义条目
    <div>	定义文档中的分区或节
    <dl>	定义列表
    <dt>	定义列表中的项目
    <fieldset>	定义一个框架集
    <form>	创建 HTML 表单
    <h1>	定义最大的标题
    <h2>	定义副标题
    <h3>	定义标题
    <h4>	定义标题
    <h5>	定义标题
    <h6>	定义最小的标题
    <hr>	创建一条水平线
    <legend>	元素为 fieldset 元素定义标题
    <li>	标签定义列表项目
    <noframes>	为那些不支持框架的浏览器显示文本，于 frameset 元素内部
    <noscript>	定义在脚本未被执行时的替代内容
    <ol>	定义有序列表
    <ul>	定义无序列表
    <p>	标签定义段落
    <pre>	定义预格式化的文本
    <table>	标签定义 HTML 表格
    <tbody>	标签表格主体（正文）
    <td>	表格中的标准单元格
    <tfoot>	定义表格的页脚（脚注或表注）
    <th>	定义表头单元格
    <thead>	标签定义表格的表头
    <tr>	定义表格中的行

行级元素

<a>	标签可定义锚
    <abbr>	表示一个缩写形式
    <acronym>	定义只取首字母缩写
    <b>	字体加粗
    <bdo>	可覆盖默认的文本方向
    <big>	大号字体加粗
    <br>	换行
    <cite>	引用进行定义
    <code>	定义计算机代码文本
    <dfn>	定义一个定义项目
    <em>	定义为强调的内容
    <i>	斜体文本效果
    <img>	向网页中嵌入一幅图像
    <input>	输入框
    <kbd>	定义键盘文本
    <label>	标签为 input 元素定义标注（标记）
    <q>	定义短的引用
    <samp>	定义样本文本
    <select>	创建单选或多选菜单
    <small>	呈现小号字体效果
    <span>	组合文档中的行内元素
    <strong>	语气更强的强调的内容
    <sub>	定义下标文本
    <sup>	定义上标文本
    <textarea>	多行的文本输入控件
    <tt>	打字机或者等宽的文本效果
    <var>	定义变量

4.把一个元素设置float属性他会产生浮动，说说怎么去除浮动  
(1)为什么要清除浮动？  
浮动标签仅能被文本标签看到  
(2)不清除浮动的效果：  
border不能被撑开 背景不能显示 margin设置值不能正确显示  
(3)清除浮动的方法：  
1.底下添加新的块级元素 ，应用 clear：both;  
2.添加一个 :after  
xxx:after\{  
content: ‘’;  
clear:both;  
display: block;  
\}  
3.触发bfc

> “clear解释”：该属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象

(4)为什么给父级元素设置overflow属性会去除浮动，具体说说内部机制  
overflow属性相当于给父级元素定型了，必须有参数的  
overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容  
是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)  
floats, position absolute, inline-block, table-cell和table-caption都不是块级样式，  
所以才会用到clear来控制浮动overflow也可以清除浮动是因为当在父级元素设置overflow时候，除了visible，就是只有auto, hidden或者scroll时候，也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果

5：说说触发bfc的几种方式  
1.设置除 float:none 以外的属性值（如：left | right）就会触发BFC  
2.设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）就会触发BFC  
3.设置 display属性值为: inline-block | flex | inline-flex | table-cell | table-caption 就会触发BFＣ  
4.设置 position 属性值为：absolute | fixed 就会触发BFC  
5.使用 fieldset 元素（可以给表单元素设置环绕边框的html元素）也会触发BFC  
==6. 说说常见的将元素垂直水平居中的方法 ==  
1.知道父级大小  
\{  
left:50%;  
top:50%;  
margin-left:-父级元素一半的大小;  
margin-top:-父级元素一半的大小;  
\}  
/ 2.不知道宽高 transform:translateX(-50%)translateY (-50%);  
/ 3.flex 布局 ：在父级上  
position:absolute;  
display:flex;  
justify-content:center;//水平  
aligin-items:center;//竖直  
/ 4.行内元素水平居中 ： text-align: center;  
/5.定宽高 父级定宽高 子级一个绝对定位  
子级里面 left:0 right:0 bottom:0 top:0 margin:0  
定宽 用margin：auto；

7： 关于伪元素你了解多少，请说出五个常用的伪元素，那么伪类呢？也请说出五个常用的伪类  
“区别”：伪元素是相当于添加一个元素 伪类相当于是在元素上添加样式 这俩都不实际存于在dom树中  
用来格式化文档流之外的东西  
伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上  
伪元素：：：first-line  
:first-letter  
:last-letter  
:before  
:after  
伪类： :first-child  
:link  
:visitive  
:hover  
:active  
:focus  
:lang

8.盒模型  
/ 盒模型  
首先我们要区分盒模型和盒子：盒模型有margin部分，而盒子不算margin部分。  
/ 1.w3c的标准盒模型，一个盒子的大小是width+padding+border，width是内容区（content），即width不包含padding和border。  
而IE6混杂模式的盒模型，一个盒子的大小是width-padding-border，即content包含padding和border。  
/ 2. css3中就有一个属性可以设置我们使用哪一种盒模型。  
box-sizing: border-box IE6混杂模式的盒模型  
content-box; 标准模式的盒模型  
/弹性盒子  
这是我认为css3中最重要的一部分。  
我们在移动端开发的时候，由于手机的大小都各不相同，所以我们的元素不能定宽，要用弹性盒子来按照百分比分配元素的宽度。  
我们给父级的display设置成flex之后，就让父元素变成了一个弹性盒子，里面的子元素都可以使用flex属性了。  
这个时候，所有的元素会自动变成一行，因为加上display：flex之后还会默认加上一个flex-wrap：nowrap，即不换行，  
这个时候如果子元素的总宽度大于父元素的宽度，就会压缩子元素，让它们可以在父级容器中排成一行。如果改成wrap值，  
那么超过容器的宽度之后就会换行了。  
//flex属性是一个复合属性，它包括flex-grow、flex-shrink、flex-basis

> flex-grow 按比例分配剩余空间。  
> flex-shrink 设置收缩比例，多出盒子的部分按照比例的大小去掉相应的大小，比例越大，削减的越多，具体的削减数值有一个复杂的计算公式：  
> flex-basis 伸缩基准值。该属性设置元素的宽度，如果同时出现了width和该属性，那么会覆盖掉width属性的值。  
> justify-content:center  
> align-items:center  
> 这两个属性同时在父级中设置的时候，会让子元素在父级中水平垂直居中，其中justify-content是设置水平方向，align-item是设置垂直方向。

9.两栏布局类比三栏布局  
/1.columns width：宽度列  
count：列数  
/2.浮动 左定宽高 浮动 右边设置margin-left

.left{ width:100px; height:100px; background-color: red; float:left; } .right{ height:100px; background-color:green; margin-left: 100px; }

/3.定位 ：左边定宽高 设置定位position absolute left 0 ;  
.left\{  
width:100px;  
height:100px;  
background-color: red;  
position:absolute;  
left:0;  
\}  
.right\{  
height:100px;  
background-color:green;  
right:0;  
\}  
/4.flex 布局 外容器设置display：block;  
.wrapper\{  
display:flex;  
\}  
.left\{  
width:100px;  
height:100px;  
background-color: red;

}
            .right{
                height:100px;
             "   flex-grow:1;"
                background-color:green;			
                
            }

三列布局  
1.flex布局  
.wrapper\{ display:flex\}  
.left.right\{定宽高 背景色\}  
.middle\{flex-grow:1;定高\}  
middle必须放在中间布局  
2.浮动  
.left\{float:left\} -------> 定宽高  
.right\{float:right\} ------>定宽高  
.middle\{定高,margin-left margin-right\}  
3.定位  
.right\{position:absolute;right:0\}—定宽高  
.left\{position:absolute;left:0\}-----定宽高  
.middle\{定高\}  
4.columns属性

10.原生JS的ofsetwidth求得的宽度包括什么  
原生JS的offsetwidth求得的宽度包括什么: content padding border  
css(‘width’)求得的宽度包括什么： content padding border  
jq的innerWidth求得的宽度包括什么: content padding

11.给我讲讲三栏布局  
有两种实现方式 1.左右两侧的div先用absolute定位，再给中间的div加margin-left和margin-right（值分别是两个div的宽度）  
2.用flaot替换上面的absolute就行

.left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .mid {
            height: 100px;
            margin-left: 100px;
            margin-right: 100px;
            background-color: blue;
        }

要注意的是，div.mid记得写在后面，如果写在最前面的话，因为div是block块级元素会独占一行，  
这样就会把右侧的div给挤到下一行了。当然我们给.left和.right都加上top:0px;之后，这个问题也就不用考虑了。

12.line-height 110%和1.1啥区别？？？？

一个是相对于父级fontsize，一个是相对自己fontsize的

13.margin合并和margin塌陷  
margin合并问题的现象：并列结构的话 上下两个margin 分别有一个margin-bottom 下边这个元素有一个margintop 这样的画会产生一个重叠  
取最大的一个margin的值作为他们之间的距离

3.解决合并外边距的问题  
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是父子关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有线盒（其实就是非空内容），没有间隙（clearance，设置clear以闭合相关方向的浮动 ），没有padding和border将他们分隔开就会发生margin重叠。

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，  
但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生折叠了。

> 折叠的结果：  
> 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值( 10px 20px 结果为20px )。  
> 两个相邻的外边距都是负数时，折叠结果是两者绝对值较大的值( -10px -20px 结果是-20px )。  
> 两个外边距一正一负时，折叠结果是两者的相加的和( 10px -20px 结果是10px )。

产生折叠的必备条件：margin必须是边缘毗邻的  
//而根据w3c规范，两个margin是垂直毗邻的必须满足以下条件：  
1.元素的margin-top与其第一个常规文档流的子元素的margin-top  
元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top  
2.height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom  
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom  
只要触发Block Formatting Contexts的条件 或者是使用非空内容，空隙（clearance），padding和border将他们分隔开margin便不会折叠。

//margin塌陷问题

因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。

对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。  
/解决方式  
解决父子DIV中顶部margin cllapse的问题，需要给父div设置：  
1、边框，当然可以设置边框为透明;  
2、为父DIV添加padding，或者至少添加padding-top;  
3.还可以通过over-flow来解决，给父DIV写入： over-flow:hidden;

//14.bfc问题  
Block Formatting Context块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。简单来讲，我们可以把它理解为，我们在进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，  
该元素成为一个隔离了的独立容器，元素内部元素会垂直的沿着其父元素的边框排列，和外部元素互不影响 。  
比如浮动元素会触发BFC，浮动元素内部的子元素主要受到该浮动元素的影响，而两个浮动元素之间是互不影响的。  
在CSS3 中，BFC 叫做Flow Root。在早期的ie中也有类似的概念haslayout IE6、7的很多布局产生的bug（如3px间隙、绝对定位的继承宽度）  
都可以通过触发hasLayout修复，比较推荐的方法为zoom:1与height:1%，不会破坏已有的样式，相信大家对它并不陌生。  
同样的以往集中在float、绝对定位、margin collaspe中的很多困惑，在理解了bfc后，都能够被我们一一解除 。  
/BFC规范中的定义：  
w3c规范对BFC的解释：  
浮动元素和绝对定位元素，不是块级盒子的块容器 （如 inline-blocks, table-cells, 和 table-captions），以及设置了overflow属性（除了visible）  
的块级盒子 ，都会为他们的内容创建新的BFC（块级格式上下文）。  
在BFC中，盒子从顶端开始垂直地 一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的  
垂直外边距会产生折叠。在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。  
/ 触发BFC的方法：

> float 元素  
> position（absolute，fixed）  
> display (table-cell，table-caption，inline-block)  
> overflow 除了visible 以外的值（hidden，auto，scroll ）  
> fieldset元素  
> 早期IE的hasLayout会触发一个新的block formatting context

/ BFC的特性

> 边缘不和浮动元素重叠  
> 不存在collapsing margins问题,第一个特性特别有用，因为元素触发了BFC的话，就不会被float元素覆盖，当子元素全部浮动的时候也能够正确地包含了  
> 第二个margin不会叠加的特性，可以理解为两个处于普通流的盒子，会有margin叠加的问题，是因为他们属于相同的BFC，当他自身创建了一个新的BFC时，这个问题就不存在了

/ BFC的常见应用

1.通过边缘不和浮动元素重叠的特性，实现两栏结构。 
        2.清除元素内部浮动
        3.解决合并外边距的问题

### 什么是DOM ###

• DOM的全称是Document Object Model 文档对象模型，DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。  
• DOM对象即为宿主对象，由浏览器厂商定义，用来操作html的css功能的一类对象和集合。不过浏览器厂商之间大部分都遵循w3c标准。  
• 简单来说，DOM就是用来操作html和css的，它是一系列对象的集合。

值得注意的是，在ie8以下的浏览器中，不区分大小写，而且标签的name属性也可以被当做id被选择出来。

<div name="demo"></div> var div = document.getElementById('demo');

#### getElementsByClassName ####

document.getElementsByClassName(‘class’); 获取到的是一个类数组，因为很多元素都可以有一个类名。我们可以通过\[\]的方式来选择到具体的哪一个元素。

var div = document.getElementsByClassName('div')\[1\]; 这样我们就可以选择到第二个div了。 不过如果我们碰到这种情况该怎么办？

我们改如何选择出来第二个div？ 这里，我们的getElementsByClassName其实后面可以填写多个类名。 var div = document.getElementsByClassName('demo demo1')\[0\]; 这样，我们就可以选择出来第二个div了。 但是值得注意的是，ie8及以下的版本中没有这种方法。

#### querySelector() querySelectorAll() ####

##### 该方法返回的是副本，所以我们对他改变，但是本来的元素并没有变化 #####

这两个方法通常放在一起说。  
我们知道选择元素最强的是css，而这两个里面写的参数就是我们css选择器的写法。  
document.querySelector('div p \#demo .demo);

> querySelector永远选择一组里面的第一个，所以返回的不是一个类数组而是一个具体的元素。  
> 而我们如果要返回一个类数组的集合的话，那么就用第二个querySelectorAll()方法。

不过这两个方法的问题在于，他们返回的不像前面四个是一个实时改变的元素，而是一个副本。当我们用这两个方法选择出来元素之后，我们把本身那个元素修改一下，会发现我们选择出来的那个元素没有变化。  
实际删除的那个元素对用querySelector选择出来的那个副本没有影响。  
不过，在ie7及以下的版本没有这两个方法。  
我们以后提到的jQuery里面的选择器，虽然是基于Sizzle的，但是Sizzle是基于querySelector写的。

### nodeName ###

这个属性可以返回元素的标签名，以大写的形式表示，只读，不允许写入。  
有几个特殊的节点返回的也不太一样：  
文本节点–> \#text  
注释节点–> \#comment  
document节点–>\#document  
• nodeValue  
Text节点或者Comment节点的文本内容，可以读写  
• attributes  
把元素的行间属性都读取出来，放到一个对象里面返回，对象里面的每一个属性都是一个节点，这个节点就是我们前面提到的属性节点。  
注意：对象里面的属性叫做property，而元素里面的属性叫attributes，实际应该叫特性。  
节点还有一个方法  
hasChildNodes()可以检测是否有子节点

遍历节点树

• parentNode 查找父节点  
childNodes 子节点们  
div.childNodes 没有说明类型，那么就是说这个方法是把所有的子节点都返回。  
firstChild 第一个子节点  
• lastChild 最后一个子节点  
• nextSibling 下一个兄弟节点  
• previousSibling 上一个兄弟节点  
以上这些方法的兼容性都很好，所有的浏览器都支持，但是下面这些就不行了。

基于元素节点树的遍历  
• parentElement 返回当前元素的父元素节点  
在这个方法上面，html上面的父元素节点就不是document而是null了。  
但是ie不支持这个方法。  
• children 所有子元素节点  
这个方法所有的浏览器都兼容。  
• childElementCount  
node.children.length === node.childElementCount  
这个属性就是子元素节点的数量，不过我更常用前面的那个。  
• nextElementSibling  
• previousElementSibling  
这两个方法分别是找上一个和下一个兄弟元素节点，但是ie都不兼容。

下面是一些DOM结构树的总结：  
/1.getId方法定义在Document.prototype上，即Element节点上不能使用。  
/2.getElementByName方法定义在HTMLDocument.prototype上，非html中的document不能使用(xml document、Element);  
/3.getElementsByTagName方法定义在Document.prototype和Element.prototype上，也就是document和元素都可以用这个方法。  
/4.HTMLDocument.prototype上定义了一些常用的属性，body、head分别代指HTML文档中的标签。  
/5.Document.prototype上定义了documentElement属性，指代文档的根元素，在html文档中，它总代指元素。  
/6.getElementByClassName、querySelectorAll、querySelector在Document、Element类中均有定义。

//遍历元素节点树  
function retChild(node) \{  
var child = node.childNodes,  
len = child.length;  
for (var i = 0; i < len; i ++) \{  
if (child\[i\].nodeType === 1) \{  
console.log(child\[i\]);  
child\[i\].hasChildNodes() && retChild(i)  
\}  
\}  
\}

//封装函数  返回元素e的第n层父节点
            function retParent (e, n) {
                var n = n || 0;
                if (n === 0 ) {
                    return e;
                }
                for (var i = 0; e && i < n; i ++) {
                    e = e.parentNode;
                }
                return e
            }

//封装函数 返回元素e的第n个兄弟节点，如果n为正，则返回后面的兄弟节点 如果n为负  
//则返回前面的节点

[http_www.w3cplus.com_content_css3-font-face]: http://www.w3cplus.com/content/css3-font-face
[70]: /images/20220511/a286b9190d454825b3c39c3733286a80.png