css3复习大纲

最新推荐文章于 2021-04-28 17:00:58 发布

linaGao

最新推荐文章于 2021-04-28 17:00:58 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_38292678/article/details/82810647

版权

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
@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 从后往前数
如果当前位置元素不是前面所修饰的元素，那么无效

<div class='.wrapper'>
<li></li>
<li></li>
<li></li>
<li></li>
</div>

//.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

<div class="wrapper">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <p>你</p>
        <p>是</p>
        <p>傻</p>
        <p>瓜</p>
        <p>吗</p>
    </div>

        .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 不可用元素

        <input type="text" disabled='disabled'>

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

<input type="checkbox" name="" id="" checked="checked">

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

<input type='text' readonly='readyonly'></input>

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属性

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;
       }

在这里插入图片描述

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为负
//则返回前面的节点

        function retSibling (e, n) {
            var n = n || 0;
            if (n === 0) {
                return e
            }
            while(e && n != 0) {
                if (n > 0) {
                    if (e.nextElementSibling) {
                        e = e.nextElementSibling;
                    } else {
                        e = e.nextSibling;
                        while (e && nodeType != 1) {
                            e = e.nextSibling;
                        }

                    }
                    n --;
                } else {
                    if (e.previousElementSibling) {
                        e = e.previousElementSibling;
                    } else {
                        e = e.previousSibling;
                        while (e && e.nodeType != 1) {
                            e = e.previousSibling;
                        }
                    }
                    n ++;
                }  
            }
            return e;
        }

        //封装函数   实现children功能   最好在原型链上编程

        Element.prototype.getChildren () {
            var child = this.childrenNodes,
                len = child.length,
                obj = {
                    'length': 0,
                    'push': Array.prototype.push
                }
                for (var i = 0; i < len; i ++) {
                    if (child[i].nodeType === 1) {
                        obj.push(child[i]);
                    }
                }
                return obj;
        }

        //封装时候有元素节点的方法
        Element.prototype.hasChildren = function () {
            var child = this.childNodes,
                len = child.length;
            for (var i = 0; i < len; i ++) {
                if (child[i].nodeType === 1) {
                    return true;
                }
            }
            return false;
        }