CSS技巧记录总结

发表于 | 更新于 | 评论数： | 阅读次数：

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。下面记录一下CSS的“奇技淫巧”。

使用伪元素创建向右箭头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.targetDiv::after{
  content: " ";
  display: inline-block;
  height: 8px;
  width: 8px;
  border-width: 2px 2px 0 0;
  border-color: #b2b2b2;
  border-style: solid;
  transform: matrix(.71,.71,-.71,.71,0,0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left:90%;
  right: 0;  
}

CSS3 框大小

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

但是，如果在元素上设置了CSS3 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也将包含在 width 和 height 中。

CSS writing-mode 文字竖排

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法格式如下：

1
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
  • horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
  • vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
  • vertical-lr：垂直方向内内容从上到下，水平方向从左到右
  • sideways-rl：内容垂直方向从上到下排列
  • sideways-lr：内容垂直方向从下到上排列

CSS 箭头和三角形

CSS画箭头和三角形都是利用div标签的边框属性，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 三角形
<div class="box"></div>
// css代码
.box {
  width: 0;
  height: 0;
  border: 100px solid red;
  border-color: red transparent transparent transparent;
}

// 箭头
<div class="box"></div>
// css代码
.box {
      margin-top: 50px;
      width: 100px;
      height: 100px;
      border-top: 10px solid red;
      border-right: 10px solid red;
      transform: rotate(45deg);
}

height:100%不生效问题

浏览器按照从上到下，从外到内的顺序渲染DOM内容。因此当父元素没有设置高度值或者设为绝对定位，则子元素的height:100%不会不生效。

div的高度是由什么决定？是由它文档流中元素的高度的总和。

什么是文档流(Normal Flow)：指的是元素排版布局过程中，内联元素会默认自动从左往右，块级元素从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

脱离文档流(常见):

  • float:left;
  • position: absolute;
  • position:fixed;

单行缩略..以及多行缩略

html单行缩略方法:

1
2
3
4
5
.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

CSS尺寸单位 % px em rem

在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位有：em、ex、ch、rem；视窗相对单位有：vw、vh、vmin、vmax几种。绝对长度单位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

  • px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；
  • em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位，可以变动。一般浏览器字体大小默认为16px，则2em == 32px；
  • rem：它是描述相对于当前根元素字体尺寸，除了描述对象与em不同其余都和em一样。
  • %： 百分比，它是一个更纯粹的相对长度单位，可以变动。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。

CSS使网站黑白灰效果的代码

使用如下CSS即可：

1
2
3
4
5
6
7
8
html {
       filter: grayscale(100%); 
       -webkit-filter: grayscale(100%); 
       -moz-filter: grayscale(100%); 
       -ms-filter: grayscale(100%); 
       -o-filter: grayscale(100%); 
       -webkit-filter: grayscale(1);
   }

代码释义：filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。不过这个滤镜对于 Chrome 和 Safari 浏览器是无效的，所以下面会有一行 -webkit-filter: grayscale(100%); 这个样式是专属于使用 webkit 内核的浏览器的，意思和 filter: gray; 差不多，只是写法不同罢了。

CSS打印时隐藏输入框占位符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media print {
  ::-webkit-input-placeholder { /* WebKit browsers */
      color: transparent;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: transparent;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: transparent;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: transparent;
  }
}

CSS float属性

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷。

清除浮动的影响的方法有：

  • 设置父布局的高度

设置父标签合适的高度，前提必须确定子布局的高度，来计算父布局的合适高度，包裹住子布局。

  • 受影响的元素加clear属性

给受影响的div加clear，清除浮动的影响

  • overflow清除浮动

父级标签的样式里面加: overflow:hidden;

  • 空div法

在最后一个浮动的盒子的后面，新添加一个标签。然后设置clear清除浮动。

  • 伪对象法

为父标签添加伪类After,设置空的内容，并且使用clear:both;

CSS width属性

css的三大特性分别是 继承性，层叠性，和优先级。

css的继承性指的被包在内部的标签拥有外部标签的样式性，子元素可以继承父元素的属性。但也不是所有的css属性都有继承性的。

  • 只有块元素才可以默认“继承”其父元素的width.
  • 浮动元素和定位元素也是不默认（不自动）“继承”其父元素宽度的。

参考链接

  1. CSS（层叠样式表）,by mozilla.
  2. CSS3 框大小,by runoob.com.
  3. 不让padding影响元素的宽度,by DecemberCafe.
  4. 改变CSS世界纵横规则的writing-mode属性,by 张鑫旭.
  5. 重新认识Pixel、DPI / PPI 以及像素密度,by Leon.
  6. CSS画三角形，箭头,by 麦西的西.
  7. 如何用 CSS 画三角形和箭头,by 前端技术.
  8. 深入理解CSS系列（二）：为什么height:100%不生效？,by ChessZhang.
  9. height：100%失效解决办法,by 当然我没扯淡.
  10. css之单行缩略..以及多行缩略,by 秋天的故事.
  11. CSS尺寸单位 % px em rem 详解,by HDWK.
  12. 如何修改placeholder样式,by 风火星辰.
  13. 一行 CSS 代码实现整个网站网页变黑白灰的效果,by 老唐.
  14. CSS hide placeholder on print [duplicate],by stackoverflow.
  15. 深入理解float浮动属性,by 知乎用户1sIGTn.
  16. css的继承之width属性（容易忽略）,by 秋天的鱼.