Warren's

[toc]

  • user agent stylesheet 浏览器自动添加的最底层样式 直接覆盖样式即可

  • *：ie6，ie7可识别；_和-ie6可识别；

  • -webkit-appearance: none; 去掉type=number的默认样式

  • initial(设置为默认效果); inherit：继承父元素的该属性；

  • min-width width max-width 设置后，需要刷新页面才能生效，拖动页面无效

  • width:auto 和 100% 区别是auto包含了margin，padding不会出现滚动条

  • auto (1) 一侧定值，一侧auto，auto为剩余空间大小; (2) 两侧均是auto，平分剩余空间

  • <hr style='height:1px;background:#e0e0e0;border:0'> 实现一条横线

  • text-rendering CSS 属性定义浏览器渲染引擎如何渲染字体

  • 当为行内元素进行定位时，position:absolute，position:fixed。都会使原先的行内元素变为块级元素。

  • 当父级元素在使用 transform 时，position:fixed 会根据其进行定位而不是视口

  • position: sticky 当元素滚动出视口时，根据当前设置的 top 等进行固定

  • div的宽高等比缩放，用padding-bottom height:0 margin padding 百分比是以宽度来计算

  • user-select：none 禁止用户选择

  • ::before css3 语法 :before 用来支持IE8

  • visibility: hidden 只是隐藏，还是会占据其对应的宽高所在的区域

  • 8位16进制颜色 #ffffff80 最后两位表示不透明度，计算方式： (255*50%) 转16进制 常用不透明度： ff 不透明，e6 90%，cc 80, b3 79%, 99 60%, 80 50%，66 40%, 4d 30%, 33 20%, 1a 10%, 0d 5%, 00 完全透明

  • 对照表参考 不透明度： https://juejin.cn/post/6989558883815522335?from=search-suggest

  • img replace 元素 谷歌是不管有没有src属性，设置了宽高就会有一个边框显示，只能用一个小的透明图片占位去除边框;
    火狐是只要 src 没有值或设置了 alt值为空就不会占位，没有任何效果；

  • mix-blend-mode: 元素的内容应该与元素的直系父元素的内容和元素的背景如何混合 (darken混合模式,哪个颜色深就使用哪个颜色)

  • ::selection { background:blue; color:red;} 设置鼠标选中文本样式

  • 去掉 input type = number 的加减按钮 和修改 placeholder 颜色

input::-webkit-outer-spin-button(这个可以不写，都不支持了), input::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; }

textarea::-webkit-input-placeholder{ color: #cacaca; }
input::-webkit-input-placeholder{ color: #cacaca; }
  • vertical-align 的百分比值是相对于line-height计算的
  • counter

codepen 示例open in new window

.level1{ counter-reset: count1 3;} // 3 表示序号从4开始  count1 为任意命名
.level1::before{ content: counter(count1， upper-roman)"、"; counter-increment: count1;}
  • filter

filter:blur(90px) // 高斯模糊,ie不支持,其它都可，注意前缀。 filter:grayscale() html 标签添加该属性，可让页面变黑白（可以加一个固定结束时间判断，避免为了这个问题重复上线两次） filter: drop-shadow 为透明元素添加阴影效果不止于在图片四周加阴影 也会在图片中物体四周加阴影 filter: brightness(110%) saturate(140%); 让元素高亮 backdrop-filter: blur(10px); 毛玻璃效果用 效果看起来更好 先用ps将图片对比度等降低，以减小图片尺寸，在利用 filter 增大图片对比度，以此来实现图片资源优化

其它的一些滤镜效果参考 MDNopen in new window

阿里 icon-font 使用方法

可参考 vue-admin 项目的 welcome 页面

  1. 图标管理 -> 我的项目 -> 选中Symbol -> 查看在线链接 -> 点击生成在线js代码，引入到html文件 (如果不)
  2. 设置单个图标
<style>
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
<!-- 这里的href值一般是icon的名称 -->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shoutao"></use>
</svg>

变量

/* 以 -- 开头 */
/* 必须在一个规则集中,表示在该域下可用 一般是在 :root 中 全局使用； */
:root {  
  --some-name: red;
}
div{
  background: var(--some-name)  使用
}

伪类 伪元素

伪类(pseudo-classes)： 选择的文档之外的元素，如:

:root 匹配文档树的根元素。对于 HTML 来说，表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

伪元素(Pseudo-elements)：创建通常不存在于文档中的元素，如::before

CSS2 中伪类、伪元素都是以单冒号:表示，CSS2.1 后规定伪类用单冒号表示，伪元素用双冒号::表示，浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。对于 CSS2 之后所有新增的伪元素(如::selection)，应该采用双冒号的写法。但是因为兼容性问题，大部分还是用的单冒号。

选择器

优先级

!important > 内联 > ID > 类 > 类型

A id选择器的数量 B 类、属性、伪类选择器的数量 C 类型和伪元素的数量

  • ::before css3 语法 :before 用来支持IE8

  • 既不是 <div> 也不是 <span> 的元素 body :not(div):not(span)

  • div:nth-child(1|odd(奇)|even(偶)) 选择div, 该div 刚好是父元素的第1个子元素 即为选中

  • div:nth-of-type(1) 选择div，该div 属于父元素的 div 这类子元素的第1个 即为选中 按 div 这个类别来计数

  • span:last-of-type 选择父元素下的span标签的最后一个（只计span这一类）

  • span:last-child 选择父元素下的最后一个标签，如果是span就选中，不是就不选中

  • ~: .a(元素1)~.b(元素2),同一个父元素下的兄弟元素,不必是挨着的但是必须是元素1之后的。

  • [attribute~=value] :属性包含某个值的元素

  • .a+.b 相邻兄弟选择器 紧接在另一个元素后的元素 如果.a元素后紧跟的是.b即可选中。

  • .a > .b 选中.a的子一级的所有.b元素不包含孙一级。

a:link {color: #FF0000} 未访问时的状态
a:visited {color: #00FF00} 已访问过的状态
a:hover {color: #FF00FF} 鼠标移动到链接上时的状态
a:active {color: #0000FF} 鼠标按下去时的状态

  • :checked 可以作用于radio checkbox option

文本处理

  1. font：normal bold 12px/50px(行高可以写在这里) arial,sans-serif；合并写必须要有size和family

  2. @font-face{ font-family: myFontFamilyName; src: url()} 使用 p{ font-family: myFontFamilyName } 这里加载的字体，只有在有地方引用时才会去下载字体包

  3. line-height:10% 基于当前字体尺寸的百分比行间距

  • text-fill-color 文字填充颜色 同时设置了text-fill-color和color,color不会起作用

超出省略文本

单行：

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis

多行：(不能设置高度)

  text-overflow:ellipsis;
  display:-webkit-box; // display:flex 之前的版本
  -webkit-line-clamp:3;  // 依赖于box布局
  -webkit-box-orient: vertical;
  overflow: hidden;

word-spacing:10px 定义单词间的间距
letter-spacing:10px 定义每个字间的间距（与text-indent联用,否则起始位置缩进有问题）

换行

word-break :break-all;只对英文起作用，以字母作为换行依据
word-wrap :break-word; 只对英文起作用，以单词作为换行依据
white-space :pre-wrap; 只对中文起作用，强制换行
white-space :nowrap; 强制不换行，都起作用(对inner-block的标签也起作用) (文本不换行直到遇到< br/>;标签)

盒模型

标准和IE

W3C标准

width,height只包含内容content，不包含border和padding

IE

width,height包含border和padding

  • box-sizing
box-sizing: content-box; 默认，设置的 width 不包含padding和border宽度
box-sizing: border-box; 设置的 width 包含padding和border，不包含 margin

布局

BFC 块格式化上下文 (Block Formatting Context)

是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

相邻或者嵌套的元素，之间没有非空内容(Padding,Border分隔)的两个或更多盒元素的margin将会合并(都为正数，采用较大的值)

两个元素只有在同一BFC 内，才有可能发生垂直外边距的重叠，包括相邻元素、嵌套元素

如何创建BFC

float:left | float:right; 导致下边的元素上移 position:absolute | position:fixed display:inline-block 宽度丢失 | display:flex | display:table | table-cell、table-caption、inline-table、inline-flex、grid、inline-grid； overflow值不为visible：overflow:hidden; | overflow:auto、overflow:scroll; display:flow-root 新BFC创建新方式，没有副作用，注意兼容

  1. margin,padding用百分比时:都是相对于父元素的宽;
  2. left,top:百分比相对宽,高
  3. ul,ol都有一个padding和margin;li前面的样式不会占用宽度，它是占用ul的padding,但是只针对outside而言,对于inside要占用宽度,去掉li前面点用 list-style-type: none;
  • 右边固定宽度，左边自适应
    1. float 方式 html中，右边固定元素要在前，设置样式 float:right 自适应元素设置 margin-right: 固定宽度
    2. flex实现

flex布局

  • 子元素的 float clear vertical-aline 属性将失效。

  • 容器设置display:flex;(任何元素都可以设置，行内用display:inline-flex设置之后该容器将不会再占用一行);

父容器的6个属性：

.css {
  /* 1. 排列方向 row-reverse(反向) | column | column-reverse */
  flex-direction: row;     

  /* 2. (内部元素不换行且会改变元素宽度)|wrap(内部元素换行)|wrap-reverse(换行且第一行在下面) */
  flex-wrap: nowrap;   

  /* 3. 将 flex-direction 和 flex-wrap 组合为简写属性 flex-flow */
  flex-flow: row nowrap;  

  /* 4. 内部元素水平方向上的对齐方式 flex-start(|-- |)| flex-end(| --|) center(| -- |) space-between(|- -|) space-around(每个元素件的间隔相同，是与边距的两倍)*/  
  justify-content: flex-start;           
  
  /* 5. 垂直方向设置， stretch(项目被拉伸，适应容器)；center垂直居中 flex-start flex-end baseline(位于容器的基线上，第一行文字的基线对齐)   */
  align-items: stretch;

  /* 6. 与 align-items 相似 但是是针对 多行 容器生效 垂直方向上 */
  align-content: 
  /* stretch(占满，从上往下，顶部没有边距，往下项目间距相同)  
  flex-start(上对齐默认)|  
  flex-end(下对齐)  
  center(居中)  
  space-between(两端对齐，边距为0)  
  space-around(每个元素的间隔相同，是与边距的两倍)  */
}

子容器的6个属性

.css{
  order: 0; /* 越小越靠前； */
  flex-grow: 0; /* 项目的放大比例，为1时就等分，当有一个是2时该项目将会是其它的两倍 */
  flex-shrink: 1; /* 当空间不足时，都将等比例缩小, 0 时表示不收缩 */
  flex-basis: auto; /* px|% 设置宽度 */
  /* 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto) 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值 */
  flex: 1;
  /* 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。除了auto，其他都与align-items属性完全一致 */
  align-self: auto; 
}

一些用法

  • 当某个子元素设置了 flex:1 其它子元素没有设置，它将占据剩余的所有宽度
  1. 子元素两端对齐，并且垂直居中;父元素中：
.p{
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
}
  1. 水平方向滚动
.p{ /* 父 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow: auto hidden;
}
.c{ /* 子 */
  flex-shrink: 0;
}
  1. 垂直布局，上部高度不定，超出内容出现滑动条，底部固定高度且吸底
.parent { height: 100vh;display: flex;flex-direction: column; }
/* 这里也可以设置高度 height: calc(100vh - 80px) */
.top { flex: 1; overflow-y: auto; } 
.bottom { height: 80px; }
  1. 一行有三个元素，两边的元素各自给宽度，中间元素自适应
.left{ width: 100px }
.center{ width: 0; flex: 1; }
.right{ width: 100px }

box-shadow:水平(可为负)必须，垂直(可为负)必须，模糊距离值越大边沿越模糊，阴影扩展半径(就是元素外面的阴影的宽度值)值越大阴影面积越大为负值时阴影缩小，阴影颜色，将inset改为outset;

阴影的大小和被设置的元素大小一样；

box-shadow:可以用逗号隔开来设置不同的边的阴影，但是要注意设置水平和垂直位置。（不能分开写多个box-shadow来设置）

box-shadow:
-10px 0 10px red, 左边阴影
10px 0 10px yellow, 右边阴影
0 -10px 10px blue, 顶部阴影
0 0 10px 10px green; 底边阴影

如果只要一边阴影，就把扩展阴影设为负值。注意所有的边都是一个整体的矩形，意思是设置右边的阴影时 如果水平移动过多 会在左边出现

text-shadow: X 和 Y 方向的偏移量、模糊半径、颜色 多个阴影用逗号隔开

居中

  • 利用 calc() 计算
.ele{
  margin-left: 50px; 
  width: calc(100% - 100px); // 注意运算符号前后要加空格
}

vertical-aline:是依赖当前元素是inline-block才会有效果；该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
图片垂直居中：设置了高和行高，再加vertical-aline：middle；
当在设置verticla-aline:middle相当于强行的把父元素的行高(就等于设置vertical-aline的元素的高度,这个高度可以不定)给设置了（基线的底部就是行的底部）；后面再有元素设置verticla-aline:middle，就会把自身的垂直中点与中线对齐。

将文字放在底部:
在元素中多加一个标签，父元素为relative，子元素absolute，把子元素设置bottom：0；

margin:0 auto;居中
该元素不必有确定的px值也可以是%比,，并且不能是绝对定位。且该元素必须为块级元素。

元素垂直水平居中：
绝对定位,且设置了宽高： left:50%; right:50%; margin-left:-width/2; margin-top:-height/2;
没有设置宽高：使用 transform:translateX(%) 相对于元素本身宽高来缩进，替代 margin

垂直居中：

  1. 该方法适用于多行文本
<div style="display:table; width:100%;height: 100px;">
  <div style="display:table-cell; vertical-align:middle;">txt</div>
</div>
  1. 将元素高度和line-height设置为相同值；如果元素没有设置高度，也可以直接设置line-height来实现。
  2. 用padding：10px 0；来实现，高度就不定了。
  3. 用
<div style="height:20px;">  
    <div>内容< /div>  
</div>

在外部div上设置高度和用:before(在使用的元素的内部内容之前添加内容);会在内部div之前加上一个元素（content:.）;设置行高line-height，然后在父元素上设置font-size：0（让点不可见和消除元素之间的换行），再将内容的div元素设置为inline-block和加上vertical-aline:middle;或者是两个都设置vertical-aline:middle,就可以不用设置line-height；但要设置before的高度；

行内块级

inline-block 可设置宽高并可在同一行:元素有input select;当使用行内元素时注意html中是否有换行或是空格，会被显示在页面上。

inline-block，是基于baseline对齐的，大小不一会导致上下不齐，所以设置的时候最好设置vertical-align属性,top、bottom、middle都可

inline:水平方向padding margin有效

宽高

宽高设置为百分比，会是根据父元素是否已确定了高度，如果是即可以用；
当涉及到body为父元素时，要把body和html的宽高都设置为100%，单设一个不起作用。
但是当设置了position：absolute/fixed的是会起作用的；

在页面上加载过一次该图片后，无论你是在当前页面再次使用该图片还是在该站点的其它页面使用，都会调用缓存。

滑动条

overflow:hidden;auto（只会出现宽或高的滑动条）;scroll(会出现宽和高的滑动条)前提是要有宽高；

text-overflow:ellipsis;（不换行超出部分隐藏且以省略号形式出现）；clip(修剪文本)；

去掉滑动条： 选择器::-webkit-scrollbar { display: none; }

background

filter:blur(90px) // 高斯模糊,ie不支持,其它都可，注意前缀。

filter:grayscale() html 标签添加该属性，可让页面变黑白

其它的一些滤镜效果参考 MDNopen in new window

background:hsl(色调hue，饱和度saturation，亮度luminance)

  • 色调：0-360 红 黄 绿 青 蓝 洋 //循环
  • 饱和度：0-100% //灰度到全包和
  • 亮度：0-100% //暗到亮
  • 还有hsla() //多了一个透明度
background：color image repeat fixed position/size  
-size: cover(图片不会按比例缩放来覆盖当前元素背景) contain(图片会按比例缩放直到宽或高达到当前元素的宽或高) content-box(背景图片放在哪里)  
-origin: border/ 
clip: border-box/padding-box/content-box/text; 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面，背景从border/padding/content开始，背景图片最多从padding开始。  text: 背景被裁剪成文字的前景色
background-attachment: scroll默认 | fixed滚动轴背景图片不会移动

background: url() no-repeat left/50% 50%, url() no-repeat right/50% 50%;
对于多重背景，写在前的在上面；

渐变 background-image: linear-gradient(blue, pink); 默认上到下

background-image: 
linear-gradient(to right, red 起点百分比, green 50%, blue 终点百分比);
起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值

(to right,red 10%, green 50%, blue 90%)
0-10% 是纯红色  10%-50% 是红色到绿色的渐变 50% 处是纯绿色  50%-90% 是绿色到蓝色的渐变 90%-100% 是纯蓝色

(to right,red 30%, 颜色过度中点, green 50%, 颜色过度中点, blue 70%)
起点、终点、中点  有两个的值一样，颜色过度会是一条硬线

(to right,#ffffff10 5%, #ffffff50 10%, #ffffff50 90%, #ffffff10 95%)
两端渐变  中间呈现文字  注意调整百分比控制渐变和透明的比例

背景马赛克

/* 多图片用逗号隔开 */
background-image: 
  linear-gradient(45deg, #cecdcd40, #cecdcd40),
  linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),
  linear-gradient(45deg, #eee 25%, #fff 0, #fff 75%, #eee 0, #eee);
/* 注意size和position的二倍关系 */
background-size: 20px 20px;
/* 只处理第三个 linear的位置 */
background-position: 0 0, 0 0, 10px 10px;

视口单位适配布局

视口

  • 桌面端：浏览器可视区域
  • 移动端：
    • Layout Viewport（布局视口）指的是该视口
    • Visual Viewport（视觉视口）
    • Ideal Viewport（理想视口）

css3视口单位

兼容性： 主流版本都支持，只有ie 的10，11 不持支 vmax

  • vm：1vw 等于视口宽度的1%（永远指水平方向）
  • vh: 1vh 等于视口高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个
Last Updated:
Contributors: Warren