CSS核心技术详解

第1章遇见未知的CSS

使用pointer-events控制鼠标事件
```
.disabled{
	pointer-events:none;	/* 禁用鼠标事件 */   
}
```
还可以将一个遮罩元素的属性设置为poiner-events:none;这样就可以单击到遮罩层后面的元素。

如果将其设置为auto，那么单击子元素是还是会通过事件冒泡的形式触发父元素的事件

玩转CSS选择器（是的超级好玩！！！

当父元素下只有一个元素才会被选中

div:first-of-type:last-of-type{
    color:red;
}
/*或者*/
div:only{
    color:red;
}

当父元素下有多个子元素时，选中第一个

div:not(:last-of-type):first-of-type{
    color:red;
}
/*或者*/
div:not(:only-child){
    color:red;
}

可以结合使用上面两个XDDD

利用padding实现元素的等比例缩放

padding和margin有个奇怪（x的特点，它们的上下外边距的百分比是根据父元素的宽度计算的

<style>
.box{
    width: 100px;
    height: 10px;
}
.box div{
    position: relative;
    overflow: hidden;
    background-color: red;
}
.box div::after{
    content: "";
    width: 100%;
    display: block;
    padding-top: 100%;

}
.box div span{
    position: absolute;
    left: 0;
    top: 0;
}
</style>

    <div class="box">
        <div>
            <span>图片</span>
        </div>
    </div>

利用伪元素的padding-top”撑开”父元素的高，内容通过绝对定位来使用，因为绝对定位的元素是不占位置的，这样一个等比例宽高缩放就完成了。

calc函数
1. 运算符前后都需要保留一个空格
隐藏元素
- width或height为0
- opacity为0：元素本身存在只是看不见而已
- 通过定位将元素移出屏幕
```
div{
    position:absolute;
    left:-9999px;
}
```
- text-indent实现文字隐藏
```
div{
    text-indent:-9999px;
}
```
  给页面添加logo图片，若还想被搜索引擎搜索到，则需要添加这段文字，但是如果不想显示这段文字就可以使用这个方法。
- 通过z-index隐藏一个元素
- 设置overflow:hidden
- 设置visibility:hidden：元素不可见，但还占位置
- 设置display:none：将元素彻底隐藏
- 将元素背景设置为透明，字体大小设置为0
```
div{
    font-size:0;
    background-color:transparent;	/*元素还在只是不可见*/
}
```
- 将元素的max-width或者max-height设置为0
  
  宽度为0还会有文字溢出的问题，解决这个问题可以设置overflow:hidden;将文字大小设置为0。
  
  不过单纯的设置max-width为0的话可以实现文字竖排的效果唉！英文的话还得加上一个换行属性：word-break:break-all;
- transform的translate函数隐藏一个元素
```
div{
    transform:translate(-999999px);	/*移出可视区域*/
}
```
- 将元素缩放设置为0
```
div{
    transform:scale(0);
}
```
- 让元素重叠
```
div{
    transform:skew(90deg);	/*类似width等于0*/
}
```
- 设置margin为负大值

第2章 CSS核心概念

一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称为包含块
包含块的创建
- 定位为fixed的时候，包含块由视口创建
- 定位为relative，static的时候，包含块由最近的父元素或祖先元素创建
- 定位为absolute的时候，包含块由最近的relative，static，absolute元素创建
控制框
1. 块级元素和块框
  
  块级元素是那些是在视觉上被格式化为块的元素。（display：block）
  
  块级元素除了table以外都会形成一个主块框，并且这个主块框只包含一种类型的框，就是说要么块框，要么行内框。主块框会为子孙元素建立包含块，生成内容。主块框参与块级格式化上下文(BFC)。某些块级元素还会在主块框之外生成额外的框，比如当某个元素的display值为list-item时，它还会生成一个额外的框来放置这些标志，比如li元素前面的标识。
2. 匿名块框
```
<div>这是一段<p>内容</p></div>
```
  在上面的代码中，div包括了一段文本和一个块框p，此时div似乎既包括了行内框，又包括了一个块框，那么它会将所有的行内框都包含在一个匿名块框之中。
3. 行内元素的行内框
  
  行内元素是那些不生成新的内容块的元素，内容在行内显示，通过display也可以将一个元素转变成一个行内元素。
4. 匿名行内框
```
<div>
    这是一段<em>内容</em>
</div>
```
  在上面的代码中，div包括了一段文本和一个em元素，此时div似乎包含的都是一个行内框，那么它会生成一个匿名行内框
5. 插入框
  
  如果一个元素的display值为run-in，那么它会根据后面的元素来确定它的类型应该是什么
  - 如果后一个元素是行内元素或行内块元素，那么display值为run-in的元素将生成一个块框
  - 如果它后面跟的是一个块级元素，那么将会生成一个行内框
display的一些特性如下
- block运用此值生成一个块框
- inline-block运用此值生成一个块框，元素内部按照块框格式化，但元素本身按照一个行内元素的形式格式化
- inline运用此值生成一个或多个行内框
- list-item运用此值将生成一个块框和一个列表项行内框
- none运用此值将不再结构中显示，不产生任何框
- run-in根据后一个元素产生框
元素所在的环境以及初始化就叫作格式化上下文
格式化上下文BFC，IFC
1. 从overflow清除浮动看BFC
  
  overflow处理方式：如果这个元素没有设置宽高，那么就将所有元素的宽高加起来做父盒子的宽高，就导致了永远不可能溢出。所以，用overflow清除浮动起只不过是让父元素重新自适应了子元素的宽高，顺便清除浮动。
2. 从overflow看BFC
  
  = =！这个没看的很懂唉！感觉回头再看一遍把！

第3章 CSS单位究竟来自何方

百分比
- 父元素在不设置高度的情况下，是自适应子元素的高度。在不设置高度的情况下，html和body的高度是所有内容加起来的告诉。在高度为0或者不设置高度的情况下，高度是文字的行高
- 当position设置为absolute的时候，此时元素已经脱离了文档流了，如果绝对定位的元素没有定位的祖先元素，则包含块为初始包含块，此时百分比是参照可视区的大小来计算的。
- 如果想让定位元素的高度占满整个屏幕，可以为body设置relative，该元素设置绝对定位。
- 固定定位参照可视区
auto
- 块类非替换元素 = “margin-left” + “border-left-width” + “padding-left” + “width” + “padding-right” + “border-left-width” + “margin-right”
  - 如果有一个值指定为auto，那么它的计算值为剩余空间
  - 如果将宽度的值设置为auto，那么其他属性的auto都为0，剩余空间都会变成width的值
  - 如果将margin-left和margin-right都设置为auto，则它们的计算值相等。也就是剩余空间一人一半
- 如果将行内元素margin-left或margin-right设置为auto，结果都是0，另外width对于行内元素也是无效的
- 绝对定位
  - left和right是偏移量，可以假设这个left就是起点，而right作为一个终点，元素的宽度就由这两个值决定。
  - 绝对定位的元素
    
    包含块的宽 = “left” + “margin-left” + “border-left-width” + “padding-left” + “width” + “padding-right” + “border-left-width” + “margin-right” + “right”
  - 行内和行内块元素的空间只有自身的那些位置，而那些位置又都让宽度和高度占了，所以在行内和行内块中设置auto就没有效果了。对于宽度和高度来说，设置auto始终没有意义。因为它是根据内容计算的。这也可以用来解释为什么说定位了的元素的元素要设置left和right为0，”margin: 0 auto”才会起效果。因为定位的元素和行内块一样，宽度和高度默认是由内容决定的，而这个宽度和高度都被内容占了，所以就没有效果了。设置了left和right为0时，它将剩余空间扩大了。就像块级元素一样，虽然看不见，但是如果设置了它的高度，剩下的空间就由其他属性分配。
  - 对于浮动元素来说，如果设置width，margin为auto，那么其结果都为0，宽度由内容来决定
- 总结
  
  水平方向
  - 如果将一个替换元素的宽度设置为auto，则宽度等于内在宽度
  - 对于行内元素来说，width并不适用，其他的几个属性，比如当margin-left设置为auto时，结果也都是0
  - 块类元素将属性设置为auto的时，则占满剩余空间
  - 对于绝对定位元素，如果只有一个属性的值为auto，则占满剩余空间
  垂直方向
  - 将替换元素设置为auto，其结果为0。如果将一个替换元素的高度设置为auto，则高度由内在高度决定
  - 将块类，非替换元素，浮动的非替换设置auto，其结果为0，如果是height，则取决于子元素的高度的总和
  - 绝对定位如果只有一个属性的值为auto，则占满整个空间

ch表示一个数字0的大小

1ch = 1个英文 = 1个数字； 2ch = 1个中文

{
 	overflow:hidden;	/*超出隐藏*/
    white-space:nowrap;	 /*防止换行*/
	text-overflow:elipsis;	/*省略号*/
}

min和max
- 设置图片一直保持文字后面，但间距不要太大，且超长隐藏
  
  此时可以考虑设置max-width
none

关于设置none还是0，使用none相当于不渲染，而使用0还是会渲染，对于性能来说肯定也是不一样的，所以尽量使用none关键字，而不要使用0

第4章那些年我们一起定位过的元素

relative并不脱离标准流，但是它的层级比标准元素高
static是默认position的值。所以，可以用static取消定位。
fixed的另外一个问题就是当移动端使用fixed的时候，制作遮罩的时候会发现，在部分浏览器中，如果滚动内容，遮罩后面的内容也会跟着滚动。可以试试
```
body{
    position:fixed;
    left:0;
    top:0;
}
```
会发现需要滚动的元素滚动不了了，所以还可以给该元素增加一个属性
```
overflow-y:auto;
```
最简单的方法是直接给body增加overflow:hidden;然后关闭遮罩的时候去掉即可

第5章元素的七十二变——元素转换

display介绍
- none：在格式化结构中不产生框，同时使子元素也不产生任何框
- block：生成一个块框，独占一行，在没有设置高度的情况下，高度由内容决定
- inline：生成一个或多个行内框，其他含内元素或行内块，以及浮动可以与它并排，宽高由内容决定，并且width，height，margin-top，margin-bottom将不起作用，可以使用padding，但是上下padding不占位置
- inline-block：其他行内元素或者行内块元素，以及浮动元素可以与它并排，宽高由内容决定，但可以使用width，height，margin，padding等属性
- 初始值为inline，客户端对其他元素有默认样式，会将其覆盖，所以可以发现一些浏览器不认识的元素会被当成行内元素
行内元素将会与其他的行内以及行内块并排
```
<a>item1</a>
<a>item2</a>
```
虽然并排但是会有几像素的间距，这个是由html文档中的换行和回车造成的

可以直接把两个元素放在一行即可解决问题
inline
```
<style type="text/css">
html,body{
    margin: 0;
   	padding: 0;
}
.item1{
    display: inline;
    /*width: 200px;*/
    /*height: 200px;*/
    /*margin: 50px;*/
    padding: 100px;
    background-color: red;
}
.item2{
    width: 100px;
    height: 100px;
    background-color: green;
    border: 1px solid #dedede;
}
</style>
   <div class="item1">item1</div>
   <div class="item2">item2</div>
```
效果如图

inline的padding会起作用，不过就像脱离了标准流一样，并不会占据位置，并且还把其他元素(item2的绿box)给盖住了。除了文字以外，看似padding-top似乎没有起作用，但其实是因为它不占位置的原因，跑到浏览器外面了。

假如inline的元素没有内容，padding-top/bottom将会不起作用，给padding-left/right设置个值就有用了(我猜是有高度没有宽度所以不显示…)，而且还会叠在正常元素上，也就是padding不占位置，且层级比其他元素高
inline和inline-block都会引起间距的空格，解决方案
- 去掉空格（僵硬
- 将margin-left设置为负值
- 给父元素加font-size:0px;
- 给父元素加letter-spacing负值，然后通过子元素清除letter-spacing值
```
.fa{
    letter-spacing:-8px;
}
.fa *{
    letter-spacing:0px;
}
```

制作垂直居中的其他方法

    <div class="box">
        <div>
            <p>hhh</p>
        </div>
    </div>

.box{
  display: table;		/*父元素display:table*/
  width: 200px;
  height: 200px;
  background-color: pink;
  div{				   
    display: table-cell;	/*子元素为table-cell且只有一个，默认占满父元素*/
    vertical-align: middle;	/*将div中的子元素p垂直居中*/
    p{
      width: 50px;
      text-align: center;
      height: 50px;
      background-color: #e6323e;
      margin: 0 auto;		/*p元素水平居中*/
    }
  }
}

原理是display:table-cell的元素可以像表格一样使用vertical-align属性，先让它垂直居中，然后再给子元素设置margin:0 auto;就行。

第6章浮动趣事

float三个属性
- none：不浮动，默认值
- left：产生一个块框，并向左浮动。起点是框的顶部（除非还设置了clear属性），display被忽略，除非为none值，如果它的后一个元素是块级元素，那么后一个元素将会占据浮动的位置，并且浮动的元素的层级总是在标准流之上
- right：和left一样，只不过是向右浮动
当元素设置定位值为absolute，fixed时，浮动将被忽略
因为行内元素使用浮动之后产生了块框，因此它可以使用width，height，margin，padding等属性
父元素无法自适应浮动元素的高度
浮动元素会被后一个元素(不浮动)的margin-top值所影响
浮动实现文字环绕

第7章再不学这些选择器就老了

:active选择器
:first-letter选择第一个字
:first-line选择首行文字
模拟父元素选择器

本质是利用其它元素替代父元素，然后通过相邻元素选择器实现
:empty选择器

可以利用empty选择器+伪元素选择器给默认提示
:target选择器
- 利用:target选择器实现遮罩

第八章 CSS图标制作

一个元素开始没有边框，后面动态加上去，那么它就会抖动

可以加一个透明的边框，或者在没有背景色的情况下加个padding，然后hover加border的时候去掉padding
outline不占空间，类似box-sizing
善用box-shadow！！！

x轴偏移量 y轴偏移量阴影大小边框大小填充的颜色

第9章你今天换背景了吗

改变背景原点 background-origin
- padding-box：从padding区域（含padding）开始显示背景图像
- border-box：从border区域（含border）开始显示图像
- content-box：从content区域开始显示图像
图片剪裁 background-clip
- 利用background-clip制作图片缩放效果
  
  根据属性不同从开始剪裁的区域不同实现缩放
- 可以背景到文字上
  
  把文字颜色设置成透明，然后在将背景剪裁设置为text
```
<style>
.box{
  	font-size: 100px;
  	-webkit-text-fill-color: transparent;
  	background: url("images/20170116105232_K3WNQ.jpg");
  	-webkit-background-clip: text;
}
</style>
    <div class="box">
        honeyworks
    </div>
```
- 多重背景
  
  背景定位如果只写一个值，后一个默认居中

第10章让文字更美一点

文字渐变

和上面使用背景剪裁一样，只不过是把背景设置为渐变色
文字两端对齐
- justify：内容两端对齐，但对换行以及最后一行不做处理
- start：水平方向类似left，垂直方向类似top
- end：相反
- justify-all：与justify效果等同，但会对最后两端也对齐
末尾文本对齐 text-align-last

PS：如果同时设置text-align和text-align-last，那么会忽略text-align对最后一行的设置
文本书写模式 writing-mode
webkit内核的浏览器有一个line-clamp属性，它可以用来限制一个块级元素显示的文本行数
字母转化大小写 text-ttransform

第11章内容生成技术——用CSS来计数

伪元素两个冒号….一个冒号是为了兼容以前的浏览器
counter-reset重置计数器

在父元素重置
可以手动更改counter-increment
content的其他用途
- attr：插入标签属性值
- url：插入一个外部元素
```
.box a::after{
	content:attr(title);	/*插入该a标签的title属性值*/
}
```

####第13章飞越CSS

当边框颜色和文字颜色一样时，可以省略边框颜色
当文字颜色和其他颜色一样的时候，可以使用currentColor关键字来继承颜色

CSS核心技术详解读书笔记

第1章遇见未知的CSS

第2章 CSS核心概念

第3章 CSS单位究竟来自何方

第4章那些年我们一起定位过的元素

第5章元素的七十二变——元素转换

第6章浮动趣事

第7章再不学这些选择器就老了

第八章 CSS图标制作

第9章你今天换背景了吗

第10章让文字更美一点

第11章内容生成技术——用CSS来计数

CATALOG

FEATURED TAGS

第1章 遇见未知的CSS

第2章 CSS核心概念

第3章 CSS单位究竟来自何方

第4章 那些年我们一起定位过的元素

第5章 元素的七十二变——元素转换

第6章 浮动趣事

第7章 再不学这些选择器就老了

第八章 CSS图标制作

第9章 你今天换背景了吗

第10章 让文字更美一点

第11章 内容生成技术——用CSS来计数

CATALOG

FEATURED TAGS

第1章遇见未知的CSS

第4章那些年我们一起定位过的元素

第5章元素的七十二变——元素转换

第6章浮动趣事

第7章再不学这些选择器就老了

第9章你今天换背景了吗

第10章让文字更美一点

第11章内容生成技术——用CSS来计数