1 CSS盒模型
盒模型包含四部分：margin(外边距)、border(边框)、padding(内边框)、content(内容)。如果不使用doctype声明(即html文件最上面有无<!DOCTYPEhtml>)，浏览器默认使用自己的模式解析。如IE使用IE盒模型，firefox则使用标准盒子模型等。
1.1 标准盒子模型
由图中可以看出，此时元素的宽度和高度就是content的宽度和高度。
1.2 盒子模型(IE8以下版本，IE8以上版本同1.1)
由图中可以看出，此时元素的宽度和高度就是border的宽度和高度。
1.3 box-sizing(css3属性)
由于content-box在计算宽度的时候不包含border，pading很烦人，而且又是默认值，业内一般采用以下代码重置样式：
div {
box-sizing: border-box; // 这么设置以后，width则包含border和padding，此外还有content-box,padding-box等
}
2 权重与优先级
2.1 权重
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0。
2.2 优先级
!important > 内联样式 > ID选择器 > 类，伪类和属性选择器 > 标签选择器 > 通用选择器
2.3 示例
(1)以前想当然的以为权重是十进制的，即十个class选择器等于一个id选择器，这是错误的。CSS权重进制在IE6为256，后来扩大到了65536，而现代浏览器则采用更大的数量。所以我们可以忽略进制的问题，从高往低比较权重值。
如果权重是十进制的比较方式，则十一个class选择器的权重高于一个ID选择器。但经测试并非如此。
(2)当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值来进行比较的，而不是 1000个数 + 100个数 + 10个数 + 1个数的总和来进行比较的，换句话说，低等级的选择器个数再多也不会超过高等级的选择器的优先级的。
<style>
div{
color: red!important // 属性后面加入!important优先级最高，其次才是行内样式（在标签里面直接用style设置样式），ID选择器等。
}
</style>
(3)在css中，!important的权重相当的高。如果出现了!important，则不管权重如何都取有!important的属性值。但是宽高有例外情况，由于宽高会被max-width/min-width覆盖，所以!important会失效。
width: 100px!important;
min-width: 200px;
上面代码计算之后会被引擎解析成：
width: 200px;
3 元素
3.1 块级元素
块级元素是指单独撑满一行的元素，如div、ul、li、table、p、h1等元素。这些元素的display值默认是block、table等
3.2 行内元素
内联元素又叫行内元素，指只占据它对应标签的边框所包含的空间的元素，这些元素如果父元素宽度足够则并排在一行显示的，如span、a、em、i、img、td等。这些元素的display值默认是inline、inline-block、inline-table、table-cell等。
4 单位(px, em, rem, ex)
4.1 单位px
这是相对长度单位。像素是相对于显示器屏幕分辨率而言的，是我们使用最多的一种元素。
4.2 单位em
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸,例如一个元素的字体设置为16px; 若此元素的宽设置为2em,则代表32px。
1.EM特点
-
em的值并不是固定的；
-
em会继承父级元素的字体大小。
4.3 单位rem
rem是CSS3新增的一个相对单位（root-em，根em）,这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素,目前，除了IE8及更早版本外，所有浏览器均已支持rem。
- 例子如果设置html元素的font-size: 20px;
html {
font-size: 20px;
}
div {
width: 2rem; // 此时该元素的宽度实际为40px, 注意此时的1rem为html中font-size的大小。
}
- 用途：当做移动端页面为了适配不同手机时，此时可以使用它作为基本单位，从而使网页元素在各个手机等比例放大或缩小。
4.4 单位ex
它指的是小写字母x的高度，即x-height。用处不大。
5.BFC(块级格式上下文)
5.1 定义
BFC(Block formatting context) 直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。
5.2 特点
- 垂直方向的边距会发生重叠
- 即BFC内元素的margin-top,margin-bottom，会发生重叠，以最大值为基准
- BFC区域不会与浮动元素重叠，并且计算BFC高度时，浮动元素也会参与计算。
- 即若父元素是BFC,子元素里面有个浮动元素，则会自动清除浮动，就是子元素高度会撑开父元素。例如父元素不是BFC,但是里面有个高度为100px的浮动元素，此时，系统默认父元素的高度是0，但是如果父元素是一个BFC元素，则父元素的高度也为100px;
- BFC是一个独立的元素，外面的元素不会影响内部元素，内部元素也不会影响外部元素。
5.3 触发BFC条件
- overflow: hidden/auto/scroll等
- float值不能为null
- position: absolute/fixed 等
- display: 与table相关的值，例如table,table-row,table-cell,table-column等。
5.4使用场景
-
去除元素之间边距重叠现象
-
清除浮动（如果父元素是BFC,若子元素有浮动元素，则父元素高度会包含子元素的高度）
-
避免某些元素被浮动元素覆盖。
-
清除文字环绕。
-
2栏自适应
- 例子
<style> img{ float:left; width:300px; height: 300px; margin-right: 20px; } </style> <div> <img src="test.jpg"> <p> 低版本IE浏览器有个hasLayout的概念，不过这玩意太老生常谈，而且也过时了，我现在无 力再吐槽。总而言之，言而总之，就特性表现而言，很多时候和BFC这个概念很像。 </p> </div>
如图，默认状态会出现如上图所示的现象，文字环绕，但是若下面的p标签被触发了BFC，例如加上p{overflow:hidden} 则会出现下图状况。
6.层叠规则
层叠规则是指当网页中的元素发生层叠时侯的遵循的规则。
6.1 当有多个条件元素发生层叠的手遵循如下规则：
(最底层)border/background < z-index为负值 < 块级盒子 < 浮动盒子 < 内联盒子(行内元素) < z-index:auto/0 < 正数的z-index；
6.2 css3新增层叠上下文
- 元素的opacity值不为1，也就是透明元素；
- 元素的transform值不为none；
- 元素的filter值不为none；
- 元素的设置-webkit-overflow-scrolling: touch；
- z-index不为auto的弹性盒子的子元素；
- 元素的isolation值为isolate；
- 元素的mix-blend-mode值不为normal；
- 元素的will-change值为opacity/transform/filter/isolation/mix-blend-mode中的一个。
这些属性大都不支持z-index，所以他们都默认z-index:auto，跟普通定位元素层叠水平一样，所以如果发生层叠会后来居上。
但是弹性盒子display: flex不同，弹性盒子的子元素支持设置z-index，且设置了数值的z-index也会自动创建层叠上下文。如下图，可以看到设置了z-index: 0的元素层叠水平更高。
7 元素属性
7.1 元素的显示和隐藏
(1)有两种方法可以控制隐藏：display:none和visibility:hidden;
(2)display:none和visibility:hidden的区别
- display: none的元素不占据任何空间，visibility: hidden的元素空间保留；
- display: none会影响css3的transition过渡效果，visibility: hidden不会；
- display: none隐藏产生重绘 ( repaint ) 和回流 ( relfow )，visibility: hidden只会触发重绘；
- 株连性：display: none的节点和子孙节点元素全都不可见，visibility: hidden的节点的子孙节点元素可以设置 visibility: visible显示。visibility: hidden属性值具有继承性，所以子孙元素默认继承了hidden而隐藏，但是当子孙元素重置为visibility: visible就不会被隐藏。
7.2 文本控制
7.2.1 ::first-letter-首字母
::first-letter表示选中首个字符
<style>
p::first-letter{
color: red; // 表示首字母是红色的
}
</style>
<p>bill</p>
7.2.2 text-transform-文本转换
text-transform文本转换方式总共有五个值：
- none: 默认值，输入什么就是什么。
- inherit: 继承自父亲。
- uppercase: 大写
- lowercase: 小写
- capitalize: 驼峰式
<style>
input{
text-transform: capitalize; // 注意每个单词首字母大写，例如在输入框中输入：rain tune,则会变成 Rain Tune
}
</style>
<input type = 'text'/>
<button>获取输入框的值</button>
<script>
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByTagName('input')[0];
btn.onclick = function() {
console.log(text.value); // 注意虽然已经转成驼峰式，但是打印出来的值还是原来没有转换的值（原始输入值）
}
</script>
7.3 空格间隙
word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格，则该属性无效。下面代码设定空格间隙是20px，也就是说空格现在占据的宽度是原有的空格宽度+20px的宽度：
<p>我有空 格，我好伤心，呜 呜 呜......</p>
<style>
p {
word-spacing: 20px;
}
</style>
7.4 white-space 空白处理
如果在html中输入多个空白符，默认会被当成一个空白符处理，实际上就是这个属性控制的，它有以下几个值：
- normal：合并空白符和换行符；
- nowrap：合并空白符，但不许换行；
- pre：不合并空白符，并且只在有换行符的地方换行；
- pre-wrap：不合并空白符，允许换行符换行和文本自动换行；
7.5 text-align: justify
可以实现行内元素、或者文字的两端对齐，需要注意的是，达到换行要求的可以实现两端对齐，未达到换行要求的那一行会有个默认的空隙(6px)。
<style>
div{
width: 300px;
border: 1px solid gold;
text-align: justify;
}
span{
display: inline-block;
width: 80px;
height: 80px;
background-color: cyan;
box-sizing: border-box;
margin-top: 10px;
}
</style>
<div>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
</div>
注意如果span减少一个，因为第二行的3个span还没有达到换行的长度，所以默认间隙为6px,如下图所示
<div>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
<span><i>1</i>大家伙</span>
</div>
7.6 shape-outside
shape-outside 属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。
- 关键字值： none/margin-box/padding-box/content-box/border-box
- 函数值： 圆-circle()/椭圆-ellipse()/内嵌-inset()/多边形-polygon()
- 值： url(image.png);
- 渐变值：linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
- 全局值：initial/inherit/unset; 详细用法，见地址
例子：
<style>
.main{
width: 100%;
height: 100%;
}
.main div{
width: 120px;
height: 120px;
background-color: cyan;
float: left;
<!--shape-outside: circle()-->
}
</style>
<body>
<div class="main">
<div></div>
你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，你是个方的，
</div>
</body>
代码中若是没有shape-outside,则默认如下图显示。
代码中若是有shape-outside: circle(),你以为你是个方的，其实你是个圆的。则如下图显示。
7.7 input 输入框
并不是给元素设置display:block就会自动填满父元素宽度，input元素就是一个例外，其默认宽度取决于size属性。
- 示例1
<input type="text" size="10" style="display: block;">
当size设置为10的时候，则如下图所示
- 示例2
<input type="text" size="30" style="display: block;">
当size设置为30的时候，如下图所示
7.8 相邻兄弟选择器
<style>
ul{
border: 1px solid;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
默认图片是
ul>li+li{
border-top: 1px solid;
}
7.8 font-size，text-indent 字体大小
当设置font-size为0的时候，默认字体不显示。 当text-indent:50px;表示首行文本缩进50px;
7.9 conic-gradient圆锥渐变
div{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red,green,blue);
}
加入渐变以后默认样式如下图。
当设置背景色为background: conic-gradient(red 30%,green 30% 60%,blue 60% 100%);如下图所示。
7.10 outline
当没有加入outline属性时，样式如下
div{
width: 200px;
height: 200px;
border: 10px dashed blue;
box-sizing: border-box;
}
当加入outline: 10px solid gold时如下图所示，由图片可以看出，及时加入outline的div宽高并没有变化，这是outline的特性。
7.11 背景虚化filter：blur()
加入filter:blur(2px);效果如下
7.12 -webkit-fill-available和fit-content
- -webkit-fill-available:可以使inline-block元素像block元素一样填满父元素空间。
div{
width: 200px;
height: 20px;
border: 1px solid;
display: inline-block;
}
当设置width: -webkit-fill-available如下图所示
- fit-content: 可以使block元素像inline-block元素一样实现宽度包裹内容的效果。
div{
height: 20px;
border: 1px solid;
}
当设置width: fit-content如下图所示。
7.12 min-content/max-conntent 最小内容和最大内容
7.12 resize重置大小
普通元素也可以像textarea那样resize改变大小
