css2.0深入探究

要想深入一个事物，最好对其总体有个大体的了解。要想学好css,最好对其进行深入的研究，让自己对其有足够的控制感，这样才能发挥css最大的价值。

程序员必读

Css3编码技巧

1.css尺寸

1.首选最小宽度–实现复杂图形效果

在css中，图片和文字的权重远大于布局，因此当width:0时表现出来的宽度就是“首选最小宽度”。
中文的最小宽度为每个汉字的宽度，西方文字取决于连续的英文字符单元。

.minW{
    display: inline-block;
    width: 0
}
.minW:hover::before{
    content: "你 love 我";
    color: transparent;
    outline: 2px solid #cd0000;
}

2.子元素宽度设为100%时的奇怪现象原理探究

父元素的宽度 = 图片宽度 + 文字内容宽度
浏览器渲染原理：先下载文档内容，加载头部样式资源，然后按从上到下、自外而内的顺序渲染dom内容。
本例的现象产生的原因就是：当渲染到父元素时，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是以固定好的父元素的宽度，宽度不够只能溢出。

img

半透明背景色是父级width:100%

.box{
    display: inline-block;
    white-space: nowrap;
}
    .text{
    display: inline-block;
    width: 100%;
}

3.如何让元素支持height:100%效果

* 1.设置显示的高度值
* 2.使用绝对定位

知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box

4.任意高度元素的展开收起动画(max-height/min-height)

* 1.min-height/min-width的初始尺寸为auto, max-height/max-width的初始尺寸为none
* 2.min-height/min-width的优先级高于max-width/max-height

首页

花朵

云彩

DIV

.nav > .sub-nav{
    max-height: 0;
    overflow: hidden;
    transition: max-height .6s cubic-bezier(.17,.67,.76,1.41)
}
.nav:hover > .sub-nav{
    max-height: 400px;
}

5.内联元素深入探究

常见的内联元素有：display设置为inline,inline-block,inline-table的元素
内联盒模型:

1. 内容区域：可以理解为文本选中的背景色区域(重点)
2. 内联盒子：内联标签或者纯文本
3. 行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子
4. 包含盒子：由行框盒子组成的盒子

幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。如下案例所示：

<div class="in-ex"><span style="display: inline-block"></span></div>

6.深入理解content

1.在web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包含边框）为300*150，如video,iframe,canvas等，少数为0，如img,而表单元素的替换尺寸和浏览器自身有关。

2.对于img元素，如果有css尺寸，则最终尺寸由css尺寸决定(css尺寸 > html尺寸 > 固有尺寸)

3.当图片的src属性缺省时，图片不会有任何请求，是最高效的实现方式，如下展示的是使用此方式的图片占位代码(对于firefox浏览器，src缺省的img是一个普通的内联元素，宽高设置无效)：

img { visibility: hidden; }
img[src] { visibility: visible; }

4.content内容生成技术

/* 1.实现换行 */
::after{
    content: '\A';
    white-space: pre;
}

2.实现正在加载动画

正在加载中

.dot{
    display: inline-block;
    width: 8em;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
.dot::after{
    display: block;
    margin-left: 5.2em;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot{
    33% { transform: translateY(-3em);}
    66% { transform: translateY(-2em);}
    99% { transform: translateY(-1em);}
}

3.属性值内容生成

<div class="icon" data-tip="江小白"></div>
/* 可以使用原生属性和自定义属性 */
.icon::after{
    content: attr(data-tip);
}

4.计数器属性---纯css实现技术器效果
> 知识点： content的计数器属性

西瓜

香蕉

萝卜

.box1{
    counter-reset: count1;
}
.xigua:checked::before{
    content: counter(count1);
    counter-increment: count1;
    position: absolute;
    color: transparent;
}
.box1::after{
    content: counter(count1);
}
</style>
<div class="counter">
    <div class="box1">
        <div>西瓜<input class="xigua" type="checkbox" /></div>
        <div>香蕉<input class="xigua" type="checkbox" /></div>
        <div>萝卜<input class="xigua" type="checkbox" /></div>
    </div>
</div>

6.padding深入研究

1.对于盒模型设置为box-sizing: border-box的元素，如果padding足够大，那么width将失效:

内容为首选最小宽度

width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;

2.对于内联元素，padding对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局:

父元素不设置overflow

父元素设置overflow

/* 父元素设置 */
.pd-2-1{
    overflow: auto;
}
.pd-2-1 > span{
    padding-top: 1em;
    padding-bottom: 1em;
}

3.padding的实际应用（具体实现可自行思考）
    1.增加链接或按钮的点击区域的大小
    2.利用内联元素的padding实现高度可控的分割线
    3.用内联元素实现瞄点定位距离

4.利用padding百分比值实现等比例缩放图片效果

.pd-3{
    padding: 10% 50%;
    position: relative;
}
.pd-3 img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

** 注：内联元素的垂直padding会让幽灵空白节点显现,此时可考虑设置font-size:0

5.padding与图形绘制

1.菜单图标设计

2.双层圆点效果

 /* 菜单 */
 .icon-menu{
    display: inline-block;
    width: 120px;
    height: 10px;
    padding: 35px 0;
    border-bottom: 10px solid;
    border-top: 10px solid;
    background-clip: content-box;
    background-color: currentColor;
}
/* 双层圆点 */
.icon-dot{
    display: inline-block;
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 50%;
    border: 10px solid;
    background-clip: content-box;
    background-color: currentColor;
}

7.margin深入研究

1.使用:nth-type-of(3n)去除子元素尾部margin

margin-right: 20px

margin-right: 20px

margin-right: 20px

.mg-item:nth-of-type(3n){
    margin-right: 0;
}

注：如果容器可以滚动，在IE和firefox下会忽略padding-bottom的值，chrome则不会，此时可以通过margin-bottom实现滚动容器的底部留白

* 其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示

2.margin合并
块级元素，但不包含浮动和绝对定位元素
在默认文档流下只出现在垂直方向

• margin合并的三种场景
  1.相邻兄弟元素
  2.父级和第一个/最后一个子元素

  * 解决方案： 父级设置为块级格式化上下文元素
              父元素设置border-top/bottom值
              父元素设置padding-top/bottom值
              父元素设置高度
  

  3.空块级元素margin合并

• margin合并的计算规则

  “正正取大值”，”正负值相加”，”负负最负值”

• 深入理解margin:auto
  1.如果一侧定值，一侧auto，则auto为剩余空间大小
  2.如果两侧均是auto，则平分剩余空间
  3.触发margin:auto计算的前提：width或height为auto时，元素是具有自动填充特性的。

/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;

• 绝对定位元素利用margin:auto实现水平垂直居中(兼容到ie8+)

.father{
    position: relative;
}
.child-2{
    position: absolute;
    left: 0; bottom: 0; right: 0; top: 0;
    width: 40px;
    height: 20px;
    margin: auto;
}

• margin无效情形解析
  1. display计算值为inline的非替换元素的垂直margin是无效的
  2. 对于内联替换元素，垂直margin有效，并且没有margin合并问题，所以永远不会发生margin合并
  3. 内联特性导致margin失效：一个容器里面有一个图片，图片设置margin-top,随着margin-top负值越来越大，达到某一具体负值时，图片将不再往上偏移

8.border深入研究

1. 重置边框的高性能方案

   border-width的默认值为3px,边框宽度没有半像素的概念
   边框样式的默认值是none,经测试以下方案性能最优

.border{
    border: 2px solid #ccc;
    border-bottom: 0 none;
}

1. border-style: double的高级用法

   double的表现规则: 双线宽度永远相等，中间间隔+-1
   利用双线边框实现菜单按钮

.border-icon{
    width: 100px;
    height: 20px;
    border-top: 60px double #06c;
    border-bottom: 20px solid #06c;
}

9.字母x与css中的基线

基线 字母x的下边缘
x-height 指字母x的高度
ex：ex指小写字母x的高度，是相对单位
vertical-align:middle 指的是基线往上1/2 x-height高度

X X

内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的vertical-align来调整对齐的

10.line-height深入研究

1.对于非替换元素的纯内联元素，其可视高度完全由line-height决定，padding,border对其可视高度没有任何影响。
2.line-height不能影响替换元素的高度

徐r

3.line-height属性值的具体了解：
数值：如1.5，即1.5倍字体大小，此时子元素将继承1.5而不是最终父元素计算的值
百分比：如200%，子元素将继承最终计算的值
em：如2m，子元素将继承最终计算的值

4.多行文本垂直居中

徐rjhfj下客服打击开发商电话JFK幅度萨芬京东卡好的的JFK是否获得男子冒充

/* 文本块用inline-block，借助vertical-align: middle */
.lh2-wrap{
    line-height: 7em;
}
.lh2-1{
    display: inline-block;
    line-height: 2em;
    vertical-align: middle;
}

5.计算行高时，一定要向上舍入，因为谷歌浏览器计算数值时是向下取整的6.无论内联元素line-height如何设置，最终父元素的高度都是由数值大的那个line-height决定的。

10.vertical-align深入探究

1.vertical-align的数值百分比属性值介绍：
数值： 如vertical-align: 10px; 正值往上偏移，负值往下偏移，兼容性良好
百分比： 如vertical-align: 10%; 基于line-height计算，不过不常用

2.vertical-align的作用前提： 只能应用于内联元素和display:table-cell的元素
注：1.浮动和绝对定位会让元素块状化，所以使用vertical-align时会失效
2.对于teble-cell元素而言，vertical-align作用的是自身，因为其本身有内联性质，所以对子元素设置vertical-align无效

3.vertical-align和line-height的关系重要

• 现象1：容器高度不等于行高

x徐rjhfj下客

.lh3-wrap{
    line-height: 32px;
}
.lh3-1{
    font-size: 28px;
}

为什么实际高度会超过32px呢？是因为幽灵空白节点的字体大小和内联元素字体大小不同，字体越大基线越低导致两个元素上下偏移，使得容器高度超过原先的设定。
解决方案：1.内联元素设置对其方式为bottom或者top
2.将幽灵空白节点和内联元素字体设置成一样的

• 现象2. 图片底部始终留有间隙的问题

原因：是由line-height,vertical-align和和幽灵空白节点共同决定的。因为图片之前的空白节点和图片默认基线对齐，而幽灵空白节点的行高导致多余的间隙导致图片下面空出了一段距离。
解决方案： 1.图片块状话化
2.容器line-height足够小
3.图片设置vertical-align为top,bottom,middle任意一种

• 现象3. 图片设置margin-top到一定值时无效
  原因： 被幽灵空白节点的vertical-align:baseline限定死了

4.应用-实现垂直剧中的弹窗

dddd

显示弹窗

.mask{
    position: fixed;
    /* z-index: 9999; */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: rgba(0,0,0,.8);
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.mask::after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.dialog{
    display: inline-block;
    text-align: left;
    font-size: 14px;
    color: #fff;
    white-space: normal;
}

11.float作用机制

• 1.作用机制: 使父元素高度塌陷从而实现文字环绕效果
• 2.float的定位参考是行框盒子,位于哪个行框盒子后就与哪个行框盒子对齐
• 3.clear属性只有块级元素才有效,如果clear:both元素前面是float元素,则设置margin-top负值无效
• 4.clear:both后面的元素仍然可能发生文字环绕效果

12.BFC–块级格式化上下文

• 1.表现: 元素内部的布局变化不会影响外部的元素.所以不会出现margin合并,可用来清除浮动的影响.

• 2.触发BFC的条件:

  1. 根元素
  2. float的值不为none
  3. overflow的值为auto,scroll,hidden
  4. display的值为table-cell,inline-block
  5. position的值不为static或者relative

• 3.若元素具备BFC特性,则无需clear:both去清除浮动

• 4.display:table-cell的特性: 宽度设置的再大,也不会超过表格容器的宽度
• 5.overflow裁切界限:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding box内边缘
• 6.在PC端,默认滚动条均来自,PC端滚动高度可以用document.documentElement.scrollTop获取,在移动端用document.body.scrollTop获取
• 7.PC端滚动条宽度约为17px
• 8.让页面滚动条不出现晃动的方法:

html{
    /* ie8 */
    overflow-y: scroll;
}
:root{
    overflow-y: auto;
    overflow-x: hidden;
}
:root body{
    position: absolute;
}
body{
    width: 100vw;
    overflow: hidden;
}

• 9.多行文本溢出显示省略号的css方法:

.ell-rows-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

13.overflow与position:absolute

1.如果overflow不是定位元素,并且绝对定位元素和overflow容器之间没有定位元素,则overflow无法对absolute元素进行切割
2.如果overflow属性值不是hidden而是auto或者scroll,则即使绝对定位元素宽高溢出也不会出现滚动条
3.对于现代浏览器,如果overflow子元素transform溢出,则会裁剪’’
4.overflow默认值为visible,内容不会被修剪，会呈现在元素框之外

14.absolute与clip

1.clip属性要想起作用，元素必须是absolute或者fixed,语法如下：

/* 裁剪区域，不支持缩写和百分比值 */
clip: rect(top right bottom left)

2.clip应用与渲染

• 1.最佳可访问性隐藏

/* 多用于SEO优化和对表单控件样式的优化以及屏幕阅读器的可访问性 */
.clip{
    position: absolute;
    clip: rect(0 0 0 0);
}

• 2.clip渲染

clip隐藏仅仅决定了哪部分是可见的，对于原来占据的空间并没有影响，非可见部分无法响应点击事件。在ie和火狐浏览器中，抹掉了不可见区域尺寸对布局的影响，chorme浏览器却保留了。

.re-box{
    position: relative;
    width: 200px;
    height: 200px;
    background: #eee;
    overflow: auto;
}
.sb-sub{
    position: absolute;
    width: 180px;
    height: 280px;
    clip: rect(0 0 0 0);
}

absolute流体特性

• 1.absolute流体特性产生的前提： 对立方向上同时发生定位的时候

/* 此时设置padding和margin，其占据的空间将不变，变化的是content box的尺寸 */
.ab{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 20px;
}

• 2.absolute的margin:auto居中

/* 绝对定位元素的margin:auto的填充规则和普通流体一样如果一侧定值一侧auto,auto未剩余空间大小 */
.ab1{
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;
    width: 200px;
    height: 200px;
    margin: auto;
}

• 3.在有些场合下，百分比transform会让ios微信闪退，尽量避免用其使元素居中，可以采用absolute和margin:auto解决

15.relative难点解析

• 1.relative的定位位移是相对于自身的，如果left/top/right/bottom的值为百分比单位，则计算尺寸是基于父元素

• 2.如果left/right 或top/bottom这些对立属性同时出现时，只有一个方向的属性会生效，优先级与文档流的顺序有关，默认的文档流是自上而下，从左到右的，所以top优先级高于bottom,left优先级高于right

• 3.relative的最小化原则

  1.尽量不使用relative,可以采用无依赖绝对定位解决某些问题
  2.如果一定要使用relative,则relative务必最小化（最小包含区域） –为了避免层级覆盖等问题

• 4.层叠上下文

  1.定位元素的默认z-index:auto;此时和普通元素一样，一旦z-index设置为任意数值，就创建了一个层叠上下文，顺序为：
  层叠上下文 < 负z-index < block < float < inline < z-index:auto < 正z-index
  2.css3新属性的层叠上下文：
  1.flex
  2.opacity不为1
  3.transform不为none
  4.mix-blend-mode不为normal
  5.filter不为none
  6.isolation是isolate
  7.will-change为上面2-6的任意一个
  8.元素-webkit-overflow-scrolling设为touch

3.z-index负值在block下面，实际应用：
1.可访问性隐藏
2.ie8下的多背景隐藏

16.字体相关

• 1.font-weight数值

  font-weight的数值范围是100-900，值必须是整百

• 2.text-indent

  text-indent:100% 百分比值是基于当前元素的包含块计算的，即父元素宽度

• 3.text-indent应用–对话式排版

明：我其实一开始就知道，我喜欢你，所以，让我追你吧，用尽一切力量，守护你，呵护你，或许自己还不够成熟？是吗？那就试试看，好不好！

红：我其实一开始就知道，我喜欢你，所以，让我追你吧，用尽一切力量，守护你，呵护你，或许自己还不够成熟？是吗？那就试试看，好不好！

text-indent: -2em;

• 4.letter-spacing 用来控制字符之间的变化，包括英文字母，汉字以及空格

  其负值只能让字符重叠，不能让替换元素，inline-table发生重叠
  word-spacing是单词间距

• 5.按钮之间的间距可以用如下方法设置

.btn + .btn{
    margin-left: 20px;
}

• 6.强制换行 word-break: break-all

  所有字符只要超出就换行，而word-break: break-word会保留整个单词的完整性

• 7.实现中文两端对齐兼容方案

.justify{
    text-align: justify;
    text-justify: inter-ideograph;
}

• 8.字符串大小写text-transform

  身份证输入等强制大写

input{
    text-transform: uppercase;
}

• 9.::first-letter–作用于子元素

  应用：实现字体控制

￥200

.t-tr:first-letter{
    font-size: 36px;
}
</style>
<div class="t-tr">￥200</div>

• 10.隐藏元素的background-image的加载

  在firfox下，display:none的元素的background-image不加载，包括父元素设置display: none,在chrome和safari下若父元素为display:none则不加载，本身隐藏会加载，对于ie来说都会加载
  通过背景图片实现鼠标经过切换图片效果时最好把两张图片合成一张图，这样既减少请求又可以提高用户体验

• 11.background-position百分比计算规则

  positionX = (容器宽度 - 图片宽度) percentX
  positionY = (容器高度 - 图片高度) percentY

• 12.兼容PC端的hidden属性

[hidden]{
    display: none;
}
<div hidden></div>

• 13.visibility的继承性

  父元素设置visibility: hidden,子元素会继承该特性，如果子元素设置visibility: visible,则子元素会显示出来
  visibility: hidden不会影响计数器技术，而display：none会影响
  有过渡效果，display则没有

• 14.user-select:none使得文本不能选中

user-select: none;
/* 默认鼠标图形 */
cursor: default;

• 15.自定义光标

.cur{
    cursor: url(transparent.cur);
}