CSS进阶知识

CSS进阶知识补充

background

语法

background:bg-color bg-image bg-repeat bg-attachment bg-position/bg-size;

eg: background: red url('./background.png') no-repeat fixed center/cover;

值	说明	CSS
background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像	1

opacity、visibility、display

介绍	opacity	visibility	display
作用	设置透明度	设置元素是否可见	设置元素的显示类型
是否占据页面空间	是	是	否
是否影响子元素	是	否	是
是否可触发绑定事件	是	否	否
是否产生回流（reflow）	否	否	是
是否产生重绘（repaint）	不一定	是	是
是否支持transition	是	是	否（还会让transition失效）

注意:

visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性 如果遮挡住其他元素，其他的元素就不会触发事件了。 

回流：当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘：当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。

回流必将引起重绘，而重绘不一定会引起回流。

css可继承与不可继承的属性

无继承性的属性

1. display：规定元素的显示类型

2. 文本属性：

• vertical-align：垂直文本对齐

• text-decoration：规定添加到文本的装饰

• text-shadow：文本阴影效果

• white-space：空白符的处理

• unicode-bidi：设置文本的方向

3. 盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6. 生成内容属性：content、counter-reset、counter-increment

7. 轮廓样式属性：outline-style、outline-width、outline-color、outline

8. 页面样式属性：size、page-break-before、page-break-after

9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性

1. 字体系列属性

• font：组合字体

• font-family：规定元素的字体系列

• font-weight：设置字体的粗细

• font-size：设置字体的尺寸

• font-style：定义字体的风格

• font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

• font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

• font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2. 文本系列属性

• text-indent：文本缩进

• text-align：文本水平对齐

• line-height：行高

• word-spacing：增加或减少单词间的空白（即字间隔）

• letter-spacing：增加或减少字符间的空白（字符间距）

• text-transform：控制文本大小写

• direction：规定文本的书写方向

• color：文本颜色

3. 元素可见性：visibility

4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6. 生成内容属性：quotes

7. 光标属性：cursor

8. 页面样式属性：page、page-break-inside、windows、orphans

9. 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性

1. 元素可见性：visibility

2. 光标属性：cursor

内联元素可以继承的属性

1. 字体系列属性

2. 除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

1. text-indent、text-align

浏览器默认属性值问题

  由于各浏览器对于HTML标签都存在预设值，所以为了让我们设计的页面在不同的浏览器上显示效果相同，就需要用resetcss。

  世界知名的 CSS 大师「Eric A. Meyer」整理出一个很棒的解决方法，针对 CSS 语法最容易出问题的部份。例如 margin 外间距，各大浏览器最常发生不一致的状况，写成了一个 Reset CSS 档案，将 margin  全部统一归 0 ，其他部份，文字大小和行高也全部统成一样的大小 … 等，只要挂上这一段「Reset CSS」语法，就可以让所有的各大浏览器乖乖听话，呈现一样的结果，CSS 的大同世界就在这里啊，哈哈哈哈哈！

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   doubleam get 20191126
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

一些简单样式汇总

cursor样式

list-style-type样式

border样式

checkbox与radio与文字水平对齐

/* 其实很简单，只需要给对齐的元素都添加vertical-align:middle;属性即可。 */

<label>
<input type="checkbox" value="A" style="vertical-align:middle;">
<span style="vertical-align:middle;">B</span>
</label>

图片等比例缩放、翻转等

图片等比例缩放

在img标签里面只设置宽，不设置高，图片就会等比例缩放。

也可以使用css属性调整图片显示位置，或者使用background来调整亦可。

object-fit: cover;
object-position: center;

使用 padding 解决

如果原始图片大小是 800 * 250，即宽高比为 800 / 250 = 3.2。
我们可以给图片的父元素设置 padding 来保持图片本身的宽高比。
当 img 的宽度为 100% 时，那么父元素的 padding-bottom/top(任意一个均可) 的值为 100%(图片想要设置的宽度) / 3.2(图片的原始宽高比) = 31.25%。
如果你想把 img 的宽度设为 50% 的话，那么 padding-bottom/top 的值为 50% / 3.2 = 15.625%。
这样设置后，无论页面如何变动，图片的比例都不会出问题。

图片翻转

/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}

/*水平翻转*/
.flipx { transform: rotateY(180deg); }

/*垂直翻转*/
.flipy { transform: rotateX(180deg); }

水平居中的方式

text-align:center;          //文本水平居中

/* 自身 */
margin:0 auto;              //块级元素水平居中

/* 父元素 */
.flex-center{               //使用flex
  display:flex;
  justify-content:center;
}

/* 父元素 */
.flex-center{               //使用flex
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* 父元素 */
.flex-center{               //使用flex
  display:flex;
  flex-direction:column;
}
.flex-center>div{
  align-self:center;
}

父元素相对定位 子元素绝对定位 然后设置 left:50%; margin-left:子元素宽度的一半;（已知宽高）

/* 自身 */
.center{
  position:absolute;
  left: 0;
  right: 0;
  margin: auto;
}

/* 自身 */
.center{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
}

垂直居中的方式

paddingtop=paddingbottom; or line-height=height;    //文本垂直居中

/* 父元素 */
.flex-center{                                       //使用flex
  display:flex;
  align-items:center;
}

/* 父元素 */
.flex-center{                                       //使用flex
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* 父元素 */
.flex-center{                                       //使用flex
  display:flex;
  flex-direction:row;
}
.flex-center>div{
  align-self:center;
}

父元素相对定位 子元素绝对定位 然后设置 top:50%; margin-top:子元素高度的一半;（已知宽高）

/* 自身 */
.center{
  position:absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* 自身 */
.center{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

/* 父元素 */
.center{
  display: table-cell;
  vertical-align: middle;
}
/* 也可用于多行文本垂直居中 */

水平垂直居中

<!-- 方法1：绝对定位+margin:auto; -->
.child{
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

<!-- 方法2：绝对定位+负margin（已知宽高） -->
.child{
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-100px;              //自身的宽度一半
  margin-top:-100px;               //自身高度的一半
}

<!-- 方法3：绝对定位+transform -->
.child{
  position:absolute;
  left:50%;                        //定位父级的50%
  top:50%;
  transform: translate(-50%,-50%); //自己的50%
}

<!-- 方法4：flex布局 -->
/* 父元素只要三句话就可以实现不定宽高水平垂直居中。 */
.parent{
  height:600px;
  display:flex;
  //flex-direction:row;元素水平排列，垂直排列为column。row为默认值所以可以不写。
  justify-content:center;         //子元素水平居中
  align-items:center;             //子元素垂直居中
}

<!-- 方法5：table-cell实现居中 -->
.parent{
  display:table-cell;
  vertical-align: middle;
}
.child{
  margin: 0 auto;                  //子元素margin:auto;或者margin:0 auto;均可
}
/* 也可用于多行文本垂直居中，直接编写文本即可。 */

CSS单行、多行文本溢出/换行

单行溢出

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行溢出

.text-truncate-multiple {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* 只适用于 webkit 内核浏览器，其他浏览器也借助伪类、绝对定位或js来实现此效果。 */

完美换行

.text-wrap {
  word-break: keep-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}
/* 腾讯 Alloyteam 推荐 */

CSS Overflow

overflow: auto|visible|hidden|scroll|inherit;

• auto 自动产生滚动条，哪个方向超出了就出现滚动条。
• visible 不显示滚动条，但是超出部分会显示。
• hidden 不显示滚动条，超出部分不会显示。
• scroll 显示滚动条，就算某个方向没超出也会显示。
• inherit 继承父元素的设置

CSS动画基本语法

transform

transform: translate(x, y);      //偏移
x: X 轴偏移量，可为百分比。
y: Y 轴偏移量，可为百分比。

transform: rotate(ndeg);         //旋转
预设以元素中心为旋转中心点
正数值为顺时钟旋转
负数值为逆时钟旋转
需加 deg 单位

transform-origin: x y;           //旋转中心点
x: X 轴偏移量，可为百分比、left、center、right。
y: Y 轴偏移量，可为百分比、top、center、bottom。

transform: scale(w-rate, h-rate);//缩放
w-rate: 宽度缩放倍率
h-rate: 高度缩放倍率

transform: skew(xdeg, ydeg);     //扭转
x: 沿着 x 轴扭转
y: 沿着 y 轴扭转
需加 deg 单位
transform: skewX(xdeg);          //沿着 x 轴扭转
transform: skewY(ydeg);          //沿着 y 轴扭转

transform: translateX(x);        //x 轴偏移
transform: translateY(y);        //y 轴偏移
transform: translateZ(z);        //z 轴偏移
不可为百分比
需搭配 perspective
transform: translate3d(x, y, z); //xyz 偏移

transform: rotateX(xdeg);        //沿着 x 轴旋转
transform: rotateY(ydeg);        //沿着 y 轴旋转
transform: rotateZ(zdeg);        //沿着 z 轴旋转
transform: rotate3d(x, y, z, adeg);
x, y, z: 0 或 1
0 表不沿着该轴旋转, 1 表沿着该轴旋转。
a: 旋转角度

transform: scaleX(rate);         //沿着 x 轴缩放 (胖瘦)
transform: scaleY(rate);         //沿着 y 轴缩放 (高矮)
transform: scaleZ(rate);         //沿着 z 轴缩放
须搭配其他变形
transform: scale3d(x, y, z);

transition

transition                       //转场动画
transition-property              //属性名称
all (default);
transition-duration              //效果持续时间 (单位 s, ms)
0s (default，不会有效果)
transition-timing-function       //加速度曲线
linear                    //均速
ease                      //先加速后减速 (default)
ease-in                   //加速
ease-out                  //减速
ease-in-out               //平缓的先加速后减速
transition-delay          //延迟播放 (单位 s, ms)

animation

/* from and to */
@keyframes animation-name{
    from{
        /* 起始样式 (相当于 0%) */
    }
    to{
        /* 结束样式 (相当于 100%) */
    }
}

/* 进度百分比 */
@keyframes animation-name{
    0%{
        /* 起始样式 (相当于 from) */
    }
    50%{
        /* 50% 样式 */
    }
    100%{
        /* 结束样式 (相当于 to) */
    }
}

animation                             //动画
animation-name                        //动画名称
animation-duration                    //动画持续时间 (单位 s, ms)
animation-timing-function             //加速度曲线
linear                      //均速
ease                        //先加速后减速 (default)
ease-in                     //加速
ease-out                    //减速
ease-in-out                 //平缓的先加速后减速

animation-delay                       //延迟播放
animation-iteration-count             //播放次数 (infinite: 无限循环)
animation-direction                   //播放方向
normal                      //0% ~ 100% (default)
reverse                     //100% ~ 0%
alternate                   //0% ~ 100%，100% ~ 0% 
alternate-reverse           //100% ~ 0%，0% ~ 100%
------------------------------
animation-fill-mode                   //播放前后的状态
none                        //回到未播放动画效果前 (default)
forwards                    //停在最后一个状态上
backwards                   //停在第一个状态上
both                        //视 animation-direction
animation-play-state        //播放或暂停
running                     //播放 (default)
paused                      //暂停

BFC

BFC 块格式化上下文（Block Formatting Context） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

设计哲学

RWD

常用绝对单位
px
pt

常用相对单位
% (以父节点为基准的百分比)
em (预设 16px)
rem (root em，预设 16px)，我们也可以通过 html { font-size: xxx; } 来设置。

em 和 rem
em = 父节点大小(其实就是本身的基准大小，主要是本身未设置时默认继承父元素的大小。) *  em倍数
rem = 根节点大小 * rem倍数

响应式网页设计 (Responsive Web Design)
网页的设计可以自动适应不同访问设备(计算机, 平板, 手机。)
单纯透过 CSS Media Query 控制，不须维护第二套程序码。

强调使用
相对单位 (%, rem, em)
流动、弹性的设计 (inline-block, float…)

mata-viewport可视区域 
user-scalable=no
取消移动装置的缩放功能

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Media Queries 与界面容器

为了让不同使用者的荧幕分辨率可以获得最佳浏览效果，根据荧幕分辨率，制定不同大小的界面容器，增加使用者体验。

@media screen and (min-width: width-a) and (max-width: width-b) {
    /* 符合条件，套用的样式 */
}

常见的界面容器宽度

其他

!important                  //避免样式被覆盖

:not()                      //非
:not(:first-child)          //不是第一个子节点的
:not(:empty)                //非空

calc()                      //不同单位计算
left: calc(100% - 200px)    //100%-200px

content-visibility: auto; 优化长列表渲染，若 img 这种元素的高度是有图片内容决定的，还需要使用 contains-intrinsic-size 属性来优化。