2019年6月20日工作总结---CSS篇

1、：webkit-scrollbar 自定义滚动条的样式（缺陷对Firefox和IE不支持）

 实例：

属性：

1. ::-webkit-scrollbar        解决了把bar本身的背景。它通常由其他元素覆盖
2. ::-webkit-scrollbar-button           解决滚动条上的方向按钮
3. ::-webkit-scrollbar-track            解决进度条“下方”的空白区域
4. ::-webkit-scrollbar-track-piece  是可拖动滚动元素（拇指）未覆盖的进度条的最顶层
5. ::-webkit-scrollbar-thumb             解决根据可滚动元素的大小调整大小的可拖动滚动元素的问题
6. ::-webkit-scrollbar-corner           解决了可滚动元素的（通常）底角，两个滚动条可能会遇到
7. ::-webkit-resizer         解决了scrollbar-corner一些元素底角上方出现的可拖动调整大小手柄的问题

知识点：

-webkit-scrollbar  在Mac OS版本上强制显示水平或垂直滚动​​条的好方法

CSS3自定义滚动条样式 ::webkit-scrollbar

2017年11月07日 16:49:49 无名前端小白 阅读数 14185

版权声明：转载需注明出处 https://blog.csdn.net/byc233518/article/details/78469547

windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条， 故回头翻了一下CSS3， 还真能不用插件实现自定义滚动条的样式，正合我意

代码如下：

 

1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

2. ::-webkit-scrollbar

3. {

4. width: 6px;

5. height: 6px;

6. background-color: #F5F5F5;

7. }

8.  

9. /*定义滚动条轨道 内阴影+圆角*/

10. ::-webkit-scrollbar-track

11. {

12. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

13. border-radius: 10px;

14. background-color: #FFF;

15. }

16.  

17. /*定义滑块 内阴影+圆角*/

18. ::-webkit-scrollbar-thumb

19. {

20. border-radius: 10px;

21. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

22. background-color: #AAA;

23. }

具体含义及其他设置项：

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
 

:horizontal  
//horizontal伪类适用于任何水平方向上的滚动条  
  
:vertical  
//vertical伪类适用于任何垂直方向的滚动条  
  
:decrement  
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮  
  
:increment  
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮  
  
:start  
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面  
  
:end  
//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面  
  
:double-button  
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  
:single-button  
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  
:no-button  
no-button伪类表示轨道结束的位置没有按钮。  
  
:corner-present  
//corner-present伪类表示滚动条的角落是否存在。  
  
:window-inactive  
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。  
  
::-webkit-scrollbar-track-piece:start {  
/*滚动条上半边或左半边*/  
}  
  
::-webkit-scrollbar-thumb:window-inactive {  
/*当焦点不在当前区域滑块的状态*/  
}  
  
::-webkit-scrollbar-button:horizontal:decrement:hover {  
/*当鼠标在水平滚动条下面的按钮上的状态*/  
}  

2、Linux下问题

（1）问题：

解决办法：

 （2）.swap文件

类似的该类文件，用git status查看状态，这类文件可以用 rm -f 对应的文件，删除就ok。

3、Linux下vim操作

4、Vue的v-cloak用法

5、transform和position的居中方式

6、transform的用法

大小和颜色： 

上下左右居中：

单独上下或者左右居中：

 使用transform能实现带像素偏移的居中：

 

7、iconfont使用：

阿里的iconfont矢量图标是一个不错的图标库，找到适用的图标，生成CSS文件，引入项目。

8、point-events:none;

9、CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？

前言

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。

演示

来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版）

滚动条组成

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

简洁版

这里就不贴出详细代码了，demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式

1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

2. ::-webkit-scrollbar

3. {

4. width: 16px;

5. height: 16px;

6. background-color: #F5F5F5;

7. }

8.  

9. /*定义滚动条轨道 内阴影+圆角*/

10. ::-webkit-scrollbar-track

11. {

12. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

13. border-radius: 10px;

14. background-color: #F5F5F5;

15. }

16.  

17. /*定义滑块 内阴影+圆角*/

18. ::-webkit-scrollbar-thumb

19. {

20. border-radius: 10px;

21. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

22. background-color: #555;

23. }

详细设置

定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？

伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。

1. :horizontal

2. //horizontal伪类适用于任何水平方向上的滚动条

3. :vertical

4. //vertical伪类适用于任何垂直方向的滚动条

5.  

6. :decrement

7. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮

8. :increment

9. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮

10. :start

11. //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面

12. :end

13. //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面

14. :double-button

15. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。

16.  

17. :single-button

18. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。

19. :no-button

20. no-button伪类表示轨道结束的位置没有按钮。

21. :corner-present

22. //corner-present伪类表示滚动条的角落是否存在。

23.  

24. :window-inactive

25. //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

26. ::-webkit-scrollbar-track-piece:start {

27. /*滚动条上半边或左半边*/

28. }

29. ::-webkit-scrollbar-thumb:window-inactive {

30. /*当焦点不在当前区域滑块的状态*/

31. }

32. ::-webkit-scrollbar-button:horizontal:decrement:hover {

33. /*当鼠标在水平滚动条下面的按钮上的状态*/

34. }

10、-webkit-scrollbar 滚动条样式设置

大家有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条很酷炫，很高端，就连chrome32.0之后都抛弃了原始的滚动条，明显好看多了，那么浏览器如何自定义滚动条呢？

---

分割线为敬

---

首先： 
谈谈兼容性：webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea等滚动条自定义样式，所以用处还是很大的，当然兼容所有浏览器滚动条的样式目前还是不存在的 
实例：经典的demo

于是好奇心查了一下兼容性：废话不多说看图 

这里是滚动条的一些属性

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

直接上demo

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  

好奇的小伙伴可以，打开你喜欢的编辑器测试一下，最好在chrome浏览器下测试，之后再去别的浏览器下看看效果，你就知道chrome的强大，毒瘤IE的坑爹。

详细：定义滚动条就是利用了伪元素与伪类

伪类：：link、:hover、:visited、:active、:focus等等一些基于当前元素处于的状态。 
伪元素：：first-line、：before、:after等等一些对元素特定内容的操作。

webkit中可以吧滚动条当做一个页面元素来定义，在结合CSS3的属性，来进行修饰。

11、清除浮动的文章：

（1）浅谈CSS清除浮动（ClearFix）的方法

 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oooyou/article/details/76448516

在很多开发过程中，常常会用到浮动流来弥补标准流布局所难以实现或者不合适的缺陷。但如果一味地使用浮动流进行布局，其产生的副作用足够大之时，就难免会遇到一些“尴尬”和棘手的问题。

什么是清除浮动？

在非 IE 浏览器（如 Chrome）下，当容器的高度为auto，且容器的内容中有浮动（即CSS配置有float:left或right）的元素，在这种情况下，容器的高度不会自动伸长以适应内容的高度，所以里面的内容溢出到容器外面而影响（甚至破坏）布局，这个现象称为浮动溢出。 
为了避免这个现象的发生，消除其带来的负面影响而进行的一些CSS处理，称为清除浮动。

为什么要清除浮动？

可以很简洁地说，清除浮动就是为了清除浮动元素产生的不良影响。

浮动带来的负面影响

1、背景无法显示 
由于浮动的设置，如果对父级设置了CSS 背景 background、CSS背景颜色或CSS背景图片，则父级元素将不能被撑开，所以导致CSS背景不能显示。

2、边框无法撑开 
如果父级设置了CSS边框 border 属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin、padding 设置值无法正确显示 
由于浮动的设置，导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

举些例子： 

1. 块状元素钻到浮动元素底面，被其所覆盖：

2. 浮动元素的父元素坍缩：

上面说的不够详细，这里再举个实际的例子：

有2个div，各个div里都有3个写有文字的p标签，完成初始化配置后是这个样子的：

代码：

<style>
.box1{
    background-color:green;
}
.box2{
    background-color:yellow;
}
.box1>p{
    background-color:red;
}
.box2>p{
    background-color:blue;
}
</style>

<div class="box1"> 
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
</div> 
<div class="box2"> 
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
</div>

效果如图：

还没完，这只是开始。现在，要求将2个div里的p都左浮动显示。

p{
    float: left;
}

本以为应是这样：

结果却是这样的：

Whhhhat the … ? 
像产生这种难看的效果全因布局没做对，之前使用了左浮动float:left产生的负面影响没有消除。还好，我们有以下几种不错的方法可以解决这个问题。

清除浮动的方法

1. 给父元素设置一定的高度height

   <style>
   .box1{ 
       height: 100px;
   } 
   .box2{ 
       height: 100px;
   } 

   效果如下：

   

   将背景颜色除去，效果就正如我们想要的那样。 
   但是，这种方法太过僵硬，一般在开发过程中不建议自设高度。

2. 使用CSS的 clear 属性

   clear 属性规定元素的哪一侧不允许其他浮动元素。

   clear可能的值：

   left      在左侧不允许浮动元素。

   right    在右侧不允许浮动元素。

   both    在左右两侧均不允许浮动元素。

   none    默认值。允许浮动元素出现在两侧。

   inherit   规定应该从父元素继承 clear 属性的值。

3. 使用“隔墙法”

   所谓“隔墙法”是指在元素里面或外面添加一堵“墙”，即块元素，通过对其配置一定的CSS属性，以达到清除浮动的目的。

   隔墙法又分为两种： 
   A. 外墙法：在元素与元素之间新增一个块元素，并设置clear属性。

   <style>
       .clearfix{
           clear: both;
       }
   </style>
   
   <div class="box1"> ... </div>
   <div class="clearfix"> </div>
   <div class="box2"> ... </div>

   

   然而需要注意的是，位于新增的块元素（“墙”）前面的元素无法使用margin-bottom，而后面的元素却可使用margin-top。这里不作演示，留给大家自己尝试吧！

   B. 内墙法：在父元素里的所有子元素之后新增一个块元素（即父元素的last-child），并设置clear属性。

   <style>
       .clearfix{
           clear: both;
       }
   </style>
   
   <div class="box1"> 
       <p>Hello world!</p>
       <p>Hello world!</p>
       <p>Hello world!</p>
       <div class="clearfix"></div>
   </div> 
   <div class="box2"> ... </div>

   

   幸运的是，这个方法可以使位于新增的块元素（“墙”）前面的元素使用margin-bottom，后面的元素也可使用margin-top。这里也不作演示，留给大家自己尝试吧！

   虽然隔墙法可以很好的实现清除浮动，但也带来不好的一点：增加了额外多余的标签。

4. 使用 :after伪元素

   对使用了浮动流的元素进行:after配置，常见的典型的代码段如下：

   <style>
   .box1{ 
   ...
   }
   .box1:after{
   content: "";             /*内容设置为空！！！*/
   display: block;        /*显示为块级元素！！！*/
   height: 0;
   visibility: hidden;  
   clear: both;         /*清除浮动！！！*/
   }
   </style>

   p.s. 以上注释部分的代码为必须，一般情况下，通过3行代码 content: ""; display: block; clear: both; 便可实现。

   效果也正如上面的内墙法一样：

    
   需要注意的是，如果在IE6和IE7浏览器上使用，则需给clearfix添加一条属性以触发haslayout。

   <style>
   .box1:after{
   ...
   zoom: 1;
   }
   </style>

   这个方法所能体现的优点：1. 避免了多余标签的使用； 2. 可以兼容大部分浏览器。

5. 使用 overflow 属性

   通过给浮动元素添加 overflow 属性并设置为hidden或者auto即可清除浮动。

   <style>
   .box1{
       ...
       overflow: hidden;
   }
   </style>

   Or

   <style>
   .box1{
       ...
       overflow: auto;
   }
   </style>

   效果也如上面一样： 
   

   另外，在 IE6 中还需要触发 hasLayout ，需要为父元素设置容器宽高或添加zoom:1。

6. 给父元素设置display: table

   虽然也可以解决浮动问题，但缺点亦随之而来：盒模型属性已经改变，由此产生一系列烦人的问题，得不偿失，不推荐使用。

扩展 & 延伸

以上几种方法并没有按照比较严谨的技术规范进行分类。只是为了方便大家使用，根据方法的优越度和优先度来阐述，这样大可便于在不同的场合采用比较合适的方法去解决实际的问题。因此没有多做复杂的说明。

其实，所谓的清除浮动的方法可以分为两类：

1. 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2. 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。其中涉及的原理有：hasLayout 和 Block formatting contexts 。

详情请点击这里进行跳转查阅。

（2）

详解 清除浮动 的多种方式（clearfix）

说明

本文适合知道HTML 与 CSS基础知识的读者，或者想要了解清除浮动背后原理的读者！

1.什么是浮动

首先我们需要知道定位 
元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 
1、普通流定位 static（默认方式） 
普通流定位，又称为文档流定位，是页面元素的默认定位方式 
页面中的块级元素：按照从上到下的方式逐个排列 
页面中的行内元素：按照从左到右的方式逐个排列 
但是如何让多个块级元素在一行内显示? 
这里就引出了浮动定位 
2、浮动定位 float 
float属性 取值为 left/right 
这个属性原本不是用来布局的，而是用来做文字环绕的，但是后来人们发现做布局也不错，就一直这么用了，甚至有些时候都忘了用他做文字环绕 
3、相对定位 relative 
元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留 
语法 
属性：position 
取值：relative 
配合着 偏移属性(top/right/bottom/left)实现位置的改变

4、绝对定位 absolute 
如果元素被设置为绝对定位的话，将具备以下几个特征 
1、脱离文档流-不占据页面空间 
2、通过偏移属性固定元素位置 
3、相对于 最近的已定位的祖先元素实现位置固定 
4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定 
语法 
属性：position 
取值：absolute 
配合着 偏移属性(top/right/bottom/left)实现位置的固定

5、固定定位 fixed 
将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动 
语法 
属性：position 
取值：fixed 
配合着 偏移属性(top/right/bottom/left)实现位置的固定

2.浮动的效果

• 浮动 之后会怎么样？ 
  1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 
  2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 
  3、浮动元素依然位于父元素之内 
  4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 
  注意 
  1、一行内，显示不下所有的已浮动元素时，最后一个将换行 
  2、元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定) 
  3、元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大 
  块级元素：允许修改尺寸 
  行内元素：不允许修改尺寸 
  4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
• 浮动 之后会有什么样的影响？ 
  由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷）

3.如何清除浮动

解决方案 及 原理分析

方案1

直接设置父元素的高度 
优势：极其简单 
弊端：必须要知道父元素高度是多少

方案2

在父元素中，追加空子元素，并设置其clear属性为both 
clear是css中专用于清除浮动的属性 
作用：清除当前元素前面的元素浮动所带来的影响 
取值： 
1、none 
默认值，不做任何清除浮动的操作 
2、left 
清除前面元素左浮动带来的影响 
3、right 
清除前面元素右浮动带来的影响 
4、both 
清除前面元素所有浮动带来的影响 
优势：代码量少 容易掌握 简单易懂 
弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护

方案3

设置父元素浮动 
优势：简单，代码量少，没有结构和语义化问题 
弊端：对后续元素会有影响

方案4

为父元素设置overflow属性 
取值：hidden 或 auto 
优势：简单，代码量少 
弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏

方案5

父元素设置display:table 
优势：不影响结构与表现的分离，语义化正确，代码量少 
弊端：盒模型属性已经改变，会造成其他问题

方案6

使用内容生成的方式清除浮动

.clearfix:after {
   content:""; 
   display: block; 
   clear:both; 
}

:after 选择器向选定的元素之后插入内容 
content:""; 生成内容为空 
display: block; 生成的元素以块级元素显示, 
clear:both; 清除前面元素浮动带来的影响 
相对于空标签闭合浮动的方法 
优势：不破坏文档结构，没有副作用 
弊端：代码量多

方案7

.cf:before,.cf:after {
   content:"";
   display:table;
}
.cf:after { clear:both; }

优势：不破坏文档结构，没有副作用 
弊端： 代码量多 
注意：display:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的（后面会说到BFC）。

CSS2.1 表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

疑问

为什么会margin边距重叠？ 
overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？ 
为什么display:table也能清除浮动，原理是什么？

解释

要解释这些疑问，我们就要提到Formatting context 
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 
最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)。 
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC 
这里主要说BFC 
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 
block-level box，display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。 
inline-level box， display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context。

BFC布局规则： 
1、内部的Box会在垂直方向，按照从上到下的方式逐个排列。 
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 
4、BFC的区域不会与float box重叠。 
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 
6、计算BFC的高度时，浮动元素的高度也参与计算

触发BFC的条件 
1、根元素 
2、float 取值 none 以外的值 
3、overflow 除了visible 以外的值（hidden，auto，scroll ） 
4、display (table-cell，table-caption，inline-block，flex，inline-flex) 
5、position（absolute，fixed）

举例详解BFC

<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    margin:50px;
   }
   .bottom{
    width:100px;
    height:100px;
    background:blue;
    margin:20px;
   }
</style>
<body>
    <div>
        <div class="top">上</div>
    </div>

    <div class="bottom">下</div>
</body>

 
依据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 
注意：发生重叠后，外边距的高度等于两个发生重叠的外边距的高度中的较大者

从上面的例子可以看出，虽然红色 和 蓝色 的 div 都有设置 margin ，但是最后两个div 之间的距离并不是 50 + 20，而是取了较大者 50。

如何解决这个问题？ 
用开始提到的方案7 就可以了

<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    margin:50px;
   }
   .bottom{
    width:100px;
    height:100px;
    background:blue;
    margin:20px;
   }
   .cf:before,.cf:after {
     content:"";
     display:table;
    }
   .cf:after { clear:both; }
</style>

<body>
    <div class="cf">
        <div class="top">上</div>
    </div>

    <div class="bottom">下</div>
</body>

<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   .bottom{
    width:200px;
    height:200px;
    background:blue;
   }
</style>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

•  
  依据BFC布局规则第三条：

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

我们可以看到，虽然有浮动的元素top，但是bottom的左边依然与包含块的左边相接触。

<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   .bottom{
    width:200px;
    height:200px;
    background:blue;
    overflow:hidden;   
   }
</style>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

 
依据BFC布局规则第四条：

BFC的区域不会与float box重叠。

看代码和效果图，可以看出，这次的代码比上面的代码多了一行overflow:hidden;用这行代码触发新的BFC后，由于这个新的BFC不会与浮动的top重叠，所以bottom的位置改变了

<style>
   p{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   div{
    width:200px;
    border:1px solid blue;
   }
</style>
<body>
    <div>
       <p></p>
    </div>
</body>

• 

当蓝色 div 增加 overflow:hidden; 时 效果如下 
 
依据BFC布局规则第六条：

计算BFC的高度时，浮动元素的高度也参与计算。

到此我们应该是解决了上面的所有疑问了。

总结

清除浮动的方式有很多种，但是实现的原理主要是靠clear属性，和触发新的BFC，通过详细的解释与比较，最后两种内容生成的方式是比较推荐使用的，如果需要考虑margin重叠的问题，就用方案7，不考虑就用方案6，如果大家还有什么巧妙的方式，可以留言，分享一下！

11、

CSS之使用display:inline-block来布局

css之display:inline-block布局

1.解释一下display的几个常用的属性值，inline ， block， inline-block

• inline（行内元素）:
  1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
  2. 不能更改元素的height，width的值，大小由内容撑开. 
  3. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
• block（块级元素）:
  1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height，width的值. 
  3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
•  inline-block（融合行内于块级）:
  1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
  2. 用通俗的话讲，就是不独占一行的块级元素。如图:

图一:

图二：

两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。

 

2.inline-block布局 vs 浮动布局

    a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

    b.相同之处：能在某程度上达到一样的效果

　　我们先来看看这两种布局：
图一：display：inline-block

图二：对两个孩子使用float：left，我在上一篇浮动布局讲过，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：

>>乍一看两个都能做到几乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下面再讲）

　　c.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
图三： 

图四： 

>>从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。

 

3.inline-block存在的小问题：

　　a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

 

　　b.去除空隙的方法：
　　1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
　　现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的
图一：

 

　　c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
　　在ie6/7下：
　　对于行内元素直接使用{dislplay:inline-block;}
　　对于块级元素：需添加{display:inline;zoom:1;}

 

4.总结:

　　display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
　　a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
　　b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。

 

12、

vue项目中引入字体库（icon）（详细步骤）

 _littleTank_ 关注

 0.3 2018.01.05 16:46* 字数 486 阅读 20559评论 6喜欢 6

总体来说vue引入第三方字体库不算什么难度，如果出错，很多情况下是我们没有注意到一些情况，比如类名冲突等等，导致达不到所需的效果。我们这里以阿里的IconFont图标库来一步步引入。

1、添加所需的图标入库

1.png

2、图标库里的图标库添加到新项目,起名test（按自己需求改），然后点击确定

添加到新项目.png

3、在我们添加的项目test里，点击编辑项目

编辑项目.png

3、在编辑项目里设置自己字体名称，然后点击保存

如果不设置唯一，很容易跟其他字体库名称冲突，所以这里建议设置自己熟知的名称(便于区别)，我们这里加个了后缀-ali

字体名称.png

4、在我们的test项目里点击下载到本地

把字体项目下载到我们电脑，解压，把里面的问题复制到我们项目src/assets/icon文件夹下，如果没有此文件，自己创建（按自己需求创建起名）。这里我们把所有的文件都复制过来了，是因为为了以后方便别人活着自己查阅。

 

icon图标.png

5、打开icon字体文件下的iconfont.css，添加类名

[class^="icon-ali"], [class*=" icon-ali"] {
  font-family:"iconfont-ali" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

这里需要注意，第二个class前面有个空格！！！

6、在vue项目里运用

运用之前我们要先引入iconfont.css,最好在app.vue里我们全局引入这个文件，这样在其他页面就不需要r引入了。

<i class="icon-ali-shezi"></i>
<style>
  @import '~@/assets/icon/iconfont.css' //https://www.jianshu.com/p/901c7eaed40f
</style>

效果如下如：

 

设置图标.png

至于为什么 @import '~@/assets/icon/iconfont.css'能找到iconfont.css的地址，请参见：https://www.jianshu.com/p/901c7eaed40f这篇文章，很详细。

到此项目引入第三方图标库等于就完成了。

13、日期问题：

JS怎样把日期转时间戳 时间戳转时分秒

JS中在做倒计时这个功能的时候往往要把日期转换成时间戳以及把时间戳转换成时分秒。

今天小编我就来分享一下JavaScript日期转时间戳以及时间戳转为时分秒的经验哦。

工具/原料

• 电脑

• Hbuilder

方法/步骤

1. 1首先便是直接new Date获取当前以及一个指定的日期。

   然后用getTime即可把这两个日期转为时间戳了哦。

   

2. 2如图所示，打印之后可看到两个单位是毫秒的时间戳了哦。

   

3. 3然后用大的时间戳减去小的时间戳以便待会计算时分秒。

   

4. 4如图所示，这个结果便是两个日期直接的时间戳之差了哦。

   

5. 5然后用hms保存时分秒以及parseInt转成整数即可了。

   注意须要除以1000才可得到秒否则是毫秒单位哦。

   

6. 6最后即可把时间戳转换成为时分秒的格式了哦。

   

    

注意事项

• 有用可以收藏或分享。

• 不足之处请指教哦。

js时间戳转为日期格式

/** 
 * 时间戳转化为年 月 日 时 分 秒 
 * number: 传入时间戳 
 * format：返回格式，支持自定义，但参数必须与formateArr里保持一致 
*/  
function formatTime(number,format) {  
  
  var formateArr  = ['Y','M','D','h','m','s'];  
  var returnArr   = [];  
  
  var date = new Date(number * 1000);  
  returnArr.push(date.getFullYear());  
  returnArr.push(formatNumber(date.getMonth() + 1));  
  returnArr.push(formatNumber(date.getDate()));  
  
  returnArr.push(formatNumber(date.getHours()));  
  returnArr.push(formatNumber(date.getMinutes()));  
  returnArr.push(formatNumber(date.getSeconds()));  
  
  for (var i in returnArr)  
  {  
    format = format.replace(formateArr[i], returnArr[i]);  
  }  
  return format;  
} 

//数据转化  
function formatNumber(n) {  
  n = n.toString()  
  return n[1] ? n : '0' + n  
}  

调用示例：

var sjc = 1488481383;//时间戳
console.log(time.formatTime(sjc,'Y/M/D h:m:s'));//转换为日期：2017/03/03 03:03:03
console.log(time.formatTime(sjc, 'h:m'));//转换为日期：03:03

13、CSS样式表中Z-index属性的一些特征：

Z-index是什么意思？在CSS2.0中，Z-index 属性用来设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面（Z轴）。

1、CSS样式表中Z-index属性的一些特征：

• Z-index属性的默认值是0
• 元素可拥有负的 z-index 属性值，如z-index:-1
• Z-index属性无继承性
• Z-index属性JavaScript 使用语法：object.style.zIndex=”1″
• 几乎所有主流浏览器都支持 Z-index 属性

2、CSS样式表中Z-index属性的使用方法：
样式代码：.box
{position:absolute;
left:0px;
top:0px;
z-index:-1}

css样式表中z-index属性的使用

3、CSS样式表中Z-index属性使用的注意事项：
（1）Z-index仅对定位元素有效（如position:relative\absolute\float）；

（2）Z-index只可比较同级元素。这也许是大家很容易忽视的问题，我就卡在了这里。也就是说，Z-index只能对同级元素进行分层展示；

（3）Z-index的作用域：假设A和B两个元素都设置了定位（相对定位、绝对定位、一个相对一个绝对定位都可以），且是同级元素，样式为：.boxA{z-index:4}
.boxB{z-index:5}
于是，不难看出，元素B的层级要高于元素A，在此需要指出的是，A元素下面的子元素的层级也同样都低于B元素里的子元素，即使你将A元素里的子元素设为z-index:9999；同理元素B里的子元素，即使是设的z-index:1它照样比元素A的层级要高；

（4）这个属性不会作用于窗口控件，如select对象。

（5）在父元素的子元素中设置Z-index的值，可以改变子元素之间的层叠关系

（6）子元素的Z-index值不管是高于父元素还是低于父元素，

    只要他们的z-index值是大于等于0的数，他们都会显示在父元素之上，即压在父元素上。

    只要他们的值是小于0的数，则显示在父元素之下！

CSS3--关于z-index不生效问题

最近写CSS3和js结合，遇到了很多次z-index不生效的情况：

1.在用z-index的时候，该元素没有定位（static定位除外）

2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设置为负数

下拉框例子：

1.盖住的时候：

2.将下拉框的z-index设置为负数

代码：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 * {
  8     padding: 0;
  9     margin: 0;
 10     list-style: none;
 11 }
 12 .all {
 13     width: 330px;
 14     height: 120px;
 15     overflow: hidden;
 16     background: url(img/bg.jpg) no-repeat;
 17     margin: 100px auto;
 18     line-height: 30px;
 19     text-align: center;
 20     padding-left: 10px;
 21     margin-bottom: 0;
 22 }
 23 .all ul {
 24     position: relative;
 25     height: 30px;
 26     width: 100%;
 27 }
 28 .all ul li {
 29     width: 100px;
 30     height: 30px;
 31     background: url(img/libg.jpg);
 32     float: left;
 33     margin-right: 10px;
 34     position: relative;
 35     cursor: pointer;
 36 
 37 }
 38 .all ul ul {
 39     position: absolute;
 40     left: 0;
 41     top:-90px;
 42     /*display: none; 是一瞬间的事*/
 43     transition: all 1s;
 44     opacity: 0;
 45     /*后来的盒子会盖住前面的盒子，就算前面的盒子z-index再大也会被盖住，
 46     不过可以设置后来的盒子的z-index为负数就行了*/
 47     z-index:-1;
 48 
 49 }
 50 
 51 .all ul .lvTow {
 52     top:-90px;
 53     opacity: 0;
 54 }
 55 
 56 .all ul .show{
 57     top:30px;
 58     opacity: 1;
 59 }
 60 
 61 </style>
 62 </head>
 63 
 64 <body>
 65 <div class="all" id="list">
 66     <ul>
 67         <li>一级菜单
 68             <ul >
 69                 <li>二级菜单</li>
 70                 <li>二级菜单</li>
 71                 <li>二级菜单</li>
 72             </ul>
 73         </li>
 74         <li>一级菜单
 75             <ul >
 76                 <li>二级菜单</li>
 77                 <li>二级菜单</li>
 78                 <li>二级菜单</li>
 79             </ul>
 80         </li>
 81         <li>一级菜单
 82             <ul >
 83                 <li>二级菜单</li>
 84                 <li>二级菜单</li>
 85                 <li>二级菜单</li>
 86             </ul>
 87         </li>
 88     </ul>
 89 </div>
 90 </body>
 91 </html>
 92 <script>
 93     // 获取对象     遍历对象操作     显示模块   隐藏模块
 94 
 95     function List(id) {  //  获取对象
 96         this.id = document.getElementById(id);
 97         // 取 id 值
 98         this.lis = this.id.children[0].children;  // 获取一级菜单所有的li
 99     }
100     // init 初始化
101     List.prototype.init = function() {  // 遍历所有的li 显示和隐藏
102         var that  = this;
103         for(var i=0;i<this.lis.length;i++)
104         {
105             this.lis[i].index = i;
106             this.lis[i].onmouseover = function() {
107                 that.show(this.children[0]);  //  显示出来
108             }
109             this.lis[i].onmouseout = function() {
110                 that.hide(this.children[0]);  // 隐藏起来
111             }
112         }
113     }
114     //  显示模块
115     List.prototype.show = function(obj) {
116 //        obj.style.display = "block";
117         obj.className = "show";
118 
119     }
120     // 隐藏模块
121     List.prototype.hide = function(obj) {
122 //        obj.style.display = "none";
123         obj.className = "lvTow";
124     }
125     var list = new List("list");  // 实例化了一个对象 叫  list
126     list.init();
127 </script>

z-index不起作用的大坑

2017年08月01日 17:16:57 瞬间空白sky 阅读数 45173 标签： css 更多

个人分类： css

 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/apple_01150525/article/details/76546367

话说好久就没有更新博客了，今天为了装一把，差点没把自己装进去。。。以后还是低调一点好，哈哈，话不多说，直奔主题。

今天遇到的就是z-index不起作用的问题。一个后台小哥不知道抽什么疯，写元素覆盖偏不让用absolute，搞的我之后废了9牛二虎之力写了一下，问题描述是这样的，

 一对兄弟节点,insert和parent，parent有两个子节点subtop和subbottom，展现的结果是想让subtop在insert上面，subbottom在insert下面，

代码如下：

 

1. <!DOCTYPE html>

2. <html lang="en">

3. <head>

4. <meta charset="UTF-8">

5. <title>Document</title>

6. <style type="text/css">

7. .insert{

8. position: relative;

9. z-index:100;

10. background: green;

11. width:300px;

12. height:300px;

13. top:100px;

14. }

15. .parent{

16. /*position:relative;

17. z-index: 1000;*/

18. width:200px;

19. height:200px;

20. /*left:0;

21. top:-50px;*/

22. border:1px solid #eee;

23. }

24. .subbottom{

25. position:relative;

26. z-index: 50;

27. width:200px;

28. height:200px;

29. background: red;

30. top:-100px;

31. left:0;

32.  

33. }

34. .subtop{

35. position: relative;

36. z-index:1100;

37. width:100px;

38. height:100px;

39. left:0;

40. top:0;

41. background: blue;

42. }

43. </style>

44. </head>

45. <body>

46. <div class="insert"></div>

47. <div class="parent">

48. <div class="subtop"></div>

49. <div class="subbottom"></div>

50. </div>

51. </body>

52. </html>

其实原理也很简单，就是利用了z-index的覆盖问题，在写的过程中我发现无论怎么改变，insert的z-index总是无效的，于是百度了一下z-index无效的情况，一共有三种：

1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个：

1、position:relative改为position:absolute；

2、浮动元素添加position属性（如relative，absolute等）；

3、去除浮动。

所以，去掉parent的position和z-index，达到了我想要的效果，如下图所示：

css3的transform造成z-index无效, 附我的牛逼解法

申君健发表于前端侠2.0订阅

496

助力数字生态，云产品优惠大促

腾讯云促销，1核1G 99元/1年，2核4G 1200元/3年

立即抢购

我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。

只锁头效果很好，IE11下会小抖，但chrome下很稳定停在那里。后来又加上锁定列，发现列会盖住表头。

百度到这里《小心 CSS3 Transform 引起的 z-index "失效"》

“CSS3 Transform create new stacking context”

这个道理想想也明白，Transform 就是一个影子，假像，所以它不考虑z-index.那怎么解决呢？

再百度，以及去stackoverflow看文章，也没办法。既然不能控制“new stacking context"想想为什么列会盖住表头吧??

"不就是因为列元素在表头的底下嘛”

想到这里，很激动。

于是生成表时，这样写：

 tbody = $('<tbody>');
 me.prepend(tbody);

原来写的是append,现在改为prepend,这样保证table内的顺序是tbody,thead,tfoot.

测试各各浏览器，正常了！超牛逼。突然感觉到，原来人是有着无穷创造力及折腾力。

附：

这很长时间都在折腾锁表头，锁列的问题。我本人首先否定克隆表等方法，页面混乱，很多地方需要手工对齐，新元素在表之上，影响表头上的事件。于是我之后就是无穷的折腾了。

既然我必须要在一个table中实现，试了很多方法，写了很多css,js,无非就是让td,th浮起来，或是在里面加入元素后再浮起来，无论如何做， 结果就是速度慢了下来，锁定部分跳动。  也试过其它插件（克隆表头，然后fix在那里），可能是用法问题，多少有些问题。折腾得想放弃了。

昨天下午突然看到transform的方法，其实写表插件的开始，我也想过到这个，但一直没动手去做，因为一直没有搜到过有人这么用。或许是老天可怜我了，让我1分钟看了文章，半小时解决问题，高兴得想哭，我逝去的时间呀。。。。。

 

页面z-index的数值不生效的原因

2018年12月30日 18:08:34 Tony3820 阅读数 306

说在前面：从父原则

 

<div class="a">
    <div class="b"></div>
</div>
<div class="c"></div>

chorm22+中，当设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给b设置了position:fixed;属性后，会触发创建一个新的层叠上下文，它的父层叠上下文变成了a，所以b只能在a的内部进行层叠比较。这也就是大家熟听的“从父原则”。

其他浏览器在进行position:fixed;设置时，不会触发层叠上下问的重新创建，因此，整个页面只有root 和 
b两个层叠上下文，所有元素都在root层叠上下文进行比较。

so，请注意下面两点： 
1. z-index只有在设置了position为relative,absolute,fixed时才会有效。 
2. z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，当然别忘了先看看自身是否设置了position。

深入理解css中position属性及z-index属性

　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。

　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。

 

第一部分：position: static

　　static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。

　　如html代码如下：

1 2 3

<div class="wrap">     <div class="content"></div> </div>

　　css代码如下：

1 2	.wrap{width: 300px;height: 300px; background: red;} .content{position: static; top:100px; width: 100px;height: 100px; background: blue;}

　　效果图如下：

我们发现，虽然设置了static以及top，但是元素仍然出现在正常的流中。

　　

 

 

第二部分：fixed定位

　　fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。

　　html代码如下：

1	<div class="content">我是使用fix来定位的！！！所以我相对于浏览器窗口，一直不动。</div>

　　css代码如下：

1 2	body{height:1500px; background: green; font-size: 30px; color:white;} .content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}

　　效果图如下：

 

即右下角的div永远不会动，就像经常弹出来的广告！！！

 

值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支持。

 

 

第三部分：relative定位

　　相对定位元素的定位是相对它自己的正常位置的定位。

　　关键：如何理解其自身的坐标呢？

　　让我们看这样一个例子，hmtl如下：

1 2 3

<h2>这是位于正常位置的标题</h2> <h2 class="pos_bottom">这个标题相对于其正常位置向下移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

　　css代码如下：

1 2	.pos_bottom{position:relative; bottom:-20px;} .pos_right{position:relative;left:50px;}

　　效果图如下：

即bottom:-20px;；向下移动。  left:50px;向右移动。

 

即可以理解为：移动后是移动前的负的位置。

比如上例中，移动后是移动前负的bottom:-20px;即移动后是移动前bottom:20px;也就是说，移动后是移动前的向下20px；

又如：left:50px;移动后是移动前左边的-50px;那么也就是说移动后是移动前的右边的50px。

即：移动后对于移动前：如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。

 

　　弄清楚了relative是如何移动的，下面我们看一看移动之后是否会产生其他的影响。

      html代码如下：

1 2 3

<h2>这是一个没有定位的标题</h2> <h2 class="pos_top">这个标题是根据其正常位置向上移动</h2> <p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>

　　css代码如下：

1	h2.pos_top{position:relative;top:-35px;}

　　效果图如下：

 根据之前的说法，top:-35px；值是负数，则直接换成正数，即移动后相对与移动前向上偏移了35px；我们发现于上，移动后和上面的元素发生了重叠；于下，即使相对元素的内容移动了，但是预留空间的元素仍然保存在正常流动，也就是说相对移动之后，不会对下面的其他元素造成影响。

　　

注意：top：20px；是指子元素的margin外侧和包裹元素的border内侧之间的距离是20px。

 

　第四部分：absolute定位

　　绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

     下面举几个例子：

　　例子1：

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>绝对定位</title>     <style>                body{background:green;}         .parent{ width: 500px;height: 500px;background: #ccc;}         .son{ width: 300px;height: 300px;background: #aaa;}         span{position: absolute; right: 30px; background: #888;}     </style> </head> <body>     <div class="parent">         <div class="son">             <span>什么？</span>         </div>     </div> </body> </html>

　效果如下：

即我只在span中设置了position:absolute；而在其父元素中都没有，于是它的位置是相对于html的。

 

例2:

1	.son{position: relative; width: 100px;height: 100px;background: #aaa; }

　相较于上一个例子，我只修改了class为son的元素的css，设置为position：relative；效果图如下：

于是，我们发现现在span的位置是相对于设有position属性的class为son的父元素的。

 

例3：

1	.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}

　这个例子我只是修改了第一个例子中的css--设置了position:absolute；效果如下：

于是我们发现，现在span的定位是相对于具有position:absolute的属性的class为parent的父元素。

例4：

1	.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}

相对于例1，我添加了fixed的position属性，发现结果和例3是一模一样的。

 

例5：

1	.parent{position:static; width: 300px;height: 300px;background: #ccc;}

相对于例1，我添加了static的position属性（即html的默认属性），结果和例1是一样的。

 

综上所述，当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。

 

 

第五部分：重叠的元素--z-index属性

　　首先声明：z-index只能在position属性值为relative或absolute或fixed的元素上有效。

      基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

       下面我们通过几个例子继续来理解这个属性。

　　例1：

　　

   即son1和son2是parent的两个子元素，效果图如下：

这是没有使用z-index，我们发现son2在son1之上，这是因为son2在html中排在了son1之后，所以后来者将前者覆盖，如果我们颠倒以下两者的顺序，就会发现蓝色(son1)在上了。

 

例2：

在son1中加入z-index：1；可以发现效果如下：

也就是说son2的index值是小于1的。

如果我们给son2也加上z-index:1;呢？结果得到黄色(son2)就在上面了。（因为一旦z-index值相等，情况就和都不设置index值一样了）

 

例3：

在son2中加入z-index:5;可以发现效果如下：

即黄色(son2)又在上面了，这个很简单，不作过多讨论。

 

例4：

在父元素添加z-index:10;

在son1和son2添加z-index:5; 这样理论上父元素就会在上面（黄色覆盖蓝色和黄色）；

结果如下：

 

结果没有变!!!!!  这就说明父元素和子元素不能做z-index的比较！！！但真的是这样吗？看下一个例子：

 

例5：

把两个子元素的z-index值同时设置为-5；父元素不设置z-index属性。结果如下：

成功！！说明在父元素和子元素之间还是可以作比较的！！！只是需要我们把子元素的z-index值设为负数。

 

例6：

我们在例5的基础上再给父元素添加一个z-index:10，讲道理~应该也可以得到和例5相同的结果吧！！

然而.... 看来我们不能设置父元素的z-index值，否则就不能出现我们想要的效果。下面再看一个有趣的例子!

 

例7：

我们根据例6的经验不设置父元素的值，现在设置son1(蓝色)的z-index为5，son2的z-index为-5，看下面的结果：

即son1在最上面，父元素在中间，son2在最下面。

 

对于z-index的探索就这样结束了吗？？当然没有，看下面几个更为有趣的例子吧。

例8：

代码如下：

 

效果如下：

 

虽然parent1和parent2分别是son1和son2的父元素，按照我们之前的理解，父元素是不可添加z-index值的，否则会导致错误。但是这里parent1和parent2相对于body又是子元素，他俩是同级的，所以就可以进行比较了。且此时parent1的子元素son1（蓝色）在上。

例9：

 如果我们在例7的基础上，把parent2的z-index值设为20，就会发现如下效果：

 

即parent2在上的同时son2也会同时在上。这也就是所谓的“拼爹”了！！

 

例10.同样在例7的基础上，我们不设置parent1和parent2和son2的index值，而只设置son1的z-index值为10，效果如下:

即原本在下面的蓝色son1被提上来了，而没有把父元素（parent1）提上了，诶，不孝顺啊！！

 

例11.显然，在例10的基础上，如果我们把son2的index值设置的比son1的大，如20，那么son2就会覆盖son1了，并且都在两个父元素只上了！！

效果如下图：

 

例12.当然，如果我们把两个son的z-index都设置位负数如-5，那么两者就都会被父元素所覆盖：

 

 

第六部分：脱离文档流导致的问题

　　我们知道如果使用position:absolute和position:fixed都会导致元素脱离文档流，由此就会产生相应的问题。举例如下：

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

这时效果如下：

　　即子元素将父元素撑了起来。

　　但是一旦子元素的position为fixed或者是absolute，那么它就会脱离文档流，这样的后果是父元素无法被撑开，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
            position: relative;
        }
        .div2{
            position: absolute; // 添加position:absolute使其脱离文档流
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

　　最终效果如下所示：

 

解决方法1：在js中设置父元素高度等于子元素的高度。

解决方法2：给父元素强行设置高度。（对于宽度导致的类似问题就强行设置宽度）

 

第七部分：position: sticky;

　　这一部分内容是2017-3-13补充的， 之前没有了解到这个属性，几天才知道这个属性就是我经常使用js使用的方法，就是在一个内容中，我们可以固定一个部分，然后到了另一个内容，又会固定另外一个部分。

　　同样也可以设置top值， 这个值是border上边缘和包裹元素的下边缘之间的距离，但是一旦滚动起来，就是和浏览器顶部的距离了，话不多说，直接上demo，一看便懂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alink</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .wrap {
            border: 20px solid blue;
        }
        .header {
            position: sticky;
            top: 20px;
            border: 20px solid red;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            这是头部
        </div>
        <div class="content">
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
            这是内容部分<br>
        </div>
    </div>
    <div class="wrap">
        <div class="header">
            这是另一个头部
        </div>
        <div class="content">
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
            这是另一个内容<br>
        </div>
    </div>
</body>
</html>

第八部分：总结

　    这一部分知识还是非常有意思的，希望大家可以继续探索，当然如果通过这篇博文给予大家一点点的帮助那就再好不过了！

CSS中z-index属性是什么意思？

原创  2017-06-23 09:34:17 0966

概念

 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

层级关系的比较

1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。

2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。

3. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。

4. z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。

顺序规则

如果不对节点设定 position 属性，位于文档流后面的节点会遮盖前面的节点。

1 2	<div id="a">A</div> <div id="b">B</div>

定位规则

如果将 position 设为 static，位于文档流后面的节点依然会遮盖前面的节点浮动,，所以 position:static 不会影响节点的遮盖关系。

1 2	<div id="a" style="position:static;">A</div> <div id="b">B</div>

如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。

1 2	<div id="a" style="position:relative;">A</div> <div id="b">B</div>

在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.

1 2 3 4

<div id="a">     <div id="a-1" style="position:relative;">A-1</div> </div> <div id="b">B</div>

上面互相覆盖在什么时候用到这样的实现? 看起来偏门, 其实很常用, 比如说, 电子商务网站侧栏的类目展示列表就可以用这个技巧来实现.

下图是某网站的类目展示区域, 二级类目的悬浮层覆盖一级类目列表外框, 而一级类目的节点覆盖二级类目的悬浮层. 如果使用 CSS 实现展示效果, 一级类目的外框相当于上面例子中的 A, 一级类目的节点相当于 A-1, 二级类目的悬浮层相当于 B.

参与规则

我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

1 2 3

<div id="a" style="z-index:2;">A</div> <div id="b" style="z-index:1;">B</div> <div id="c" style="z-index:0;">C</div>

1 2 3

<div id="a" style="z-index:2;">A</div> <div id="b" style="position:relative;z-index:1;">B</div> <div id="c" style="position:relative;z-index:0;">C</div>

默认值规则

如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

1 2 3 4

<div id="a" style="position:relative;z-index:1;">A</div> <div id="b" style="position:relative;z-index:0;">B</div> <div id="c" style="position:relative;">C</div> <div id="d" style="position:relative;z-index:0;">D</div>

从父规则

如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

1 2 3 4 5 6 7

<div id="a" style="position:relative;z-index:1;">     <div id="a-1">A-1</div> </div>    <div id="b" style="position:relative;z-index:0;">     <div id="b-1">B-1</div> </div>

如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

以上就是CSS中z-index属性是什么意思？的详细内容，更多请关注php中文网其它相关文章！

如何解决div层调整z-index属性无效的方法

原创  2018-06-20 15:54:34 0555

这篇文章主要介绍了p层调整z-index属性无效原因分析及解决方法,需要的朋友可以参考下

 

z-index 无效

在做的过程中，发现了一个很简单却又很多人应该碰到的问题，设置Z-INDEX属性无效。在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。

1.第一种情况（z-index无论设置多高都不起作用情况）：

这种情况发生的条件有三个：

1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。

eg:z-index层级不起作用，浮动会让z-index失效，代码如下:

1 2 3

<p style="POSITION: relative; Z-INDEX: 9999">  <IMG style="FLOAT: left" src="/131101/1A5494I0-0.jpg">  </p>

解决办法有三个（任一即可）：

1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。

2.第二种情况

IE6下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级。

eg:IE7与IE6有着同样的bug，原因很简单，虽然图片所在p当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！，代码如下:

1 2 3 4 5

<p style="POSITION: relative"> <p style="POSITION: relative; Z-INDEX: 1000"> <p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p> </p> </p>

解决办法： 在第一个relative属性加上一个更高的层级（z-index:1），代码如下:

1 2 3 4 5

<p style="POSITION: relative; Z-INDEX: 1">  <p style="POSITION: relative; Z-INDEX: 1000">  <p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>  </p>  </p>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

14、

关于CSS3 rem(设置字体大小)的解析

原创  2018-06-20 15:37:36 0480

本篇文章主要介绍了详解CSS3 rem(设置字体大小) 教程，内容挺不错的，现在分享给大家，也给大家做个参考。

 

css3新增了相对单位 rem ,使用rem同em一样皆为相对字体大小单位，不同的是rem相对的是HTML根元素。鉴于很多网友提到了rem，所以我这里就对其中一个总结。

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。

在详细介绍rem之前，我们先一起来回顾一下我们常用的两种记量单位，也是备受争论的两个：

1. PX为单位

2. EM为单位

px为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

em为单位

前面也说了，使用是“px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决这个问题，我们可以使用“em”单位。

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

 

1 2 3 4 5 6 7 8 9 10 11 12

body {     font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } h1 {     font-size: 2.4em; /*2.4em × 10 = 24px */ } p   {     font-size: 1.4em; /*1.4em × 10 = 14px */ } li {     font-size: 1.4em; /*1.4 × ? = 14px ? */ }

 

为什么“li”的“1.4em”是不是“14px”将是一个问号呢？如果你了解过“em”后，你会觉得这个问题是多问的。前面也简单的介绍过一回，在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值，其真正的计算公式是：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

这样的情况下“1.4em”可以是“14px”,也可以是“20px”，或者说是“24px”，总之是一个不确定值，那么解决这样的问题，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。

rem为单位

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：

下面再来看一个简单的实例：

 

1 2 3

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

 

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法，你们就把他们当透明了吧，我向来都是如此。

不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

关于CSS background的使用方法

原创  2018-06-20 15:23:01 0158

下面为大家带来一篇CSS background全部汇总。内容挺不错的，现在就分享给大家，也给大家做个参考。

 

所有背景属性都不能继承。

1. background-color

所有元素都能设置背景颜色。

background-color的默认值是transparent；也就是说，如果一个元素没有指定背景颜色，那么背景就是透明的，这样其祖先元素的背景才能可见。

2. background-image

所有元素都能设置背景图像；

背景图像可以设置多个，中间用逗号隔开；背景图像会层叠，写在前面的层次在上面。

3. background-repeat

repeat（默认）/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll（默认）/fixed

5. background-position

像素法：以图像左上角为起点，第一个值为水平移动的距离，第二个值为垂直移动的距离；若只规定一个值，第二个值默认为50%。

百分比法：百分比同时应用于图像和元素，相应的点重合进行定位。如果只指定一个百分数，意味着垂直方向为50%。

关键字法：top、right、bottom、left、center进行组合定位；若只规定一个值，第二个值默认为center。

注意：background-position可以为负值。

在默认情况下，背景颜色延伸到边框下面，背景图像在padding区域的左上角。

6. background-size

设置背景图像的尺寸；默认值为auto。

像素法：第一个值设置宽度，第二个值设置高度；若只有一个值，第二个值为auto。

百分比法：以父元素的宽度和高度以基准来计算。

关键字cover，不改变图像宽高比例，在水平和垂直方向都铺满整个元素，有可能导致一部分图像溢出。

关键字contain，不改变图像宽高比例，尽可能拉伸，直到某一方向铺满整个元素，有可能导致另一方向没有铺满。

7. background-origin

定义背景图像的初始位置

border-box，边框左上角。

padding-box，padding区域左上角；默认值。

content-box，内容区左上角。

8. background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

•border-box - (default) the background is painted to the outside edge of the border

•padding-box - the background is painted to the outside edge of the padding

•content-box - the background is painted within the content box

（英文的解释得比较清楚）

（英文都是从W3Schools Online搬运）

关于background-origin和background-clip，它们是相互独立的，互不干扰。

关于background的CSS写法，个人认为应该逻辑明确、层次分明；具体而言：

background定义背景图像，background-color定义背景颜色，background-clip定义背景显示区域。

（个人见解，仅供参考）

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

• Fill the entire page with the image (no white space)

• Scale image as needed

• Center image on page

• Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

1 2 3 4

html {        background: url(img_flower.jpg) no-repeat center fixed;         background-size: cover;    }

小tips：

利用背景图像的水平平铺，实现波浪式的边框效果。

（目前只有想法，还没找到符合需求的图像。）

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

运用css3动画需要运用什么规则

原创  2019-06-04 18:02:56 0740

CSS3 @keyframes 规则

 

标签定义及使用说明

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。（推荐学习：CSS3视频教程。）

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.

语法

1	@keyframes animationname {keyframes-selector {css-styles;}}

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 注意： 您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

实例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3</title>     <style>         div         {         width:100px;         height:100px;         background:blue;         position:relative;         animation:mymove 5s infinite;         -webkit-animation:mymove 5s infinite; /* Safari and Chrome */         }                   @keyframes mymove         {         0%   {top:0px; background:blue; width:100px;}         100% {top:200px; background:yellow; width:300px;}         }                   @-webkit-keyframes mymove /* Safari and Chrome */         {         0%   {top:0px; background:blue; width:100px;}         100% {top:200px; background:yellow; width:300px;}         }     </style> </head> <body>   <p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>   <div></div>   </body> </html>

以上就是运用css3动画需要运用什么规则的详细内容，更多请关注php中文网其它相关文章！

css punctuation-trim属性怎么用

原创  2019-05-30 10:50:46 0594

css punctuation-trim属性规定如果标点位于行开头或结尾处，或者临近另一个全角标点符号，是否对标点符号进行修剪。

 

css punctuation-trim属性怎么用？

作用：punctuation-trim 属性规定如果标点位于行开头或结尾处，或者临近另一个全角标点符号，是否对标点符号进行修剪。

语法：

punctuation-trim: none|start|end|allow-end|adjacent

说明：

none 不修剪开启或闭合标点符号。

start 修剪每行结尾的开启标点符号。

end 修剪每行结尾的闭合标点符号。

allow-end

adjacent

注释：

目前主流浏览器都不支持 punctuation-trim 属性。

css punctuation-trim属性使用示例

p{
punctuation-trim:start;
}

以上就是css punctuation-trim属性怎么用的详细内容，更多请关注php中文网其它相关文章！

 15、

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 

 

这个选项包含剪切，显示滚动条，或者显示 从容器溢出到周围区域的内容。

指定除visible(默认值)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。

 

为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

注意:  设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto。 注意:

注意: 即使将overflow设置为hidden，也可以使用JavaScript Element.scrollTop 属性来滚动HTML元素。

语法节

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

 从下面列表中选出一个或两个关键字来指定overflow 属性。如果指定了两个关键字，第一个关键字应用于overflow-y，第二个关键字应用于overflow-x。否则，overflow-x和overflow-y都设置为相同的值。

注意: 在Firefox 63之前，这些值是反向的，第一个值应用于overflow-x，第二个值应用于overflow-y。Firefox 63更新了这个顺序，以匹配对规范的更改。此更改是为了匹配使用新逻辑属性overflow-block和overflow-inline时的顺序。

overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: scroll hidden;
/* But on Firefox 63 and later, it will be */
overflow: hidden scroll;

值节

visible

默认值。内容不会被修剪，可以呈现在元素框之外。

hidden

如果需要，内容将被剪裁以适合填充框。 不提供滚动条。

scroll

如果需要，内容将被剪裁以适合填充框。 浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。

auto

取决于用户代理。 如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。

overlay  

行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。

Mozilla 扩展

-moz-scrollbars-none [1]

使用 overflow:hidden 代替.

-moz-scrollbars-horizontal [1]

推荐使用 overflow-x 和 overflow-y .

-moz-scrollbars-vertical [1]

推荐使用 overflow-x 和 overflow-y .

-moz-hidden-unscrollable 

主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及<HTML>和<body>元素。

[1] As of Firefox 63, this feature is behind a feature preference setting. In about:config, set layout.css.overflow.moz-scrollbars.enabled to true

形式语法节

[ visible | hidden | clip | scroll | auto ]{1,2}

示例节

p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* 内容不会被修剪 */ 
}

 

 

 

 

 

 

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* 不显示滚动条 */  }

 

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

  p { overflow: scroll; /* 始终显示滚动条 */  }

 

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* 必要时显示滚动条 */  }

 

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

 

 

16、justify-content属性及问题

flex justify-content：space-around justify-content：space-between 布局区别（地址：https://www.cnblogs.com/yuanyuan-1994/p/8665618.html）

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

---

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性
Basic support (single-line flexbox)	29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	6.1 -webkit-	12.1 -webkit-
Multi-line flexbox	29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -webkit- 12.1

---

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

实例

<!DOCTYPE html> <html> <head> <style>

.flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; }

</style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>

尝试一下 »

当然我们可以修改排列方式。

如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:

实例

body { direction: rtl; } .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; }

尝试一下 »

 

---

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

以下实例演示了 row-reverse 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 column 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

 

以下实例演示了 column-reverse 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

---

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

• flex-start：

  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

• flex-end：

  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

• center：

  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

• space-between：

  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

• space-around：

  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

效果图展示：

以下实例演示了 flex-end 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 center 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 space-between 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 space-around 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

---

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

以下实例演示了 stretch(默认值) 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 flex-start 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 flex-end 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 center 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 baseline 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; width: 400px; height: 250px; background-color: lightgrey; }

尝试一下 »

---

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析:

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
• wrap-reverse -反转 wrap 排列。

以下实例演示了 nowrap 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 300px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 wrap 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 300px; height: 250px; background-color: lightgrey; }

尝试一下 »

以下实例演示了 wrap-reverse 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; width: 300px; height: 250px; background-color: lightgrey; }

尝试一下 »

---

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

• stretch - 默认。各行将会伸展以占用剩余的空间。
• flex-start - 各行向弹性盒容器的起始位置堆叠。
• flex-end - 各行向弹性盒容器的结束位置堆叠。
• center -各行向弹性盒容器的中间位置堆叠。
• space-between -各行在弹性盒容器中平均分布。
• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

以下实例演示了 center 的使用:

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 300px; height: 300px; background-color: lightgrey; }

尝试一下 »

---

弹性子元素属性

排序

语法

order: 

各个值解析:

• <integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

order 属性设置弹性容器内弹性子元素的属性:

实例

.flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } .first { -webkit-order: -1; order: -1; }

尝试一下 »

对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

以下实例在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧：

实例

.flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: 10px; } .flex-item:first-child { margin-right: auto; }

尝试一下 »

完美的居中

以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

实例

.flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: auto; }

尝试一下 »

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

各个值解析:

• auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

以下实例演示了弹性子元素上 align-self 不同值的应用效果：

实例

.flex-item { background-color: cornflowerblue; width: 60px; min-height: 100px; margin: 10px; } .item1 { -webkit-align-self: flex-start; align-self: flex-start; } .item2 { -webkit-align-self: flex-end; align-self: flex-end; } .item3 { -webkit-align-self: center; align-self: center; } .item4 { -webkit-align-self: baseline; align-self: baseline; } .item5 { -webkit-align-self: stretch; align-self: stretch; }

尝试一下 »

flex

flex 属性用于指定弹性子元素如何分配空间。

语法

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各个值解析:

• auto: 计算值为 1 1 auto
• initial: 计算值为 0 1 auto
• none：计算值为 0 0 auto
• inherit：从父元素继承
• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。

以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:

实例

.flex-item { background-color: cornflowerblue; margin: 10px; } .item1 { -webkit-flex: 2; flex: 2; } .item2 { -webkit-flex: 1; flex: 1; } .item3 { -webkit-flex: 1; flex: 1; }

更多实例

使用弹性盒子创建响应式页面

---

CSS3 弹性盒子属性

下表列出了在弹性盒子中常用到的属性:

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

 

flex布局中 justify-content: space-between方法的排版问题

 翻滚的前端程序员 关注

 0.2 2017.04.21 17:36* 字数 82 阅读 8359评论 13喜欢 8

flex给我们的布局带来了很大的方便 ，但有时候也会碰到一些问题，比如space-between最后一行元素的排列问题

问题：假如我们有8个元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<style>
  ul {
    width: 300px;
    height: 400px;
    background: #f0f0f0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
  }
  ul li {
    width: 90px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: pink;
    border-radius: 10px;
  }
  </style>

效果图：

Bug图

最后一行的布局问题出现了，由于space-between就是两端布局，当最后一行不满三个的时候，就会出现这样的情况

 

解决方案：使用after伪元素来解决该布局bug

ul:after{
    content: '';
    width: 90px;
 }

效果图：

正确图

15、CSS之pointer-events属性

 FoolishFlyFox 关注

 0.1 2017.07.11 14:06* 字数 1433 阅读 4340评论 0喜欢 3

pointer-events 可选的属性值

• auto
• none
• visiblepainted
• visiblefill
• visiblestroke
• visible
• painted
• fill
• stroke
• all

其中，对于非 <svg> 元素，只有属性 auto 和 none 有效；

为非 svg 元素指定属性值

情况1：两个父子元素重叠

有如下代码：

<style type="text/css">
    #div_grandfather{
        height : 250px;
        background: orange;
        width:300px;
        border:1px solid;
    }
    #div_parent{
        height:70%;
        background-color:#bbb;
        margin:30px;
        border: 1px solid;
        /*设置元素的 pointer-event属性*/
        pointer-events: auto;
    }
    #div_child{
        height:70%;
        background-color:deepskyblue;
        margin:30px;
    }
</style>
<body>
    <div id="div_grandfather" onclick="alert('grandfather')">
        <div id="div_parent" onclick="alert('parent')">
            <div id="div_child" onclick="alert('child')">
            </div>
        </div>
    </div>
</body>

其显示为：

父子多元素重叠

此时，若 #div_parent 的css属性ponter-events 设为 auto ，则点击蓝色区域后，浏览器会3次弹出对话框，第一次内容为 child ，第二次内容为 parent ，第三次内容为 grandfather；

若 #div_parent 的css属性 pointer-events 设为 none ，则点击蓝色区域后，浏览器只会弹出对话框一次，内容为 grandfather ；

总结：

1. 元素默认的 pointer-events 属性为 auto ，鼠标(其实不一定是鼠标，也可以是手或触摸笔对屏幕的动作) 在该元素的一个动作能够被该元素捕获，进行相应代码的执行后，会将该事件转交给父元素执行相应动作；
2. 将元素的 pinter-events 属性设置为 none，鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获；

情况2：两个同级元素的重叠

<style type="text/css">
    #div1{
        position: absolute;
        height:250px;
        width:250px;
        background-color:#bbb;
        top:20px;
        left:20px;
    }
    #div2{
        position: absolute;
        height: 150px;
        width: 150px;
        background-color:deepskyblue;
        top:40px;
        left:40px;
        pointer-events: auto;
    }
</style>
<body>
    <div id="div1" onclick="alert('div1')"></div>
    <div id="div2" onclick="alert('div2')"></div>
</body>

其显示为：

同级元素的重叠

当 #div2 的 pointer-events 属性为 "auto" 时，当点击蓝色区域后，浏览器只弹出对话框一次，内容为：div2；当 #div2 的 pointer-events 属性为 none 时，点击蓝色区域后，浏览器只弹出对话框一次，内容为 div1 ；

总结：

1. 若HTML上两个元素之间没有包含关系，那么，鼠标事件就不会在这两个元素之间传递，而是上层的元素会覆盖下层的元素，导致下层元素捕获不到事件；将上层元素的 pointer-events 属性设置为 none ，则上层元素将不捕获事件，那么事件将被下层元素捕获到；
2. 若HTML上两个元素间有包含关系，那么，子元素获得鼠标事件后，会传递给父元素；

可见，事件的传递并不是依赖于元素在显示上的上下层关系，而是依赖于DOM树结构；

为SVG 元素指定属性值

剩余的8个属性值都是为SVG元素而准备的；

首先，我们需要知道，一个图形有两部分组成，一部分是轮廓线，另一部分是填充；轮廓线通过 stroke 完成，填充通过 fill 完成；

visiblePainted

该属性值等价于 auto ； 当 svg 中的某个元素可见，并且当其 fill 不是 none 时，点击填充部分，该事件能够被捕捉到，当其 stroke 不是 none 时，点击轮廓部分，该事件能够被捕捉到；

<svg style="pointer-events:visiblePointed;">
   <circle cx="30" cy="30" r="20" stroke="black" stroke-width="10"
      fill="red"  onclick="alert('circle')" />
</svg> 

html 的 svg显示为：

 

pic-1

点击之后(无论点击的是黑色轮廓还是红色填充)，会弹出一个对话框，内容为 circle ；

 

当将 circle 中 fill 的属性变为 none ，显示变为：

pic-2

 

此时，没有填充，点击黑色轮廓能够弹出对话框，而点击中间的白色部分将不能弹出对话框；

visibleFill

将svg的 pointer-events 属性设置为visibleFill后：

<svg style="pointer-events:visiblePointed;">
   <circle cx="30" cy="30" r="20" stroke="black" stroke-width="10"
      fill="none"  onclick="alert('circle')" />
</svg> 

显示与 pic-2 一样；此时，无论 fill 的值是不是 none，点击填充后，都能弹出对话框，而点击轮廓一定不能弹出对话框；

下面几个属性都这样说明下去未免太过罗嗦，下面是总结的一个表，对8种属性的统一说明：

|属性名|fill||stroke||visibility||
|-|-|-|
|属性值|none|非none|none|非none|hidden|visible|
|visiblePainted|×|√|×|√|×|-|
|visibleFill|√|√|×|×|×|-|
|visibleStroke|×|×|√|√|×|-|
|visible|√|√|√|√|×|-|
|painted|×|√|×|√|-|-|
|fill|√|√|×|×|-|-|
|stroke|×|×|√|√|-|-|
|all|√|√|√|√|-|-|
|none|×|×|×|×|×|×|

解释：

• "√" 表示点击相应的部分(填充或轮廓)能够被对应的 svg元素所捕捉到； "×" 表示不能被对应的svg元素捕捉到；"-" 表示没影响；

• 第一列表示 svg 元素的 pointer-events 属性的取值；

• 第二列表示当 fill为 none 时，点击填充能否被捕捉到；

• 第三列表示当 fill不为 none 时，点击填充能否被捕捉到；

• 第四列表示当 stroke 为 none 时，点击轮廓能否被捕捉到；

• 第五列表示当 stroke 不为 none 时，点击轮廓能否被捕捉到；

• 以上4中情况，visibility 都为默认值，即 visible；

• 第六列表示当设置 visiblility 为 hidden 时，点击元素是否能被捕捉到，如果为 ×，表示无论点击轮廓或填充，都不能捕捉到，如果为 - 表示行为和前4种情况一样，visibility 不产生影响；注意：因为元素隐藏，不能看到元素，所以所说的点击填充只是其对应的位置而已；

• 第七列表示 visibilibty 为 visible 时的情况；可以看到，在 pointer-events 为 none 时，无论怎么设置，元素都不能捕获事件，可以理解为 svg 是所有 svg中元素的父元素，父元素不能捕获事件，子元素必然不能捕获；

 17、

div设置overflow-y:scroll后， 如何监听滚动到底部的事件

by admin 2018-05-28 分类:JavaScript

大多数情况下，我们都是判断页面滚动到底部，如下：

window.addEventListener('scroll', this.handleScroll);
// 处理滚动到底部的事件
handleScroll(arg) {
    var clientHeight  = document.documentElement.clientHeight;  // 客户区大小
    var scrollHeight  = document.documentElement.scrollHeight;  // 没用滚动条的情况下，元素内容的总高度
    var scrollTop     = document.documentElement.scrollTop;     // 被隐藏在内容区域上方的像素数
    if(scrollTop + clientHeight == scrollHeight && this.loading!=true && this.nomore==false){
    console.log("到底了...");
    this.getComments();
    return;
    }
    console.log("没到底： ", clientHeight, scrollHeight, scrollTop);
}

在移动端，有时候会有这样的需求，需要一个弹出层，高度和宽度都是100%，然后设置overflow-y:scroll。 

document.querySelector(".item").addEventListener('scroll', this.handleScroll2);
handleScroll2(arg) {
    var clientHeight  = document.documentElement.clientHeight;         // 客户区大小
    var scrollHeight  = document.querySelector(".item").scrollHeight;  // 没用滚动条的情况下，元素内容的总高度
    var scrollTop     = document.querySelector(".item").scrollTop;     // 被隐藏在内容区域上方的像素数
    console.log("1:： ", clientHeight, scrollHeight, scrollTop);

    if(scrollTop + clientHeight == scrollHeight && this.loading!=true && this.nomore==false){
    console.log("到底了...");
    // this.getComments();
    return;
    }
    console.log("没到底： ", );
}

深入理解CSS溢出overflow

 

前面的话

　　当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况

 

定义

overflow溢出

　　值: visible | hidden | scroll | auto | inherit

　　初始值: visible

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

　　[注意]除了IE7-浏览器外，其他浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

 

overflow-X | overflow-y

　　overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性，后来被CSS3采用，并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切

　　[注意]如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同，且其中一个值显式设置为visible或未设置默认为visible，而另外一个值是非visible的值。则visible值会被重置为auto

　　值: visible | hidden | scroll | auto | inherit | no-display | no-content

　　初始值: visible

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

 

 

属性

visible

　　元素的内容在元素框之外也可见

　　[注意1]IE6-浏览器中元素的包含块会延伸，使得可以包裹其超出的内容

.box{
    height: 200px;
    width: 200px;
    background-color: lightgreen;
}
.in{
    width: 300px;
    height: 100px;
    background-color: lightblue;
}

<div class="box">
    <div class="in"></div>
</div>

　　左图为IE6-浏览器，右图为其他浏览器

　　[注意2]IE7-浏览器的按钮(包括<button>和<input type="button">两种)存在bug，当按钮上的文字越多时，按钮两侧的padding就越大。通过设置overflow:visible就可解决该问题

　　左图为默认情况，右图为设置overflow后的情况

auto

　　如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容

　　[注意]对于一般浏览器来说，<html>和<textarea>默认带有overflow:auto的属性。但IE7-浏览器则不同，默认存在纵向滚动条

//IE7-浏览器 
html{overflow-y: scroll;}
//其他浏览器
html{overflow: auto;}
//去除页面默认滚动条
html{overflow: hidden;}

scroll

　　元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容

　　[注意]firefox和IE8+浏览器在overflow:scroll或auto时，存在padding-bottom缺失现象

.box{
    width: 100px;
    height: 100px;
    padding: 50px;
    background-color: pink;
    overflow:scroll;
}
.in{
    width: 100px;
    height: 200px;
    background-color: lightgreen;
}

<div class="box">
    <div class="in"></div>
</div>

　　左图为chrome浏览器的情况，右图为firefox浏览器的情况

hidden

　　元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见

no-display

　　当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样

no-content

　　当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样

　　[注意]no-display和no-content这两个属性目前没有浏览器支持

 

失效

　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候

　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁 

 

【解决办法】

【1】overflow元素自身为包含块

　　给父级设置position:absolute或fixed或relative

 

【2】overflow元素的子元素为包含块

　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative

<div style="overflow:hidden;">
    <div style="position:relative">
        <div style="position:absolute">绝对定位元素</div>    
    </div>    
</div>

 

应用

　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。关于BFC的详细信息移步至此

【1】清除浮动影响

 

　　[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是

.clear{
    *zoom: 1;
}
.clear:after{
    content: '';
    display: block;
    clear: both;
}

 

【2】避免margin穿透

 

　　[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等 

 

【3】两栏自适应布局

 

　　[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:

.cell{
    display: table-cell; width: 2000px;
    *display: inline-block; *width:auto;
}

 

【4】选项卡

　　overflow选项卡主要用于单页应用

<div class="box">
    <ul class="show">
        <li class="show-in" id="one">1</li>
        <li class="show-in" id="two">2</li>
        <li class="show-in" id="three">3</li>
        <li class="show-in" id="four">4</li>
    </ul>
    <nav class="con">
        <a class="con-in" href="#one">1</a>
        <a class="con-in" href="#two">2</a>
        <a class="con-in" href="#three">3</a>
        <a class="con-in" href="#four">4</a>
    </nav>    
</div>    

body{
    margin: 0;
    text-align: center;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
.show{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
    line-height: 100px;
    font-size: 40px;
}    
.show-in{
    width: 100px;
    height: 100px;
}
#one{
    background-color: lightgreen;
}
#two{
    background-color: lightyellow;
}
#three{
    background-color: lightblue;
}
#four{
    background-color: pink;
}
.con{
    margin: 10px 0 0 10px;
    width: 100px;
}
.con-in{
    display:inline-block;
    width: 16px;
    line-height: 16px;
    border: 1px solid black;
    background-color: gray;
}

 

 18、overflow属性及问题

overflow-x:hidden对其内position:absolute的影响

2018年08月02日 17:49:25 沈江平 阅读数 959

在写一个Header组件的时候，添加了其中一行样式：

1. .header{

2. overflow-x:hidden;

3. ...

4. }

随后添加一个下拉列表，很自然地添加了：

1. .downlist{

2. position:absolute;

3. top:100%;

4. left:0px;

5. ...

6. }

然后发现，原本应该显示在.header以外的.downlist，却显示在.header内，并成了overflow-y:scroll;的效果，demo如下。

实验了下,

以div元素F为容器，其子元素C设置position:absolute，结论：

1.将overflow-x:hidden;去掉后，position:absolute可以正常使用。

2.给F添加overflow-x:hidden;后，如果需要将其子元素C通过position:absolute设置位置，left | top | right |bottom 依然可以使用，且依旧可以设置其位置。但是设定子元素的位置后，如果子元素的一部分超出F，或子元素整个在F外，则会从内部把F撑开。也就是说，F的外部边界（高宽）不变，但是内部自动添加overflow-y：scroll效果。

3.此时如果显示给子元素C添加overflow-y:auto || scroll || visible，相当于overflow-y:scroll 的效果。 如果添加的是overflow:hidden；则元素F不再滚动，元素C的超出F的部分也不会显示。

*overflow-x:hidden;只是影响了元素的BFC，这个情况与flex布局无关。

overflow:hidden同样会隐藏position:absolute的子元素

2013年10月24日 17:40:16 边城的刀声 阅读数 11721

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>父元素中有overflow:hidden, 子元素absolute不能显示</title>

5. <style>

6. .parent{

7. height:40px;

8. width:200px;

9. border:solid 1px black;

10. position:relative;

11. }

12. .sub{

13. position:absolute;

14. top:10px;

15. left:10px;

16. height:100px;

17. width:100px;

18. background-color:red

19. }

20.  

21. .overHidden{

22. overflow:hidden; /* 同样会隐藏position:absolute的子元素 */

23. }

24. </style>

25. </head>

26. <body>

27. 这个是有overflow:hidden

28. <div class="parent overHidden">

29. <div class="sub"></div>

30. </div>

31. 这个没有

32. <div class="parent">

33. <div class="sub"></div>

34. </div>

35. </body>

36. </html>

效果如下：

这种情况通常会出现在我们在做一些具有弹出或下拉的控件时，所以还是把弹出层直接放到body中比较可靠。

关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）

2018年10月23日 15:13:56 星星之火M 阅读数 5366

 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41638795/article/details/83304388

一. overflow:hidden  溢出隐藏

给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

1. /*css样式*/

2. <style type="text/css">

3. div{ width: 150px; height: 60px; background: skyblue;

4. overflow: hidden; /*溢出隐藏*/

5. }

6. </style>

7.  

8. /*html*/

9. <div style="">

10. 今天天气很好！<br>今天天气很好！<br>

11. 今天天气很好！<br>今天天气很好！<br>

12. </div>

效果如下：

一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。

1. /*只适用于单行文本*/

2. div{

3. width: 150px;

4. background: skyblue;

5. overflow: hidden; /*溢出隐藏*/

6. white-space: nowrap; /*规定文本不进行换行*/

7. text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/

8. }

效果如下：

二. overflow:hidden  清除浮动

一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。那么问题来了，如下：

如上，由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。如下：

由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;

所以为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;

三. overflow:hidden  解决外边距塌陷

父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，如下：

因此，给父级元素添加overflow:hidden，就可以解决这个问题了。

深入理解：overflow:hidden——溢出,坍塌,清除浮动

2017年05月23日 10:06:38 NINE-NINE 阅读数 1169

基本演示代码： 
HTML代码：

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

• 1
• 2
• 3
• 4

CSS代码：

*{ margin: 0; padding: 0; }
.box{ background: #333; }
.box1{ background: orange; width: 100px; height: 100px; }
.box2{ background: green; width: 100px; height: 100px; }

• 1
• 2
• 3
• 4

效果： 

1.使用overflow：hidden隐藏溢出 
当父div拥有固定的高度时，比如height:150px,我们使用overflow:hidden来隐藏溢出。 
当使用div+css布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div，默认情况下，父div的高度是auto——它可以被子div任意的撑大。然而父div也可以有固定的高度(或宽度)，比如height:150px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出。我们可以通过设置父div的CSS属性——overflow来对子div进行控制。这里使用overflow:hidden来隐藏子元素溢出的部分。 
2.使用overflow：hidden清除浮动 
当父元素的高height:auto时，我们使用overflow：hidden清除浮动 
当我们为div1和div2加上一个属性：float:left后，我们会发现：背景色为黑色父div消失了，这是因为： 浮动的元素脱离文档元素， 不占据空间。 不浮动的元素会直接无视掉这个元素：父div无视了自己的两个孩子，其高度为0（因为我们没有设置父div的高度），所以父div没有显现。 
想让父div“宽容的”接受自己的两个孩子有两个办法： 
（1）第一个就是让父亲也浮动起来，我们试着给父div添加一个CSS属性：float:right,会发现两个颜色块出现在了屏幕的右边，依然没有父div的身影，然而通过开发人员工具不难看出父div已经包容子div ；这是因为浮动的div已经失去了其“独霸一行”的能力，我们需要手动为父div设置一个宽度，比如width:500px，之后可以看到： 
 
（2）第二种就是为父亲添加overflow:hidden属性用以清除浮动； 

清除浮动可以用 overflow:hidden 或 overflow:auto ，在比较标准的浏览器里没有问题，但 IE6 没有效果，为了兼容 IE6 ，可以为父元素： 
1、设置一个合适的宽度，但“合适的宽度”有的时候不好掌握； 
2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点； 
3、加上 zoom:1 ，不能通过W3C验证。 
3.解除坍塌 
可以使用overflow:hidden解除margin坍塌，当然了，坍塌是不分父div的高度是否固定的 ； 
首先要知道什么叫做坍塌： 
我们为box1添加一个属性：margin-top:50px,我们想象中效果是这样的： 

但实际上是这样的（这是开发人员工具下的效果）: 

上端距离浏览器的顶部有50px而不是对它的父div，更可怕的是它甚至向下顶了它的父div，这就是坍塌。这里多说一句：这种坍塌只针对于父亲的第一个儿子，div2设置margin-top：50px则不会有任何不妥。 
（1）我们可以为父div添加overflow:hidden解决这个问题; 
（2）这里为了排除overflow:hidden对未定高度的父div的影响，我们为父div设置一个高度；我们为所有子div添加一个浮动属性（比如float:left），显而易见，只要是浮动的子div就会完全避免坍塌的问题（PS：无论父div是否浮动）； 
总结 
overflow:hidden的用法在溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。

 

如何解决overflow:hidden失效的问题

2018年05月18日 17:39:04 柒柒三拾一 阅读数 1787

 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37977288/article/details/80366864

1. #zdiv1{overflow:hidden;}

2. #roll{list-style:none;position:absolute;}

3. #roll li{float:left;}

1. <div id="zdiv1">

2. <ul id="roll">

3. <li>1</li>

4. <li>2</li>

5. <li>3</li>

6. </ul>

7. <div>

如上面的代码我们想要实现的效果是在div以外不希望看到ul的内容，但是你会发现其实设置的overflowL:hidden已经失效，并没有得到我们想要的效果，这是因为一个设置了绝对定位的元素，其溢出内容不总是会被设置了overflow的父元素裁掉，解决方案是只需要为其父元素添加属性position：relative。

overflow:hidden不起作用？

2017年06月05日 21:06:44 画一生情入颜容 阅读数 8377

 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/csdn_zsdf/article/details/72871357

今天在项目中，通过从后台读取数据生成的table中的tr和td时，由于有些td内容太多了，需要对其进行overflow:hidden的设置。但是在经过几番努力和尝试之后始终不可以。在进行了搜索之后才明白了。

我们知道，overflow属性值有这几种： 
visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。 
hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。 
scroll：声明内容将被剪裁，但有可能出现滚动条来查看被剪裁掉的内容。滚动条出现的位置在inner border adge和outer padding adge之间。 
auto：声明决策将依赖于客户端，优先使用scroll。

W3C标准中指明： 
通常一个盒子的内容是被限制在盒子边界之内的。但有时也会产生溢出，即部分或全部内容跑到盒子边界之外。溢出将在满足下列条件之一时出现： 
1. 一个不换行的行元素宽度超出了容器盒子宽度。 
2. 一个宽度固定的块元素放在了比它窄的容器盒子内。 
3. 一个元素的高度超出了容器盒子的高度。 
4. 一个子孙元素，由负边距值引起的部分内容在盒子外部。 
5. text-indent属性引起的行内元素在盒子的左右边界外。 
6. 一个绝对定位的子孙元素，部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

当溢出发生时，overflow属性约定了容器盒子是否剪裁掉超出其内边界的部分，并且决定是否出现滚动条来访问被剪裁掉的内容。它会影响到元素所 有内容的剪裁，但有个例外情况，即上面第6条所提到的：元素的子孙元素的包含块（Containing blocks）是整个视窗（viewport）或是该元素的祖先元素，内容将不会被剪裁。包含块是什么呢？简单的说，就是可以决定一个元素位置和大小的块。 
通常一个元素的包含块由离它最近的块级祖先元素的内容边界决定。但当元素被设置成绝对定位时，包含块由最近的position不是static的祖先元素决定。

    html片段:
<div class=”ocean”> 
    <div class=”land”> 
        <p class=”joke”> 
                Mrs. Smith couldn’t get her husband to exercise. 
                She asked Mrs. Jones what she should do. Jones replied, 
                ”Tape the remote control between his toes.” 
        </p> 
    </div> 
</div>
style:
div.ocean{ 
    position:relative; 
    background-color:blue; 
    width:120px; 
    height:120px; 
    } 
div.land{ 
    width:100px; 
    height:100px; 
    background-color:red; 
    overflow:hidden; 
    } 
p.joke{ 
    width:150px; 
    height:110px; 
    margin-top:30px; 
    margin-left:30px; 
    background-color:yellow; 
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

上面的代码讲述的是这样一个故事：蓝色的海洋里有块红色的大地，红色大地内有个黄色的段子。由于段子样式的设置，它的部分内容超出了红色大地。为避免黄色 段子污染到蓝色海洋，红色大地警惕的为自己设置了overflow:hidden;这样超出大地的黄色部分就被剪掉了，我们看到的将是这样一派和谐景象， 如图1： 
 
图1：和谐的星球

如果事物都是这样有理有序，天下可不就太平了。没多久，黄色段子觉得凭自己的显赫身份不该受红色大地的控制，于是绞尽脑汁将自己变改成了绝对定位，一下子就摆脱了大地的束缚，如图2：

p.joke{ 
position:absolute; 
width:150px; 
height:110px; 
top:30px; 
left:30px; 
background-color:yellow; 
}

 
图2：猖獗的段子

为什么会这样呢？这便是创造了上面提到过的第6个条件。当黄色段子变成position:absolute时，它的包含块已由原来的红色大地的内容边界升 级到了离它最近的position不是static的蓝色海洋了。而海洋此刻对此还一无所知呢，自身没有设置overflow:hidden属性，导致黄 色段子本该被裁剪的部分全部可见，不仅污染到海洋，还影响到整个星球，情况万分火急啊。即使这时海洋设置上overflow:hidden，也只能将超出 蓝色海洋的黄色部分剪裁，就像图3，海洋此时是手足无措啊。 
 
图3：无辜的海洋

俗语说的好，魔高一尺道高一丈，解铃还须系铃人。红色大地怎就甘心段子跑出去呢。怎么说大地终归是段子的祖先元素，怎么能甘心由着段子胡作非为呢。于是， 大地历尽千辛，寻得秘籍，在自己的样式中添加position:relative属性，将段子的包含块又改成了大地来决定。这下段子就乖乖的被关起来了。 星球看起来又回到了最初的状态。

div.ocean{ 
    position:relative; 
    background-color:blue; 
    width:120px; 
    height:120px; 
    } 
div.land{ 
    position:relative; 
    width:100px; 
    height:100px; 
    background-color:red; 
    overflow:hidden; 
    } 
p.joke{ 
    position:absolute; 
    width:150px; 
    height:110px; 
    top:30px; 
    left:30px; 
    background-color:yellow; 
    }

所以说，hidden并没有失效，而是有可能我们遇到的情况恰好满足了第6个条件，使得元素的包含块发生了变化。上面的故事中，也提到了在遇到‘hidden’失效的情况时，可以根据需要来改变元素的包含块来达到正义的目的。

这样的解决思路是没有问题的，但是对于我的来说却还是没有什么效果；①。其实td设置overflow：hidden是没有效果的。

②。每次的td的position为absolute，就相当于重新定位，我的数据还是动态获取的，所以使用的position会使所有的数据都叠加在第一个数据区域。

所以如果我的问题按照上述解决思路来的话，就相当于只是将所有数据都重叠在了一起，并没有好到哪去。

所以在经过反复琢磨之后，td内加一个span元素。使其相对定位，并且overflow：hidden；并设置宽度和高度。

.table tbody tr .span_1,
.table tbody tr .span_2,
.table tbody tr .span_3{
    position: relative;
    height: 150px;
    overflow: hidden;
    margin-top: 10px;
}

.table tbody tr .span_1:hover,
.table tbody tr .span_2:hover,
.table tbody tr .span_3:hover{
    overflow: scroll;
}

::-webkit-scrollbar{width:4px;}
/*::-webkit-scrollbar-track{background-color:#ccc;}*/
::-webkit-scrollbar-thumb{background-color:#ccc;}
::-webkit-scrollbar-thumb:hover {background-color:#ccc}
::-webkit-scrollbar-thumb:active {background-color:#ccc}

前几行代码是加了span的td的处理，使其超出内容hidden。但当鼠标悬浮时，其显示为出现滚动条，这无疑是一个好办法。最后的css样式设置的是滚动条的样式（只在webkit内核中有效），注释掉的是底部的滚动条，在这里我们只用到了侧滚动条。

所以css的坑还是很多的，当你按照正常的思路来设置的样式如果不起作用的话，不如多搜搜，就会发现有很多例外，对以后也是有帮助的。

18、webkit-scroll

CSS3自定义滚动条样式 -webkit-scrollbar

当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。

首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

 

滚动条的css样式主要有三部分组成：

　　1、::-webkit-scrollbar   定义了滚动条整体的样式；

     2、::-webkit-scrollbar-thumb  滑块部分；

　  3、::-webkit-scrollbar-thumb  轨道部分；

下面以overflow-y:auto;为例（overflow-x:auto同）

html代码：

1 2 3

<div class="test test-1">         <div class="scrollbar"></div> </div>

css代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

.test{     width: 50px;     height: 200px;     overflow: auto;     float: left;     margin: 5px;     border: none; } .scrollbar{     width: 30px;     height: 300px;     margin: 0 auto;   } .test-1::-webkit-scrollbar {/*滚动条整体样式*/         width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/         height: 1px;     } .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/         border-radius: 10px;          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);         background: #535353;     } .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);         border-radius: 10px;         background: #EDEDED;     }

　　效果如下如：

如果要改变滚动条的宽度：在::-webkit-scrollbar中改变即可；如果要改变滚动条滑块的圆角，在::-webkit-scrollbar-thumb 中改变；如果要改轨道的圆角在::-webkit-scrollbar-track中改变；

 

此外，滚动条的滑块不仅可以填充颜色还可以填充图片如下：

css代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.test-5::-webkit-scrollbar {/*滚动条整体样式*/     width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/     height: 1px; } .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/         border-radius: 10px; background-color: #F90; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);     } .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);         /*border-radius: 10px;*/         background: #EDEDED;     }

html代码：

1 2 3

<div class="test test-5">     <div class="scrollbar"></div> </div>

　效果如下：

以上就可以做出自己喜欢的滚动条了；

如果文档中会有多个滚动条出现，而且希望所有的滚动条样式是一样的，那么伪元素前面不需要加上class、id、标签名等之类的任何东西。

19、

浅谈css的伪元素::after和::before

2018年03月05日 15:07:46 马大头 阅读数 15606

css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。

一、概念：

1.定义

The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

从定义我们知道::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。

其实::after和::before被引入css中，最核心的目的，还是为了实现语义化。在我们实际开发时候经常有这样的经历，为了实现一些效果，在文档中创建了一些没有实际内容的节点，或者加入辅助样式的文本，如：

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
</style>
<nav>
    <ul>
        <li>HTML 5</li>
        <li>|</li>
        <li>CSS3</li>
        <li>|</li>
        <li>JavaScript</li>
    </ul>
</nav>

显示的时候是这样子的：

很明显，例子中的“|”仅是显示时候用的间隔符，没有实际的意义，而他所在的li元素仅是为了装饰才被创建的，本是不应该被创建在文档内的。那么能不能由样式（css）去创建出节点把他们代替掉呢？

出于这样的需求，就诞生了::after和::before，这两个伪元素相当于是对当前元素的装潢，他们并不是节点，不会出现在dom树中，但是在显示上具备节点的效果。我们使用::after和::before重构一下上边的代码：

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
    li:not(:last-child)::after{
        content: "|";
    }
</style>
<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

显示效果没有变化，但是文档结构变得清晰了多了。

2.使用

::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。如：

<style>
    p:before{
        content: "H";
    p:after{
        content: "d";
    }
  </style>
  <p>ello Worl</p>

显示为完整的Hello World。

::after和::before是虚拟元素，不会影响真正元素的所在文档的位置，对:first-child或者:last-child这种伪类选择不会造成影响。

3.操作

::after和::before是虚拟节点，而不是正在的节点，不在documont里面找到对应Node对象，在之前的例子中，我们执行下列js代码：

console.log( document.querySelector("ul").childNodes)；

得到的是一个只有3个节点的NodeList对象，而两个伪元素并不在对象中。因为::after和::before不是真正的节点，所以我们取不到他们，也不发设置点击等用户事件。::after和::before虽然是不能设置事件，但还会捕获用户事件，并把事件“冒泡”到伪元素所在的元素上。之所以“冒泡”二字加了引号，是因为他不是真的冒泡，更准确的说::after和::before帮所在元素去捕获去事件，事件的srcElement对象是伪元素所在的元素，而不是伪元素本身。

document不能获取到::after和::before所对应的节点对象，但是可以通过css的接口获取其样式属性，如：

window.getComputedStyle(
    document.querySelector('li'), ':before'
)

返回是个CSSStyleDeclaration对象，可以获取当前的style值。

二、分享一些::after和::before使用的经验

以下例子多数是在特定平台上使用过的，未做兼容处理，建议在chrome下浏览

1.间隔符用法

如文章最开始的例子，使用::after伪元素做间隔符，并使用伪类:not排除掉最后一个元素。

例子

2.做border三角图标

很多开发者都用过border做的三角图标，本身三角符号就不属于文档，使用伪元素做三角符最合适了。

例子

3.字符图标

最近笔者在开发微信小程序，因为微信小程序不支持svg和背景图，于是笔者大量使用字符图标，感觉字符图标非常方便，就是受设备系统字体库限制。

例子

4.webfont的图标

现在webfont图标的最佳实践就是使用i标签和::after或者::before，实现这种图标最佳实践的工具非常多，比如http://fontello.com/，从这个网站我们可以下载svg的图标库。这种例子太多了，这里就不再列举。

5.做单位、标签、表单必填标准

笔者一直认为表单输入框的必填标记（往往是红色的“*”字符），不应该放到文档当中，使用::before可以很优雅地解决这个问题（其实就是字符图标的进一步应用）。

对于单位和前（后）置标签，也可以这样做。但是多数情况下不推荐这种做法，因为单位和标签应该是文档的一部分。

例子

6.做一些效果

可以参考《理解伪元素 :before 和 :after》这篇文章的效果，笔者曾经在实际项目中使用过“迷人的阴影”效果，也曾在微场景开发中实现过一些类似的动画。

例子

7.实现一些标签对placeholder的支持

只有几个标签支持placeholder，而且如<input type='date' />虽然是input但是也不支持。使用::before可以让一部分标签也实现对placeholder属性的支持。

例子

8.实现文字图片居中对齐

优雅地实现张鑫旭老师的inline-box居中方法，使用一个高度为100%的::before将自身的对齐线移动到自己的中线，这样里面的所有内联元素都居中对齐了。

例子

9.清除浮动

这个很常用，bootstrap的clearfix类就是使用这个方法。

例子

10.使用pointer-events消除伪元素事件

之前提到过，伪元素::after和::before会替所在元素捕获用户事件，有时候这并非我们想要的，因为这样会影响被::after和::before覆盖的子节点或者兄弟节点捕获用户事件，使用pointer-events可以消除这种问题。

例子

所有例子的源码在https://github.com/laden666666/css-before-and-after-test

简单就分享这么多，总之使用伪元素的核心是更利于语义化，这是我们活用::after和::before的前提，否则就是胡乱使用了。总体可以分为四种用法：

1.用css创建装饰性元素

2.用css创建用于布局的元素，实现特殊布局的特殊需要

3.做显示图标的实现手段

4.配合attr显示属性值

 参考：

http://www.webhek.com/pseudo-element/

http://www.cnblogs.com/ys-ys/p/5092760.html

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

20、

相对地址与绝对地址

2018年07月07日 10:37:51 灰寨小学--python小陈 阅读数 378

相对地址与绝对地址

网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：

1. <!-- 引入外部图片 -->

2. <img src="images/001.jpg" alt="图片" />

3.  

4. <!-- 链接到另外一个网页 -->

5. <a href="002.html">链接到网页2</a>

6.  

7. <!-- 外链一个css文件 -->

8. <link rel="stylesheet" type="text/css" href="css/main.css" />

9.  

10. <!-- 外链一个js文件 -->

11. <script type="text/javascript" src="js/jquery.js"></script>

这些地址分为相对地址和绝对地址:

相对地址 
相对于引用文件本身去定位被引用的文件地址，以上的例子都是相对地址，相对地址的定义技巧：

• “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

• “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

绝对地址 
相对于磁盘的位置去定位文件的地址，比如：<img src="C:\course5\03day\images\001.jpg" alt="图片" /> 绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对地址就没有这个问题。

21、

less笔记

2018年10月05日 01:25:05 浅色流年 阅读数 105更多

个人分类： css预处理器

less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网：

http://lesscss.cn/

bootstrap中less教程：

http://www.bootcss.com/p/lesscss/

Less编译工具

koala 官网:
www.koala-app.com

Less编译

1. 用koala手动编译
2. 借助less转css文件手动编译
3. 利用打包工具编译

less中的注释

以//开头的注释，不会被编译到css文件中

以/**/包裹的注释会被编译到css文件中

less中的变量

LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次.

使用@来申明一个变量：@pink：pink;

1. 作为普通属性值只来使用：直接使用@pink

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
=>
#header { color: #6c94be; }

• 1
• 2
• 3
• 4
• 5

1. 作为选择器和属性名：@{selector的值}的形式

<div id="wrap"></div>
// less
@selector:#wrap;
@w:width;
@{selector}{
    @{w}:100px;
    height: 300px;
    border: 1px solid;
}
// 编译为css后
#wrap{
    width:100px;
    height:300px;
    border:1px solid;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

1. 作为URL：@{url}

// less
@url:"../img/zdy.jpg";
#wrap{
    width: 100px;
	height: 100px;
    background: url("@{url}");
    // 也可以将url作为变量，写成下面形式
    // background: url(@url);
}
// 编译为css后
#wrap{
    width:100px;
    height:100px;
    background:url("../img/zdy.jpg")
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

1. 变量的延迟加载

// less
@var: 0;
.class {
    @var: 1;
    .brass {
        @var: 2;
        three: @var;  //3
        @var: 3;
    }
    one: @var;  //1
}
// 编译为css后
.class {
    one: 1;
}
.class .brass {
    three: 3;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

less作用域

首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

@var: red;
#page {
    @var: white;
    #header {
        color: @var; // white
    }
}
#footer {
    color: @var; // red  
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

less中的嵌套规则

1. 基本嵌套规则

// html页面：
<ul id="list">
	<li>
		<a href="javascript:;">a1</a>
		<span>b1</span>
	</li>
</ul>

// less嵌套写法：
#list{
    list-style: none;
    line-height: 30px;
    width: 300px;
    background: pink;
    margin: 0 auto;
    li{height: 30px;}
    a{
        float: left;
         /*&代表父级*/
        &:hover{color: red;}
    }
    span{float: right;}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

1. &的使用（&代表父级）
   如果想写串联选择器，而不是写后代选择器，就可以用到&了.
   这点对伪类尤其有用如 :hover 和 :focus.

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.

以下测试，html模板均为

// html
<div id="box1">box1</div>

• 1
• 2

1. 普通混合(会将混合内容输出到css文件中)

// less
.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
#box1{
    width: 100px;
    height: 100px;
    background: pink;
    .juzhong;
}

// 编译为css后
.juzhong { // 会将混合内容输出到css文件中
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
#box1 {
  width: 100px;
  height: 100px;
  background: pink;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

1. 不带输出的混合
   
   加（）后就不会在css中输出混合内容了

// less
.juzhong(){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
#box1{
    width: 100px;
    height: 100px;
    background: pink;
    .juzhong;
}


// 编译为css后
#box1 {
  width: 100px;
  height: 100px;
  background: pink;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

1. 带参数的混合

// less
.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}



#box1{
    .juzhong(100px,100px,pink);
    z-index: 1;
}


// 编译为css后
#box1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: #ffc0cb;
  z-index: 1;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

1. 带参数并且有默认值的混合

// less
.juzhong(@w:100px,@h:100px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}

#box1{
    .juzhong;
    z-index: 1;
}


// 编译为css后
#box1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: #ffc0cb;
  z-index: 1;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

1. 带多个参数的混合
2. 命名参数（传实参时可以指定值给的是哪个参数）

命名参数就是引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。

任何参数都已通过它的名称来引用，这样就不必按照任意特定的顺序来使

// less
.juzhong(@w:100px,@h:100px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
#box1{
    // 引入混合时可以改变参数位置
    .juzhong(@h:200px;@c:deeppink;);
}


// 编译为css后
#box1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 200px;
  background: #ff1493;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

1. 匹配模式
   根据传入的参数来改变混合的默认呈现。

// less
/*向上的三角*/
.triangle(top,@w:10px,@c:pink){
    border-width:@w;
    border-color: transparent  transparent  @c transparent ;
    border-style:dashed dashed solid dashed  ;
}
/*向下的三角*/
.triangle(bottom,@w:10px,@c:pink){
    border-width:@w;
    border-color: @c transparent  transparent   transparent ;
    border-style:solid dashed dashed  dashed  ;
}
/*向左的三角*/
.triangle(left,@w:10px,@c:pink){
    border-width:@w;
    border-color:  transparent @c  transparent   transparent ;
    border-style: dashed solid dashed  dashed  ;
}
/*向右的三角*/
.triangle(right,@w:10px,@c:pink){
    border-width:@w;
    border-color:  transparent   transparent   transparent @c;
    border-style: dashed  dashed  dashed  solid;
}

.triangle(@_,@w:10px,@c:pink){
    width: 0;
    height: 0;
    overflow: hidden;
}

#box1{
    // 向上三角图案
    .triangle(top,50px,deeppink);
}


// 编译为css后
#box1 {
    border-width: 50px;
    border-color: transparent transparent #ff1493 transparent;
    border-style: dashed dashed solid dashed  ;
    width: 0;
    height: 0;
    overflow: hidden;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47

导引表达式:

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。

为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

以此例做为开始：

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就会得到：

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}
导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的：

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
除去关键字true以外的值都被视示布尔假：

.class {
  .truth(40); // Will not match any of the above definitions.
}
导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。

.mixin (@a) when (@a > 10), (@a < -10) { ... }
导引可以无参数，也可以对参数进行比较运算：

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常见的检测函式：
    iscolor
    isnumber
    isstring
    iskeyword
    isurl
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：
    ispixel
    ispercentage
    isem
最后再补充一点，在导引序列中可以使用and关键字实现与条件：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

使用not关键字实现或条件
.mixin (@b) when not (@b > 0) { ... }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69

1. arguments变量
   @arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.border(@w:10px,@style:solid,@c:deeppink){
    border: @arguments;
}

• 1
• 2
• 3

less运算

任何数字、颜色或者变量都可以参与运算
在less中可以进行加减乘除的运算
括号也同样允许使用

Color 函数 //有对应的API

Math 函数:

round(1.67); //四舍五入 returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
percentage(0.5); // returns `50%`

• 1
• 2
• 3
• 4

less避免编译 css中cacl()用来计算

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

.class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
我们可以将要避免编译的值用 “”包含起来，输出结果为:
.class {
    filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

less继承

性能比混合高
灵活度比混合低
extend(继承的类 all)

// less
.common:hover{
    background: pink;
}
.common{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.juzhong(@w:100px,@h:100px,@c:pink){
    &:extend(.common all);
    width: @w;
    height: @h;
    background: @c;
}
#box1{
    .juzhong();
    z-index: 1;
}

// 编译为css后
.common:hover{
    background: pink;
}
.common{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.juzhong(@w:100px,@h:100px,@c:pink){
    &:extend(.common all);
    width: @w;
    height: @h;
    background: @c;
}
#box1{
    .juzhong();
    z-index: 1;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45

命名空间

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来,
你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

#bundle {
	.button () {
		display: block;
		border: 1px solid black;
		background-color: grey;
		&:hover { background-color: white }
	}
	.tab { ... }
	.citation { ... }
}
只需要在 #header a中像这样引入 .button:
#header a {
	color: orange;
	#bundle > .button;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

混合与继承区别

混合:
定义：就是将一系列属性从一个规则集引入到另一个规则集的方式，
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。
参数：参数可带可不带。
编译后：编译后相当于ctrl c +ctrl v

继承不能带参数，性能比混合高，灵活度比混合低。
编译后再css中会将选择器组合在一起，代码减少。

JavaScript 表达式

慎用，测试报错

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:
@var: `"hello".toUpperCase() + '!'`;
输出:
@var: "HELLO!";
注意你也可以同时使用字符串插值和避免编译:
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
输出:
@var: HELLO!;
它也可以访问JavaScript环境:
@height: `document.body.clientHeight`;
如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数:
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

22、

23、

24、

前端开发中的CSS的长度单位em、px、ex、%

2014年08月12日 20:17:02 wanghaofeng 阅读数 1341

px 像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

% 相对长度单位。相对于浏览器窗口的大小。

 

我们知道pt点Points (1点 = 1/72英寸) 使用来指定字体大小的度量单位下面公式就是pt和px之间的转换：

PX和PT转换的公式： pt=px乘以3/4。比如12px×3/4=9pt大小。
PX和em转换的公式： px=16乘以em，也就是说1.5em=1.5×16=24px。

 

任意浏览器的默认字体高都是16px，即12pt。所有未经调整的浏览器都符合:1em=16px。

那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

25、

CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性：width、height、margin、padding、border。除此之外还有很多其他的CSS属性的值同样也是长度值，像偏移量(offset)、box-shadow的大小或者字体的大小、间距等。CSS中有哪些长度单位可以作为属性的值呢？这样的单位有很多。

 

绝对长度单位

px

.wrap {
  width: 400px; 
}	

像素或许被认为是最好的“设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

像素应该是设备和显示器中显示趋于一致，但是他越来越不正确。比如：在迷你ipad上显示的网站和ipad本身显示的网页是一样的，意味着如果那些设置的像素值标准化后就超出了窗口的范围

在web上，像素仍然是典型的度量单位，很多其他长度单位直接映射成像素，最终，他们被按照像素处理，javascript语言里的单位就是使用的像素。

in

.wrap {
  width: 4in; 
}	

英寸是一个物理度量单位，但是在CSS领域，英寸只不过被直接映射成像素罢了。欢迎大家在评论中提供使用英寸做单位的实例，我会把这些实例添加到这里的，但是，到目前为止我还没有见过哪个实例用的是英寸，当然也没见过使用下面那些物理度量单位的实例。

1in == 96px

cm

.wrap {
  width: 20cm; 
}	

对于世界上大多数的人来说，厘米是比较熟悉有用的物理度量单位。它也映射成像素

1cm == 37.8px	

mm

.wrap {
  width: 200mm; 
}	

毫米是个小数量级的物理度量单位。

1mm == 0.1cm == 3.78px	

相对字体的长度

Em

.wrap {
  width: 40em; 
}	

Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生变化。

在没有任何CSS规则的前提下，1em的长度是：

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm	

如果有任何CSS规则改变了字体大小（不管在文档的什么位置），1em的长度会变成相对于新的font-size的大小。

em单位有点古怪，当设置了font-size属性后，它会逐级向上相乘，所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里，而这个元素又在另一个设置了font-size:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem（根em）。这意味着即使一个元素设置为10em，这个元素也不会在他出现的每个地方都是10em。如果font-size变化了，它可能会宽点，也可能会窄点。

rem

.wrap {
  width: 40rem; 
}	

Rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。

值得注意的浏览器支持问题： IE8，, Safari 4或 iOS 3.2中不支持rem单位。

points

.wrap {
  width: 120pt; 
}	

Point是一个物理度量单位，1pt=1/72 in.在CSS之外point是最常用的尺寸类型（可能这就是css支持point的原因）。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”。

在打印样式表和物理媒介中，point是最有意义的，当然你也可以用在屏幕媒介上使用，或者其他的地方

值得注意的浏览器支持问题：在屏幕呈现pt尺寸的时候，会有很大的不同，这里有个关于IE6和firefox（可能是3.6版本）的对比。

pica

.wrap {
  width: 12pc; 
}	

Pica和points一样，只不过1pc=12pt。

ex

.wrap {
  width: 60ex;
}	

ex是一个基于当前字体的x字母高度度量的。ex度量时有时候根据字体自身的信息，有时候由浏览器指明是通过一个小写字形来度量，最糟糕的情况是，它被设置成0.5em。它之所以被命名为“x”的高度，是因为是基于x字母的高度的。要理解x-height，想象一个小写字母，比如“d”，它会有一部分翘起，x-height是不包括翘起的这一部分的，它的高度是那个字母最下面的那一部分。

和em不同，当改变font-family时em不会改变，而ex单位会变化，因为一个单位的值和那个字体是特殊的约束关系。

ch

.wrap {
  width: 60ch;
}	

ch的内涵和x高度相似，只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。

值得注意的浏览器支持问题：写这篇文章的时候任何一个webkit内核的浏览器都不支持这个单位。

可视区百分比长度单位

vw

.wrap {
  width: 10vw;
}	

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

这里有一篇文章，里面主要的使用实例就是可视区百分比单位。

值得注意的浏览器支持问题：在移动浏览器中除了最新的iOS6支持这种单位外，其他的都不支持，这一点也适用于其他可视区相对长度单位。

vh

.wrap {
  width: 10vh;
}	

vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

vmin

.wrap {
  width: 20vmin;
}	

vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。

vmax

.wrap {
  width: 20vmax;
}	

Vmax的值是vw和vh中的较大的值。

值得注意的浏览器支持问题：webkit内核的浏览器支持vmin，不支持vmax。但是Firefox支持vmax。

离奇的长度单位

百分比

.wrap {
  width: 50%; 
}	

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如，如果一个元素呈现的宽度是450px，子元素的宽度设为50%，那么子元素呈现的宽度为225px。

杂言：百分比不是一个专门的长度单位，我把它也包括在本文中是因为百分比和长度关系很大。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css/the-lengths-of-css.html © w3cplus.com

分类: front-end Web developer