七个CSS相关的小技巧归纳

最新推荐文章于 2023-12-23 11:27:03 发布

治愈系的江予夺

最新推荐文章于 2023-12-23 11:27:03 发布

阅读量454

点赞数

分类专栏： HTML+CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/Alanrnzearn/article/details/114264982

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、writing-mode 属性控制垂直排版

一个CSS属性，常用于控制文本垂直排版，通常用于古诗古文。
类似于float属性的用法，但是其语法学习要比其他的css属性高，因为前期的兼容问题到后期解决，慢慢的他便有了两套语法。

一个是IE私有属性，一个是CSS3规范属性。

css3语法

/* 关键字值 */
writing-mode: horizontal-tb;    /* 默认值 */
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

horizontal-tb对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。
vertical-rl表示文本是垂直方向(vertical)展示，然后阅读的顺序是从右往左(rl:right-left)，跟我们古诗的阅读顺序一致。
vertical-lr表示文本是垂直方向(vertical)展示，然后阅读的顺序还是默认的从左往右(lr:left-right)，也就是仅仅是水平变垂直。
sideways-rl对于左对齐(ltr)脚本，内容从下到上垂直流动。对于右对齐(rtr)脚本，内容从上到下垂直流动。所有字形（即使是垂直脚本中的字形）都朝向右侧。
sideways-lr对于左对齐(ltr)脚本，内容从上到下垂直流动。对于右对齐(rtr)脚本，内容从下到上垂直流动。所有字形（即使是垂直脚本中的字形）都朝向左侧。

IE语法

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

tb(top-botttom) lr(left-right)

关于writing-mode属性的一些说明:

相同的 writing-mode 属性值并不会累加，即在父子元素都被设置到writing-mode: tb-rl ,但是实际渲染却并不会重复，只会渲染一次。
Chrome跟Opera等浏览器能识别老IE属性值，但并不会渲染效果。
可用于不需要设置宽高的无定位居中显示
改变文档垂直流方向进行天然90°旋转。

示例（垂直排版 + 天然旋转）：

垂直排版

<!-- HTML 代码部分 -->
<div class="verticle-mode">
  <h4>静夜思</h4>
  <p>床前明月光，<br>疑是地上霜。<br>不举头望明月，<br>低头思故乡。</p>
</div>

<!-- css 代码部分 -->
<style>
  .verticle-mode {
  writing-mode: tb-lr;
  *writing-mode: tb-lr;
  -webkit-writing-mode: vertical-lr;      
  writing-mode: vertical-lr;
  margin: auto;
} 
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {
  *width: 120px;
}
.verticle-mode h4,
.verticle-mode p {
  *display: inline;
  *writing-mode: tb-lr;
}
.verticle-mode h4 {
  *float: left;
}
</style>

天然旋转

<div class="next">
  ——> 箭头朝右
  <span class="arrow">——></span> 箭头转向
</div>

<!-- css 代码部分 -->
<style>
.arrow{
  writing-mode: tb-rl;
  *writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;      
  writing-mode: vertical-rl;
}
</style>

二、:not() 伪类选择器选择特定元素

使用:not()伪类选择器用来匹配不符合一组选择器的元素，由于它的作用是防止特定的元素被选中，它也被称为反选伪类。

例：在对某div底下的多个span设置一个边框，但是第3n个不需要设置边框样式。

平常写法：

.not span{
  border: 1px solid red;
}
.not span:nth-child(3n){
  border: none;
}

使用:not()选择器后：

.not span:not(:nth-child(3n)){
  border: 1px solid red;
}

能实现同样目的的还有 .not span + span 和 .not span:first-child ~ span,但推荐使用 :not() ，因为这样结构会更加清晰，具有可读性

关于:not()的一些说明：

:not() 伪类不能被嵌套，例如 :not(:not(...)) 这样的写法是无效的。同时，由于伪元素不是简单的选择器，他们不能被当作 :not() 中的参数，形如 :not(p::before) 这样的选择器并不会执行。
这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 <table> 内部的 <a> 上, 因为 <tr>将会被 :not(table) 这部分选择器匹配。
可以利用这个伪类写一个完全没有用处的选择器。例如，:not(*)匹配任何非元素的元素，因此，这个规则将永远不会被应用。
可以利用这个伪类提高规则的优先级。例如，#foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。:not(.foo) 将匹配任何非 .foo 的元素，包括 <html> 和 <body>。

示例：

<!-- HTML 代码部分 -->
<div class="not">
  <span>啊啊啊啊啊</span>
  <span>不不不不不</span>
  <span>冲冲冲冲冲</span>
  <span>顶顶顶顶顶</span>
  <span>嗯嗯嗯嗯嗯</span>
  <span>发发发发发</span>
</div>

<!-- css 代码部分 -->
<style>
.verticle-mode {
  writing-mode: tb-lr;
  *writing-mode: tb-lr;
  -webkit-writing-mode: vertical-lr;      
  writing-mode: vertical-lr;
  margin: auto;
} 
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {
  *width: 120px;
}
.verticle-mode h4,
.verticle-mode p {
  *display: inline;
  *writing-mode: tb-lr;
}
.verticle-mode h4 {
  *float: left;
}
</style>

三、:invalid & :required & :optional & :valid 多个伪类选择器实现自定义原生表单校验样式

:invalid CSS 伪类表示任意内容未通过验证的 <input> 或其他 <form> 元素

/* 可选定任意无效的`<input>`*/
input:invalid {
  background-color: pink;
}

这个伪类对于突出显示用户的字段错误非常有用。

默认情况下，火狐浏览器不支持应用:invalid伪类设置的样式。但是，可以通过使用:-moz-ui-invalid伪类的样式（使用box-shadow 属性设置红色发光边框）来达到类似的效果，它可以被应用在:invalid伪类的子集中。
若一组单选钮被设定为必须选定一个，在该组中没有按钮被选中的情况，:invalid伪类被应用到该组中的所有按钮。（单选钮组按照name属性共享相同值。）

:required CSS 伪类表示任意设置了required属性的<input>，<select>, 或 <textarea>元素。这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。
:optional CSS 伪类表示任意没有required属性的 <input>，<select> 或 <textarea> 元素使用它

它允许表单容易的展示可选字段并且渲染其外观。
当为必填字段设置外观，请使用 :required伪类

:valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
组合使用示例：

<!-- HTML 代码部分 -->
<form>
  <label for="name">姓名:</label>
  <input type="name" class="name" />
  <br/><br/>
  <label for="password">密码:</label>
  <input type="password" class="password" required/>
  <br/><br/>
  <label for="email">邮箱:</label>
  <input type="email" class="email"/>
</form>

<!-- css 代码部分 -->

input:invalid {
  background-color: red;
}

form:invalid {
  padding: 10px;
  border: 3px solid red;
}

input:valid {
  background-color: #fcf8f8;
}

form:valid {
  border: 3px solid #fcf8f8;
}
input:required {
  border-color: #fd7f7f;
  border-width: 3px;
}
input:required:invalid {
  border-color: #ff0303;
}
input:optional{
  border-color: #2bc3ff;
}

四、:target 伪类选择器控制目标文件样式

为了辅助标识那些指向文档特定部分链接的目标, CSS3 选择器引入了 :target 伪类，:target 伪类用来指定那些包含片段标识符的 URL 的目标元素样式。
想修改 URL 指向的某元素，但是又不想把样式应用到任何其它同类型的元素，那么就可以用这个选择器。
注： 如果想应用所有目标元素，那么可以使用通用选择器。
示例：

<!-- HTML 代码部分 -->
<div class="text">
    <h1 id="one">啊啊啊啊啊</h1>
    <h2 id="two">不不不不不</h2>
    <h3 id="three">冲冲冲冲冲</h3>
    <h4 id="four">顶顶顶顶顶</h4>
    <h5 id="five">嗯嗯嗯嗯嗯</h5>
    <h6 id="six">发发发发发</h6>
  </div>
  <div>
    <a href="#one">h111111111111</a>
    <a href="#two">h22222222222</a>
    <a href="#three">h3333333333</a>
    <a href="#four">h444444444444</a>
    <a href="#five">h555555555555</a>
    <a href="#six">h6666666666666</a>
  </div>

/* CSS 代码部分 */
#one:target{
  border: 3px solid #333333;
}
#two:target{
  border: 3px solid #e73434;
}
#three:target{
  color: #37ca0a;
}
#four:target{
  color: rgb(177, 6, 177);
}
#five:target{
  background-color: rgb(6, 174, 252);
}
#six:target{
  background-color: rgb(236, 252, 6);
}

五、object-fit 属性控制替换内容尺寸

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
属性值：

fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial 设置为默认值。
inherit 从该元素的父元素继承属性。

示例：

<!-- HTML 代码部分 -->
<div class="fit">
  <img src="./1.jpeg" alt="">
</div>

/* CSS 代码部分 */
.fit img{
  border: none;
  width: 200px;
  height: 200px;
  /* object-fit: cover; */
  /* object-fit: contain; */
  /* object-fit: fill; */
  object-fit: scale-down;
  /* object-fit: initial; */
  /* object-fit: inherit; */
  /* object-fit: none; */
}

六、font-variant-east-asian 属性实现东亚符号交替显示

font-variant-east-asian CSS属性控制东亚脚本(如日文和中文)的交替符号的使用。

normal 该关键字代表停用此字体。
ruby 这个关键字强制使用特殊字形作为ruby字符。由于这些字体通常较小，所以字体创作者经常设计特定的形式，通常略微更大胆以提高对比度。该关键字对应于OpenType (可缩放字型电脑字体类型) 值ruby。
proportional-width 激活数字不完全相同的数据集。它对应于OpenType (可缩放字型电脑字体类型) 值pwid。
full-width 激活数字不完全相同的数据集，使他们在表格中很容易对齐就像。它对应于OpenType (可缩放字型电脑字体类型) 值fwid。
initial 设置为默认值。
inherit 从该元素的父元素继承属性。
还有部分例如 jis78 jis83 jis90 jis04等是用来定义字符集，大部分是为日文专用。

关于 font-variant-east-asian 的一些说明

font-variant-east-asian在 IE、Edge和Safari（PC端和手机版）都不支持。
使用这个属性后改变的只是一个视觉呈现效果，实际上依旧是原始字符。

示例：

<!-- HTML 代码部分 -->
<table>
    <thead></thead>
    <tbody style="border:0;">
      <tr>
        <th>normal/jis78:</th>
        <td>麹町</td>
        <td class="jis78">麹町</td>
      </tr>
      <tr>
        <th>normal/ruby:</th>
        <td>しんかんせん</td>
        <td class="ruby">しんかんせん</td>
      </tr>
      <tr>
        <th>normal/traditional:</th>
        <td>大学</td>
        <td class="traditional">大学</td>
      </tr>
    </tbody>
</table>

/* CSS 代码部分 */
td{
  font-family:"Yu Gothic";
  font-size:20px;
}
th{
  color:grey;
  padding-right:10px;
}

.ruby {
  font-variant-east-asian: ruby;
}

.jis78 {
  font-variant-east-asian: jis78;
}

.traditional{
  font-variant-east-asian: traditional;
}

七、overflow-anchor 属性

overflow-anchor 是CSS属性提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移。

默认情况下，在任何支持滚动锚定行为的浏览器中都将其启用。因此，仅当在文档或文档的一部分中遇到滚动锚定问题并且需要关闭行为时，才需要更改此属性的值。

滚动锚定是一种浏览器特性，它试图阻止一种常见的情况，在DOM完全加载之前，你可以向下滚动一个网页，当它完成时，任何加载到当前位置的元素都会把你推到页面的下方。

.section {
  overflow-anchor: [auto | none];
}

auto (默认)：滚动事件使页面高度或宽度发生了改变，滚动条不会因此而改变指向的内容，而允许滚动锚定。
none：滚动事件使页面高度或宽度发生了改变，滚动条指向的内容也会随之而变。禁止滚动锚定。

示例：

<!-- css 代码部分 -->
<、style>
#scroller * {
  overflow-anchor: none;
}

#anchor {
  overflow-anchor: auto;
  height: 1px;
}

html {
  font-family: system-ui, sans-serif;
}
body {
  background-color: #ff7fb0;
}

.message {
  padding:20px;
  border-radius: 1em;
  margin:20px;
  line-height: 18px;
  background-color: white;
}
</、style>

<!-- HTML 代码部分 -->
<div id="scroller">
    <div id="anchor"></div>
    <p>
      我踏遍千山万水
      赏游这大江南北
      英雄皆为其沉醉
      天下装胸怀间
      登楼台 瞰四野
      上九天 揽日月
      细数景象洋洋大观
      下江河 饮清凉
      游鳌背
      素纸勾勒出了画卷
      山水画卷
      山水画卷
      小桥伴流水 春风吹雁来
      垂柳亦蓬茸 嗅得杏花开
      萦绕在 千里外
      是我的心心念念
      盼得那月儿圆
      万家灯火点亮这一副山水画卷
      展开日月年 一眼尽览
      光阴挥毫洒墨
      书法江山
      大好河山
      山水画卷
      壮丽映满眼里
      梦似骏马扬蹄
      我放歌穿越星际
      自成一派的旋律
      游天地展开双翼
      千万里日新月异
      风光醉 好诗意
      纵横于磅礴大气
      大气 大气
      纵横于磅礴大气
      山水画卷
    </p>
  </div>
  
<!-- js 代码部分 -->
  <script>
    let messages = [
      '每次跌倒都是胜利的倒数',
      '每条歧途都是成长的学步',
      '每道伤痕都是迷彩的纹路',
      '每滴眼泪都是时间的礼物',
      '我要奔跑，我要追赶太阳',
      '太阳从不落下，只在前方重新燃亮',
      '我要呼喊，我要冲向海洋',
      '海洋一直等待，等待我去乘风破浪',
      'Hey ye hey ye hey ye oh oh',
      '每次跌倒都是胜利的倒数',
      '每条歧途都是成长的学步',
      '每道伤痕都是迷彩的纹路',
      '每滴眼泪都是时间的礼物',
      '战斗的人，不会感到孤独',
      '迎着风雨独舞，不信前方没有路',
      '咽下辛苦，守护这片热土',
      '心跳就是战鼓，对自己说绝不认输',
      'Hey ye hey ye hey ye oh oh',
      '纷乱远方，听一听我的愿望',
      '无情现实，看一看我的倔强',
      '冷漠的人，请记住我的脸庞',
      '世界会懂，年轻不屈的信仰',
      'Hey ye hey ye hey ye oh oh',
      '我要奔跑，我要追赶太阳',
      '太阳从不落下，只在前方重新燃亮',
      '我要呼喊，我要冲向海洋',
      '海洋一直等待，等待我去乘风破浪',
      '每次跌倒都是胜利的倒数',
      '每条歧途都是成长的学步',
      '每道伤痕都是迷彩的纹路',
      '每滴眼泪都是时间的礼物',
      '每次跌倒都是胜利的倒数',
      '每条歧途都是成长的学步',
      '每道伤痕都是迷彩的纹路',
      '每滴眼泪都是时间的礼物',
      '绝不认输'
    ]
    let scroller = document.querySelector('#scroller');
    let anchor = document.querySelector('#anchor');
    
    function randomMessage() {
      return messages[(Math.random() * messages.length) | 0];
    }

    function appendChild() {
      let msg = document.createElement('div');
      msg.className = 'message';
      msg.innerText = randomMessage();
      scroller.insertBefore(msg, anchor);
    }
    setInterval(appendChild, 1000);

  </script>

治愈系的江予夺

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
七个CSS相关的小技巧归纳

一、writing-mode 属性控制垂直排版一个CSS属性，常用于控制文本垂直排版，通常用于古诗古文。类似于float属性的用法，但是其语法学习要比其他的css属性高，因为前期的兼容问题到后期解决，慢慢的他便有了两套语法。一个是IE私有属性，一个是CSS3规范属性。css3语法/* 关键字值 */writing-mode: horizontal-tb; /* 默认值 */writing-mode: vertical-rl;writing-mode: vertical-lr;
复制链接

扫一扫