CSS实用属性挖掘(一)

target酱
258 阅读7分钟

css的世界很奇妙，写个小页面简单明了，写个大动画难如登天。要想深入了解需要不断的夯实基础，挖掘底层逻辑。
接下来呢，把我工作中用到的一些简单属性效果简单的展示出来，让大家能够学以致用。

currentColor

使用该关键字的元素，其色值是获取（自身或其最近父元素）color属性的颜色值。

// html
<div class="father">
   <p class="baby">
     我获取了父元素的color属性值，当鼠标移到父元素上改变父元素color值时，我的颜色也改变咯
   </p>
</div>
// css
.father {
    width: 100px;
    height: 100px;
    color: #f00;
    cursor: pointer;
}
.father:hover {
    color: #f0f;
}
.father > .baby {
    color: currentColor;
}

object-fit

CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。

object-fit也是类似的，但还是有些差异，具体有5个值：

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

每个属性值的具体含义如下：

  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
  • none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

quote

css中有一个名为quotes的属性，可以指定闭合符号。
我们通过几个示例来看看quotes的作用：

be005d27c51748816d4e09bcda1e476.png

// html
<q class="zh">不忘初心</q><br />
<q class="en">stay true to the mission</q><br />
<q class="book">生活</q>

// css
.zh {
    quotes: "“" "”";
}
.en {
    quotes: '"' '"';
}
.book {
    quotes: "《" "》";
}

count

css计数器的两个属性(counter-reset,counter-increment)和一个方法(counter()/counters())

1. counter-reset：顾名思义，就是计数器-重置的意思。

它的属性值如下：
  • none：默认，不能对选择器的计数器进行重置。
  • id number：id为定义重置计数器的选择器、id或class。number可设置次选择器出现次数的计数值。可以为正数、零或负数(各个浏览器支持不同)。
  • inherit：规定应该从父元素继承counter-reset属性的值。 来看两个简单的counter-reset示例：

9a5c672f76c2f046de91477294e5bd5.png

// html 
<p>看！初始值为：</p>
<p class="default"></p>

// css
.default {
  counter-reset: num 6; 
}
.default:before { 
  content: counter(num); 
}

counter-reset还可以接受多个参数哦~

02147364650787a5b3b6f8939fd5f2e.png

// html 
<p>看！初始值为：</p>
<p class="default"></p>

// css
.default {
  counter-reset: num 8 num2 8; 
}
.default:before { 
  content: counter(num); 
}
.default:after { 
  content: counter(num2); 
}

2. counter-increment：顾名思义，就是计数器-递增的意思。

它的属性值如下：
  • none：没有计数器将递增。
  • id number：id定义将增加计数的选择器、id或class。number定义增量。number可以是正数、零或者负数。
  • inherit：指定counter-increment属性的值，应该从父元素继承。 来看两个简单的counter-increment示例：

d6791e281431ba4a7ff9d91c2132e4b.png

// html 
<p>看！初始值为：</p>
<p class="default"></p>

// css
.default {
  counter-reset: num 0; // 如果没有默认值，则默认为0
  counter-increment:num;// 默认递增一次(也可以设置在伪元素上)
}
.default:before { 
  content: counter(num); 
}

counter-increment在父子级同时存在效果：

373ffd48399ab010d3f23d5ddcfca10.png

// html 
<p>看！初始值为：</p>
<p class="default"></p>

// css
.default {
    counter-increment: num;
}
.default:before {
    content: counter(num);
    counter-increment: num;
}

父级和子级各自自增一次，结果为2。总而言之，无论位置在何处，只要有counter-increment，对应的计数器的值就会变化，counter()函数只是负责输出罢了~!
counter-increment的属性值与counter-reset有与之呼应的设定，在写法上也是空格区分即可。 counter-increment:num num2;

3.方法counter()/counters()。这是方法而不是属性。

  • counter()：返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<strting>值的任何地方使用。
/* 简单使用 */
counter(计数器名称);

/* 更改计数器显示 */
counter(countername, upper-roman)

ddf49b0494379e30e9040ac549e8da2.png

// html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

// css
ol {
    counter-reset: lc;
}
li {
    counter-increment: lc;
}
li::after {
    content: "[" counter(lc) "] == [" counter(lc, upper-roman) "]";
}
  • counters()：是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters()函数有两种形式：counters(name,string)或counters(name,string,style)。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔计数器以指示的样式呈现，如果未指定样式，则默认为十进制。
/* Simple usage  - style defaults to decimal(默认为十进制) */
counters(countername, '-');

/* changing the counter display(改变计数器显示) */
counters(countername, '.', upper-roman)

ad130b2e33c76e3fcc485c27ac90c0b.png

// html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

// css
ol {
    counter-reset: listCounter;
}
li {
    counter-increment: listCounter;
}
li::marker {
    content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
    content: counters(listCounter, ".") " == "
      counters(listCounter, ".", lower-roman);
}

padding

关于padding的属性值，其实没有什么好说的。其一是padding属性不支持负值，其二是padding支持百分比，但是padding的百分比计算规则有不同点：padding百分比值无论水平还是垂直方向均是相对父元素的宽度计算的！！！
来实现一个自适应的等比例矩形效果：
4c4a246d34e4f97d29bd78e1ba786eb.png

// html
<div>
  <p></p>
</div>

// css
div {
    width: 100px;
}
p {
    padding:50%;
}

以上百分比值应用在具有块状特性的元素上，如果是内联元素，会有不同的表现哦~

  1. 同样相对于宽度计算；
  2. 默认的高度和宽度细节差异；（当内联元素内容为空时，内联元素的垂直padding会让空白节点显现，就是规范中的'strut'。解决办法：内联元素默认高度受font-size属性影响，所以设置其值为0即可。）
  3. padding会断行。（当内联元素内容有文字时） 因为不怎么常用，这里就不再深入讲解啦。

margin

老生常谈的场景：让一个元素水平垂直居中。。。

  • 绝对定位元素的margin:auto居中。展示效果如下：
// html
<div class="father">
  <span class="son"></span>
</div>

// css
.father {
    height: 200px;
    position: relative;
    text-align: center;
    line-height: 100px;
}
.son {
    width: 100px;
    position: absolute;
    height: 100px;
    background: rgb(119, 113, 113);
    margin: -50px;
    top: 50%;
    left: 50%;
}

以下这种方式子元素的尺寸表现为'格式化宽度和格式化高度'，和<div>的'正常流宽度'一样，同属于外部尺寸，也就是尺寸自动填充父级元素的可用尺寸，个人认为比上面的margin需要计算要好使得多。

// html
<div class="father">
  <span class="son2"></span>
</div>

// css
.father {
    height: 200px;
    position: relative;
    text-align: center;
    line-height: 100px;
}
.son2 {
    width: 100px;
    position: absolute;
    height: 100px;
    background: rgb(231, 181, 181);
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

border

其貌不扬的border其实在开发当中可以满足相当多的小需求，比如移动端的汉堡栏：

99ea75f76b7bc10e27c862c07368c37.png

// html
<div class="hamb"></div>

// css
.hamb {
    width: 100px;
    height: 20px;
    border-top: 60px double;
    border-bottom: 20px solid;
}

又如绘制一个三角形：

a45ee288429fda1a8711cfdcc724423.png

// html
<div class="triangle"></div>

// css
.triangle {
    width: 0;
    border: 10px solid;
    border-color: #ccc transparent transparent;// border-color属性接受四个颜色参数值，方向分别为上下左右
}

以及不使用border-radius实现“圆角”按钮：

b8174025fee2efdec5514903064674d.png

// html
<div class="round_btn">圆圆的按钮</div>

// css
.round_btn {
    display: inline-block;
    line-height: 40px;
    padding: 0 40px;
    color: #fff;
    background: rgb(46, 245, 235);
    position: relative;
}
.round_btn::before,
.round_btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-style: solid;
}
.round_btn::before {
    top: -4px;
    border-width: 0 4px 4px;
    border-color: transparent transparent rgb(46, 245, 235);
}
.round_btn::after {
    bottom: -4px;
    border-width: 4px 4px 0;
    border-color: rgb(46, 245, 235) transparent transparent;
}

看起来是不是圆圆的呢，不仔细看是不是看不出来是什么形状，其实它的四个角是梯形的哦~~

avatar
文章
阅读
粉丝