1.一个内联元素若是使用了flex布局的话，那么其width以及height都是可以设置的了。
2.css单位：
- 1.相对长度单位：1).相对字体长度单位，比如em,ex(字符x的高度)以及css3出现的rem,ch(字符0的宽度)。
- 2.相对视区单位：vw, vh, vmin, vmax，其中vmin代表的是视窗宽度和视窗高度较小值的百分比。vmax代表的是两者之间较大值的百分比。
- 3.绝对长度单位。
3.选择器备忘：
1.属性选择器：
1
2
3
4
| [title="css"]{}
[title~="css"]{}:包含css
[title^="css"]{}:以css开头
[title$="css"]{}:以css结尾
|
2.伪类选择器：一个英文冒号；
- 3.伪元素选择器：两个连续的英文冒号；
- 4.兄弟选择器：~连接；
- 5.相邻兄弟选择器：+连接；
4.关于浮动：
浮动会使得自身元素脱离文档流，比如下面这种情况：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="out clear">
<div class="f"></div>
</div>
<style type="text/css">
.out {
width: 500px;
background-color: red;
}
.f {
width: 200px;
height: 200px;
background-color: green;
float: right;
}
</style>
|
对于上面这种情况来说，由于子元素.f设置了浮动，而浮动会使得脱离文档流，因此.out并不会被子元素给撑开，这就造成.out根本就看不到的情况。那么怎么解决这种情况呢？可以利用清除浮动来解决这个问题，如下所示，只需要添加下面的这些css即可：
1
2
3
4
5
| .clear::after {
content: '';
display: block;
clear: both;
}
|
需要注意的地方是：如果一个元素是flex的话，那么他的子元素就是默认清楚了浮动的，对于上面这种情况，像下面这样设置也能够将out撑开：
1
2
3
4
5
6
| html, body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
|
5.块级元素：需要注意的是块级元素和display为block的元素并不是一个级别，例如常见的块元素有div,list,table其中list的display值为list-item，而table的display值为table。
6.盒子：每个元素都拥有两个盒子，外在盒子和容器盒子，其中外在盒子决定了是可以一行显示还是需要换行显示；容器盒子负责宽高和内容呈现。照这个概念，起始display: block可以理解为display: block-block；而display: inline可以理解为display: inline inline；display: inline-block可以理解为display: inline block；display也可以理解为display: block table；那么问题来了，width以及height是作用在哪个盒子上面的呢？答案是容器盒子。
7.关于width:auto所需要注意的地方，width:auto，它具有四种不同的宽度表现，分别如下所示：1.充分利用可用空间，比如说div元素以及p元素都是默认100%于父级容器的；2.收缩到合适（shrink-to-fit），典型代表就是浮动，绝对定位以及inline-block以及table元素。3.收缩到最小，经常出现在table布局为auto的表格中，比如说下面这种情况：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <table>
<tr>
<td>ttttttttttttttttttttttttttttt</td>
<td>重中之重重中之重重中之重重中之重重中之重</td>
<td>ttttttttttttttttttttttttttttt</td>
</tr>
</table>
<style type="text/css">
table {
width: 100px; // 只设置宽度并且是一个很小的值，高度让子元素负责撑开
}
td {
border: 1px solid #000;
}
</style>
|
对于上面这种情况来说，出现的结果就是：中间的td的宽度是最小的，为什么呢，因为table设置了一个特别小的宽度，而td的width没有进行设置，所以就是默认值auto，对于td的width为auto来说，它所带来的效果就是缩小到最小，并且由于英文是单词换行而不是字母换行，而中文是每个字换行，所以最终导致了中间的这个td是最下的，两边的td并不会出现换行的情况（因为没有空格分割单词，所以都被认为是字母）。还有一点需要注意的那就是：尽管table设置了一个宽度为100px，但是他的实际宽度并不是100px.
4.width的值被设置成了auto还有一个结果那就是超出容器限制，一般情况下width:auto都不会超过父级容器宽度的，但是下面这种情况则可能发生：内容很长的连续英文和数字，或者内联元素被设置了white-space: nowrap。这种情况下则会出现子元素会超出父元素的宽度限制：
1
2
3
4
5
6
7
8
9
10
11
12
| <div class="out">
<span class="overflow">中文测试，由于设置了white-space的值为wrap所以不会出现换行的情况</span>
</div>
<style type="text/css">
.out {
width: 80px;
border: 1px solid red;
}
.overflow {
white-space: nowrap;
}
</style>
|
8.块级元素的正常流特性，块级元素与html文档就好比水流和容器一样，将水倒入容器里面，那么水会占满整个容器的宽度。块级元素也一样，当没有明确声明他的width值的时候，那么他的width值就是默认的auto，其表现就是父容器的100%了。所以像下面这样的用法是错误的：
1
2
3
4
| a {
display: block;
width: 100%; // 块级元素会自动铺满其父容器的
}
|
既然block会自动占满整个容器的宽度，那么当我们给一个元素显式设置100%的话又会发生什么呢？答案就是有可能会超出容器空间。
9.绝对定位模型（position值为absolute和fixed）情况下，如果没有设置宽度以及高度的话，那么盒子默认是以“包裹性”的一个形式出现的，也就是说宽度取决于内部尺寸。但是有一种情况除外，那就是非替换元素如果设置了left,right或者top,bottom的话，那么就会此时盒子的宽度就是由外部尺寸来决定了，取决于最近的具有定位属性的祖先元素的宽度来进行计算。
10.包裹性：如果一个元素的display属性值为inline-block的话或者是浮动元素以及绝对定位元素的话，那么即使里面内容再多，只要是正常文本，那么其宽度也不会超过容器。按钮的默认最大宽度是240px，按钮属于典型的inline-block元素，因此如果按钮内具有很多文字的话，那么默认行为下，文字是不会溢出盒子的，文字会自动换行。包裹性在某些场合下特别有用：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="out">
<span class="inner">some txt</span>
</div>
<style type="text/css">
.out {
text-align: center;
padding: 10px;
}
.inner {
display: inline-block;
text-align: left;
}
</style>
|
像上面这样的样式设置所产生的效果就是：当some txt很少的时候，文本在out容器中所呈现的效果是居中的；当some txt文本很多的时候，文本在out容器中所呈现的效果是左对齐的。
11.内部容器尺寸除了包裹性这一表现外，还存在着其他两种表现行为，分别是：首选最小宽度，需要注意的是，首选最小宽度并不是0，在css世界中，文字以及图片的权重一定会大于布局，因此在width:auto的时候，宽度是不会变成0的，而是首选最小宽度。
12.input以及textarea元素属于替换元素，替换元素的特性之一就是他的尺寸由内部元素决定（width被设置为auto的情况下），不管是block还是inline的。
13.height和width有一个明显的区别就是对于百分比单位的支持，对于width属性，就算父元素width的值为auto，其百分比也是支持的；但是对于height属性来说，如果父元素height的值为auto的话，只要子元素还在文档流中，其百分比值就完全被忽略了。
14.绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，绝对定位元素的百分比是根据父元素的padding-box的，而非绝对定位元素的百分比是根据父元素的content-box的。
15.绝对定位的元素width:auto不具有正常流的特性，具备的是包裹性。
16.使用.img {max-width: 100%; height: auto;}能够让图片有一个比较响应式效果，但是这样做也会产生另外一个后果，那就是在图片加载时到图片加载成功会有一个高度从0变成计算高度的过程，图文会有明显的瀑布式下落。
17.max-width会超越!important的width。
18.js获取页面加载成功，js操控css；
1
2
3
4
| window.onload = function() {
var box = document.getElementById('someId');
box.style.display = 'none';
};
|
19.任意高度的展开收起动画效果制作：1.使用display来控制，缺陷没有动画效果；2.使用height来完成，但是由于是不定高的，所以不好确定扩展之后的高度；3.使用max-height来完成，如下所示：
1
2
3
4
5
6
7
8
| .ele {
max-height: 0;
overflow: hidden;
transition: max-height .55s;
}
.ele.active {
max-height: 666px; // 设置一个合适的值
}
|
20.内联元素的定义：内联特指元素的外在盒子是和display:inline不是同一个概念。inline-block和inline-table都是内联元素，button是inline-block，img是inline-inline的，所以他们都是默认内联元素。几个概念：1.内容盒子(content area)，由字符内容所限定的一个盒子，对于img来说，内容盒子就是img本身；2.内联盒子(inline box)，行内显示，元素的外在盒子；3.行框盒子(line box)，每一行就是一个行框盒子，行框盒子又由一个个内联盒子组成；4.包含块(containing box)，包含块有一个一个的行框盒子组成。
21.幽灵空白节点，看下面这样的html结构以及样式设置：
1
2
3
4
5
6
7
8
9
10
11
| <div class="container">
<span></span>
</div>
<style type="text/css">
.container {
background: #233;
}
span {
display: inline-block;
}
</style>
|
上面这样写将会产生一个具有高度,width为100%的盒子。很奇怪吧，明明没有内容，height应该是0的。
21.下划线效果
1
2
3
| .un {
text-decoration: underline;
}
|
22.替换元素：我们可以根据外在盒子是内联的还是块级的将盒子分为内联盒子和块级盒子，那什么是替换元素呢？替换元素就是那些通过修改元素标签的某个属性值，所呈现的内容就可以被替换的元素。因此img元素是（修改src属性便可以改变内容表现），video元素也是（修改src属性便可以改变内容表现），input元素也是（修改type属性也可以改变其内容表现），textarea元素也是（修改rows属性也可以改变内容表现），select元素也是（设置multiple属性便可以设置多选）。
- 1.替换元素的典型行为之有自己的尺寸。大部分替换元素在没有明确尺寸设定的情况下，其默认尺寸为300px✖️150px，比如video元素和canvas元素，但是也有例外，比如img在明确尺寸设定的情况下，width一般都是为0，高度值在不同的浏览器下表现是不同的。所有的替换元素其外在盒子都是inline的，也就是说都是内联元素，但是内在盒子是啥在各个浏览器可能就有差异了，可以确定的是img和video在三大浏览器都是inlne的；button和select都是inline-block的；重点是经常使用到的input，在Firefox中是inline的，在ie和Chrome中是inline-block的。
22.一些有用的img标签应用：
1
2
3
4
5
6
7
|
<img src="laugh.png">
<style type="text/css">
img:hover {
content: url(laugh-tear.png);
}
</style>
|
23.有的时候明明没有对img设置margin-bottom，可是却明明能够看到图片下部分具有margin，这个时候就需要加上一个img {display: block;}才行，加上之后便能够消除底部的margin了。
24.获取浏览器是否具有某个css style？
1
2
3
4
5
| var ds = document.createElement('div').style;
console.log(Object.keys(ds).length);
console.log('width' in ds);
console.log('margin-bottom' in ds);
console.log('marginBottom' in ds);
|
25.target选择器
26.如果遇到了在字体数量变多的情况下接着所导致的字体的px变大的情况，那么可以使用如下的css来修复，原因不清楚：
1
2
3
4
| .someDom {
display: inline-block;
max-height: 1.4em;
}
|