关于CSS的碎片学习

时间  2019-11-07
标签 关于 css 碎片 学习 栏目 CSS 繁體版
原文   原文链接

幽灵空白节点

css世界原话：php

“幽灵空白节点”是内联盒模型中很是重要的一个概念，具体指的是：在 HTML5 文档声明 中，内联元素的全部解析和渲染表现就如同每一个行框盒子的前面有一个“空白节点”同样。这 个“空白节点”永远透明，不占据任何宽度，看不见也没法经过脚本获取，就好像幽灵同样， 但又确确实实地存在，表现如同文本节点同样。css

<!--注意，这里有一个前提，文档声明必须是 HTML5 文档声明-->
<!doctype html>
<html>
    <head></head>
    <body>
        <div><span></span></div>
    </body>
    <style> div { background-color: #cd0000; } span { display: inline-block; } </style>
</html>
复制代码

实际效果图以下： html

幽灵节点图

然而当咱们给div加一下font-size:0的时候，获得解决，效果以下：浏览器

字体大小为0的时候

再举个栗子：bash

<div><span></span></div>
<style> div { border: 2px dashed #cd0000; } span { padding: 50%; background-color: gray; } </style>
复制代码

效果图：布局

幽灵节点
并非正方形，可是设置 font-size: 0后：

字体大小为0的时候

因此不少宽高与预期不符的时候，能够考虑一下是否是幽灵节点的问题，设置font-size: 0试试。字体

超越最大原则

!important能够被“覆盖”，min-width/max-width、min-height/max-height属性与width/height属性有本身的原则：flex

<!--宽度最后为200px-->
<img src='helloWorld.jpg' style='width: 300px!important;'>
<style> img { max-width: 200px; } </style>
复制代码
<!--宽度最后为400px-->
<img src='helloWorld.jpg' style='width: 300px!important;'>
<style> img { max-width: 200px; min-width: 400px; } </style>
复制代码

content用法

  1. content的值能够为空字符串，也就是content: ''，没有必要在里面加个点；ui

  2. content不只仅能够在before和after等伪元素里面使用，能够在普通标签里面用来加载图片，好比<img> <style> img { content: url(helloWorld.jpg); }</style>与<img src='helloWorld.jpg'>视觉效果等效。但使用content生产的的图片没法控制，不能控制大小等；搜索引擎

  3. 使用content生成的内容与元素，不能被选中和复制，没法被屏幕阅读的设备读取，也没法被搜索引擎抓取，因此重要的文本不要使用；

  4. content支持Unicode，部分地方很好用，不如不用使用过多的
    标签，而是加一个如下的代码用于换行；

    :after{
    content: '\A';
    white-space: pre;
}
复制代码

    顺便分享一个只用css生成...的有趣例子:连接

  5. content还有以一个有趣的玩法就是计数器，简单的说就是用counter-reset注册一下，counter-increment 添加计数，counter()显示计数，下面是一个简单的例子，但运用场景不少

    <div class="main">
    <div>第一条</div>
    <div>第二条</div>
    <div>第三条</div>
    <div>第四条</div>
</div>
<style> .main { counter-reset: kakaka; } .main > div::before { content: counter(kakaka)'.'; counter-increment: kakaka 1; } </style>
复制代码

    效果图：

    计数器

行内标签的padding

行内元素的padding上下不会改变文档流，可是会产生遮盖，且不能使用z-index调整

<span class="li">第一条</span>
<span class="li">第二条</span>
<br/>
<span class="li">第三条</span>
<span class="li">第四条</span>
<style> span { padding: 10px; } span:nth-child(1) { background-color: red; } span:nth-child(2) { background-color: yellowgreen; z-index:1;/* 无效 */ } span:nth-child(4) { background-color: rebeccapurple; } span:nth-child(5) { background-color: brown; } </style>
复制代码

效果图：

行内元素的padding

关于margin合并特性

margin在合并会出如今块级元素（不包含浮动和绝对定位的），且在垂直方向（不使用writing-mode改变文档流方向）的时候。

  1. 兄弟元素上下合并

    <p>第一条</p>
<p>第二条</p>
<p>第三条</p>
<p>第四条</p>
<style> p { margin: 20px; } </style>
复制代码

  2. 父子元素合并

    <div>
    <p>第一条</p>
    <p>第二条</p>
    <p>第三条</p>
    <p>第四条</p>
</div>
<div>我是底部</div>
<style> div { margin-bottom: 10px; } p { margin: 20px; } </style>
复制代码

  3. 空元素合并

    <p>第一条</p>
<div></div>
<p>第二条</p>
<p>第三条</p>
<p>第四条</p>
<style> div { margin: 30px; } p { margin: 20px; } </style>
复制代码

规则总结起来：正正取大值、正负值相加、负负最负值

一旦了解到了这些margin合并的特性，就不用单独margin-top: 20px;等麻烦的操做。

关于line-height

  1. 容器的大小实际不是font-size撑开的，而是line-height决定的;
  2. 文字的行距 = line-height - font-size;
  3. 但是设置line-height: 1.5不必定要用px等单位，此时line-height为font-size的1.5倍；
  4. 文字近似垂直居中，实际上是能够经过line-height设置高度控制的，不用设置height，若是存在height的话，请设置相等。之因此说是文字垂直居中为近似，由于对于盒模型来讲，垂直方向会偏下，缘由在于css的行距上下等分机制，通常会误差1~2px。

absolute的单独使用

在我最先使用absolute的时候，总之直接把relative做为父元素结合起来用，其实这是认知上面的问题。

absolute 是很是独立的 CSS 属性值，其样式和行为表现不依赖其余 任何 CSS 属性就能够完成 ——《css世界》

absolute具备相对特性的无依赖绝对定位，这样说可能会有些很差理解。

当给元素添加absolute时，若是元素没有定义盒模型，会以inline-block来计算展现。可是区别与直接添加inline-block的是，absolute不改变正常流的尺寸空间。也就是说，不管咱们怎么修改absolute定位的元素的宽高，都不会影响到正常流布局。

下图来自《css世界》论坛

absolute定位

不使用relative做为父元素，单一使用absolute有不少使用的空间与场景：

  1. 在元素拥有absolute属性，且不受父级overflow剪切影响（但父级也是定位元素时会影响）。

  2. 利用absolute的流体特性实现垂直水平居中

    <div class="element"></div>
<style> .element { width: 300px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* 创建流体特性 */ margin: auto; /*自动分配空间*/ background-color: red; } </style>
复制代码

    效果图以下：

    absolute的流体特性实现垂直水平居中

relative的单独使用

relative不只仅能够牵制absolute的定位，自己具备颇有趣的适应场景。

“无侵入”式定位，换句话说就是不影响到其余元素的定位，根据自身本来位置定位。

<div class="element"></div>
<style> .element { width: 300px; height: 200px; position: relative; left: 100px; top: 200px; right: 10px; bottom: 10px; /* 无效，当left/right、top/bottom同时存在时，取left和top*/ background-color: red; } </style>
复制代码

效果图以下：

“无侵入”式定位

能够适应不少场景，好比在不影响到原来文档流调整某个元素位置。

下图来自《css世界》：

不变换
变换
左边时总体上移，右边的只是图片偏移了

不过建议少使用relative，由于正是“无侵入”致使了出现了叠层，须要z-index才能解决。

z-index“不犯二”准则

《css世界》提出的：

对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理须要超过 2。因为 z-index 不能超过 2，所以，我称其为“不犯二”准则。

这是一条经验准则，能够有效下降往后遇到 z-index 样式问题的风险。

先讲一下为何须要这个准则。

（1）定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互 间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的 z-index 值也没法覆盖其余元 素的问题。

（2）避免 z-index“一山比一山高”的样式混乱问题。此问题多发生在多人协做以及后期 维护的时候。例如，A 小图标定位，习惯性写了个 z-index:9；B 一看，本身原来的实现被覆 盖了，立马写了个 z-index:99；结果比弹框组件层级还高，那还得了，立马弹框组件来一个 z-index:999999；谁知后来，弹框中又要有出错提示效果……显然，最后项目的 z-index 层级管理就是一团糟。

我以为颇有道理，若是真的出现超过的状况应该首先审视一下本身的布局。

outline和box-shadow的使用

outline不占用空间，这一点和border不一样，border占据空间会影响到宽高，而outline不会影响到正常流。

<div></div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: black; border: 20px solid red; outline: 30px solid rebeccapurple; } </style>
复制代码

outline与border

这样的话咱们彻底就能够直接利用这种方式作遮罩层了，一个标签搞定。

<div>遮罩层</div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: white; outline: 9999px solid #0000005e;/*线宽设置足够大，颜色为透明色*/ } </style>
复制代码

outline遮罩层

可是以上还有一个很大的问题，若是遮罩层为四角为圆弧呢？

<div>遮罩层</div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: white; outline: 9999px solid #0000005e; border-radius: 20px; border: 1px solid red;/*为了区分效果*/ } </style>
复制代码

outline圆弧遮罩层

很明显，遮罩层就出问题了，由于outline在大部分浏览器上不支持弧度设置，目前火狐支持使用-moz-outline-radius设置。 此时，咱们可使用box-shadow来实现，单个标签遮罩层：

<div>遮罩层</div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: white; box-shadow: 0 0 0 9999px #0000005e; border-radius: 20px; } </style>
复制代码

box-shadow圆弧遮罩层

这样就不存在由于弧度产生的问题，box-shadow与outline一样不会影响到正常流。

同时设置能够显示双边框效果，注意outline和box-shadow同时设置会互相重叠，且outline老是在box-shadow之上，但利用这些特性，能够实现以下效果，单标签内弧外方

<div></div>
<style> div { position: absolute; left: 0;right: 0;top: 0;bottom: 0; margin: auto; width: 100px; height: 100px; background-color: yellowgreen; border-radius: 20px; outline: 10px solid brown; box-shadow: 0 0 0 10px brown; } </style>
复制代码

outline和box-shadow

outline还有其余用法，好比使用outline-offset偏移就能够显示出这样的桌布效果

outline-offset

利用:first-child、:nth-child作判断

:first-child与:nth-last-child()等选择器，不只仅能够单一使用，能够同时使用进行判断，已获取更好的效果，例子以下：

当元素块超过4个的时候，变动所有颜色。

```html
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>
<style>
    .main {
        display: flex;
        flex-wrap: wrap;
    }
    .main > div {
        width: 50px;
        line-height: 50px;
        text-align: center;
        background-color: gray;
        border-radius: 5px;
        margin: 10px;
    }
    
    .main > div:first-child:nth-last-child(n+4),
    .main > div:first-child:nth-last-child(n+4) ~ div {
        background-color: palevioletred;
    }
</style>
```
复制代码

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程