遗漏知识总结

选择器权重

!important > 内联样式 > id选择器 > 类选择器、伪类选择器、属性选择器 > 元素选择器、伪元素选择器 > 通配符选择器、子元素选择器和相邻选择器等

margin的坍塌与合并

margin的坍塌与合并只会发生于上/下外边距，左/右外边距不会发生。

margin坍塌

塌陷： 当两个元素嵌套到一起的时候，给里面的盒子设置margin会使两个盒子的上/下margin都发生改变。其中外层盒子的margin取两个盒子margin的最大值。当调整里面盒子的margin值时，两个盒子会一起移动。

解决办法：
(1) 给外层的盒子添加一个边框border属性或者内边距padding属性，即将两者的margin分隔开。但该方法会破坏布局，故不建议使用。
(2) 触发bfc,即给外层盒子添加一些属性以设置盒子内部的样式规则。触发bfc的方法有以下四种：

overflow:hidden;

display:inline-block;

float:right;
float:left;
float:top;
float:bottom;

(以上四种浮动中的任意一种即可）

position:absolute;

可以给外层盒子或者里面的盒子加position:absolute;

margin合并

当两个元素并列时，其相邻的的上/下外边距会重叠，重叠后的外边距为两元素margin的较大值。
解决办法 :
用一个新的盒子将外层盒子包起来，再对这个新盒子设置bfc规则，方法同上解决坍塌的触发bfc的方法。（一般margin的合并不需要解决）

什么是bfc?触发bfc的几种方法？

BFC是一个独立的布局环境，有一套独立的渲染规则，其中的元素布局不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

触发方式:

(满足以下的一个条件即可）

• 根文件: <hmtl>;
• 浮动：float 值不为 none;
• overflow：overflow 的值不为 visible;
• 定位：position 的值 不为 static 或者 relative 中的任何一个;
• display 的值为 inline-block,table-cell,table-caption；
• 弹性元素（display 为 flex 或 inline-flex元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

position的属性有哪几个？relative和absolute的用法与区别是什么？

position的属性有static、flex、relative、absolute和stick。

position：relative;
是相对于元素未设置定位元素时的位置，通过top、right等值进行移动，且移动过程不影响页面布局（元素未设置定位元素时的位置会留下空白）。
position：absolute;
是相对于离该元素最近的非static定位元素进行移动，添加position:absolute;后元素会被移出文档流，且不会给该元素预留空间。添加absolute后的元素可以设置外边距，且不会与其他边距合并。

只用一条CSS代码表示浏览器一半的宽度的方法

设定width值为50vw。

vw : 视口比例长度单位，表示相对视口宽度。即将浏览器可视宽度平均分为100份，每一份就是1vw。

form中的input可以设置为readonly和disabled，请问二者有什么区别？

readonly将元素设置为只读，不可输入，但不影响其他操作。且将表单元素设置为readonly后不会影响表单提交。
disabled阻止对元素的一切操作，包括获取焦点、点击事件等，也不可输入，且设置了disabled的表单元素的值不会随着表单一起提交。

transform有哪些用法？

向元素应用2D或3D转换,使元素实现移动(translate)、旋转(rotate)、放缩(scale)、倾斜(skew)等

1. 移动 ( translate )：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）;
2. 旋转 (rotate): rotate( )实现元素的2D旋转，括号中设置旋转的角度，正角度值表示顺时针旋转，负值为逆时针;rotateX()、rotateY()、rotateZ()分别是以x、y、z轴为旋转轴进行3D旋转；
3. 放缩(scale): scale(x)即使元素宽度和高度均放大或者缩小x倍；scaleX(x)是使元素的宽度放大或者缩小x倍；scaleY(y)是使元素的高度放大或缩小y倍。括号里设置倍数，小于1时为缩小，大于1则为放大；
4. 倾斜(skew): skew在视觉上就是让元素绕着 scale(x,y)围绕x轴和y轴分别旋转角度x和角度y；scaleX(x)使元素绕x轴倾斜角度x；scaleY绕y轴。绕x轴逆时针旋转时为正值，绕y轴顺时针转时为正值。
5. matrix() : 是将上述的属性集中到一条CSS代码中，可以接受6个参数matrix(scaleX()、skewY()、skewX()、scaleY()、translteX()、translateY()).

在标准盒模型和ie盒模型下两个盒子的宽度和高度是多少？

<div class="box1" style="width: 200px;height: 200px; margin: 20px 20px 30px; padding: 20px 30px; border:1px solid black;">
	<div class="box2" style="width: 100px;height: 100px;margin: 10px 20px;border: 1px solid black;">
	</div>
</div>

box1：在标准盒模型下，宽度=200px，高度=200px;在IE盒模型下，宽度=200+302+12=262px,高度=200+202+12=242px;
box2：在标准盒模型下，宽度=100px,高度=100px;在IE盒模型下，宽度=100+12=102px,高度=100+12=102px;

标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。

只用css实现一个如图所示的三角形（不用css3）

给一个空的div元素加上一下CSS属性：

	div{
      width: 0px;
      height: 0px;
      border-width: 50px;
      border-style: solid;
      border-color:  rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) green rgba(0, 0, 0, 0);
    }

盒子的水平与垂直居中

水平居中

1. 对盒子使用margin属性margin：0 auto;使其水平居中。
2. 将盒子包含在一个大的div中，并将该div定义为弹性盒子(flex盒子) ,再对div使用justify-content:center;属性。代码如下

.out{
	width:200px;
	height:200px;
	display:flex;
	justify-content:center;
}
.out div{
	width:100px;
	height:100px;
}

<div class="out">
	<div>
	</div>
</div>

以上代码使得内部的div元素在水平方向上居中。

3. 定位：将盒子包含在一个大的div中，并对div设置position：relative；属性，然后对内部的盒子设置position:absolute;属性。用left：50%；以及transform:translate(-50%,0);使内部盒子水平居中。
   代码如下：

.out{
      width: 400px;
      height: 200px;
      position: relative;
    }
    .out div{
      width: 100px;
      height:100px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

<div class="out">
	<div>
	</div>
</div>

垂直居中

1. 将盒子包含在一个大的div中，并将该div定义为弹性盒子(flex盒子) ,再对div使用align-items:center;属性。代码如下：

.out{
	  width:200px;
	  height:200px;
	  display:flex;
	  align-items:center;
    }
.out div{
	  width:100px;
	  height:100px;
	}

<div class="out">
	<div>
	</div>
</div>

以上代码使得内部的div在垂直方向上居中

2. 定位：将盒子包含在一个大的div中，并对div设置position：relative；属性，然后对内部的盒子设置position:absolute;属性。用top：50%；以及transform:translate(0，-50%);使内部盒子垂直居中。
   代码如下：

.out{
      width: 400px;
      height: 200px;
      position: relative;
    }
    .out div{
      width: 100px;
      height:100px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

<div class="out">
	<div>
	</div>
</div>

文本的水平仪垂直居中

水平居中

对文本使用 text-align:center;属性；

垂直居中

若只有一行文本，则设置文字的行高(line-height)为元素的高度。（height === line-height 无法使替换元素，如<img>、<input>、<areatext>、<select>…垂直居中，必须有<a>、<span>…类似行内标签配合才能使垂直居中生效！）
若是对多行文本居中，则有以下几种方法：
（1）文本所在元素高度固定时，对元素添加display:table-cell; vertical-align:middle;属性。代码如下：

.out{
      width: 400px;
      height: 200px;
      vertical-align:middle;
      display:table-cell;
    }

<div class="out">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi maxime excepturi dignissimos soluta reiciendis sit impedit totam doloribus ducimus maiores dolorum velit repellat corrupti porro exercitationem dolorem quas, a dolore.
</div>

(2) 当文字包含于行内元素中且行内元素的父元素高度固定时，对父元素设置diaplay:table; 属性并对行内元素设置display:table-cell; vertical-align:middle;属性。代码如下：

.out{
      width: 400px;
      height: 200px;
      display:table;
      background-color: green;
    }
    span{
      display:table-cell; 
      vertical-align:middle;
    }

    <div class="out">
    <span>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi maxime excepturi dignissimos soluta reiciendis sit impedit totam doloribus ducimus maiores dolorum velit repellat corrupti porro exercitationem dolorem quas, a dolore.
    </span>
    </div>

(3）当文字包含于块级元素中且块级元素的父元素高度不固定时，对父元素设置position：relative; 属性并对块级元素设置定位和translate属性。代码如下：

.out{
      width: 400px;
      height: 200px;
      position: relative;
      background-color: green;
    }
    p{
      margin: 0;
      position: absolute;
      top:50%;
      transform: translate(0,-50%);
    }

<div class="out">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi maxime excepturi dignissimos soluta reiciendis sit impedit totam doloribus ducimus maiores dolorum velit repellat corrupti porro exercitationem dolorem quas, a dolore.
    </p>