CSS

带示例的文档：CSS

CSS 使用方式

优先级

优先级：内联样式最高，同样的选择器，谁在后面谁的优先级比较高。
选择器优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
!important：提升优先级到最高
越具体越复杂的选择器，优先级越高。

内联样式

在对应元素行内，通过 style 属性，以键值对形式，设置样式。

内部样式

在 HTML 文件内，通过 style 标签，设置样式。

外部样式

通过外部单独的 CSS 文件，设置样式。

选择器

属性选择器

<style>
  /* 单独选择某个属性 */
  [属性名称] {}
  /* 选择这个属性具体的某个值的元素 */
  [属性名称="属性值"] {}
</style>

子元素选择器

<style>
    /* 选择第几个子元素，填入参数 */
    nth-child() {}
    /* 选择最后一个子元素 */
    last-child {}
</style>

直接子元素选择器

<style>
    .parent>div {}
</style>

选择某个元素后面的元素

<style>
    .d3 + div {}
</style>

选择某个元素后面的多个元素

<style>
    .d3 ~ div {}
</style>

伪元素

通过CSS可以创建假的元素

<style>
    /* 在元素内部创建1个最前面假的子元素 */
    .chat:before {}
    /* 在元素内部创建1个最后面假的子元素 */
    .chat:after {}
</style>

伪元素默认是行元素。

注意：创建伪元素时，content属性必须写，无默认值可设置content: "";

浮动

可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢。

在style标签，img中设置float: ;

<style>
  img {
    float: ;
  }
</style>

浮动可以解决文字包围图片的问题。
浮动可以解决莫名其妙的间隔问题。

浮动的高度塌陷问题

设定父元素高度

伪元素清除浮动（最佳解决方案）

  <style>
    .clear::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>

浮动可以向左，向右进行排版对齐。

字体属性

字体类型

设置font-family: ;
设置的字体必须在系统内存在，如果没有，则默认按照系统字体样式显示

字体粗细

设置font-weight: ;
默认正常的字体粗细，是一个相对的值，如果设置900，但系统没有这么粗的字体，则按照默认样式显示

字体颜色

设置color: ;

文字排布

设置text-align: ;
默认向左

文字行高

设置line-height: ;

文字阴影

设置text-shadow: ;
水平偏移距离垂直偏移距离模糊度阴影的颜色
多个阴影可以叠加

过渡动画

设置transition: ;简写属性，用于在一个属性中设置四个过渡属性，是综合性过渡效果设置。

过渡属性

设置transition-property: ;

过渡时间

设置transition-duration: ;
可设置多个值，或直接设置为all。

过渡速度

设置transition-timing-function: ;

默认值ease，从慢到快到慢
linear，设置线性速度
ease-in，从慢到快
ease-out，从快到慢
cubic-bezier(0, 0.95, 1, 0.07)可以通过浏览器进行调节，获取贝塞尔曲线

过渡延迟

设置transition-delay: ;

转换

2D转换

设置transform: ;
效果更好，帧数更高。

移动
设置transform: translate(x, y);
x代表水平移动的距离，y代表竖直移动的距离
等同于设置transform: translateX(x) translateY(y);
旋转
设置transform: rotate();
填入需要旋转的角度，带上单位deg

3D转换

三维立体空间，有水平轴x轴，竖直轴y轴，垂直屏幕射向眼睛的z轴。

父元素中设置透视点perspective: ;，定义 3D 转换元素的透视视图。

旋转
子元素中设置:
transform: rotateX();
transform: rotateY();
transform: rotateZ();
移动
子元素中设置:
transform: translateX();
transform: translateY();
transform: translateZ();

缩放

设置transform: scale();，填入放大的倍数。

选项框

单选框

设置type="radio"
name值相同为同一个选项，只有1个内容会被选中。

<h3>请选择你的性别：</h3>
男<input type="radio" name="gender" value="男"/>
女<input type="radio" name="gender" value="女"/>

<h3>请选择你的性别：</h3>
男<input type="radio" name="gender" value="男"/>
女<input type="radio" name="gender" value="女"/>

复选框

设置type="checkbox"
同一个选项，name值要相同，但可以有多个内容被选中。

<h3>请选择你喜欢的城市</h3>
北京<input type="checkbox" name="favcity" value="北京" />
上海<input type="checkbox" name="favcity" value="上海" />
广州<input type="checkbox" name="favcity" value="广州" />
深圳<input type="checkbox" name="favcity" value="深圳" />

<h3>请选择你喜欢的城市</h3>
北京<input type="checkbox" name="favcity" value="北京" />
上海<input type="checkbox" name="favcity" value="上海" />
广州<input type="checkbox" name="favcity" value="广州" />
深圳<input type="checkbox" name="favcity" value="深圳" />

定位

静态定位

默认情况，不做定位。

固定定位

根据浏览器的位置定位。脱离正常的文档流。
设置position: fixed;，必须配合left、right、top、bottom。

相对定位

相对于自己当前的位置进行定位。不会脱离文档流，只是样式移动了。
设置position: relative;

绝对定位

相对于设置了定位的父元素或者祖先元素进行定位。会脱离正常的文档流。
设置position: absolute;

粘性定位

新出模式，兼容不行。

z-index

设置z-index: ;，设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
默认值是0。

动画

设置animation: ;，综合性的动画设置属性。

名称

设置animation-name: ;

时间周期

设置animation-duration: ;

变化速度

设置animation-timing-function: ;

默认ease
linear
ase-in
ease-out
贝塞尔曲线

延迟时间

设置animation-delay: ;

循环次数

设置animation-iteration-count: ;
无限循环：infinite

运动方向

设置animation-direction: ;

默认值normal
alternate奇数次正常运动，偶数次反方向运动
reverse反方向运动
alternate-reverse，奇数次反方向，偶数次正方向

最后一帧

设置animation-fill-mode: ;
保持最后一帧：forwards

字体图标

图片：比较占用带宽、放大可能产生失真、图片改变颜色不方便

字体图标：占用带宽小、不会失真、可以随意调节字体大小和颜色

Unicode引用

Unicode 是字体在网页端最原始的应用方式。

特点是：

兼容性最好，支持IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
因为是字体，不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

font-class引用

font-class 是Unicode使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

特点：

兼容性良好，支持IE8+，及所有现代浏览器。
相比于Unicode语意明确，书写更直观。更容易分辨icon是什么。
使用class定义图标，所以当要替换图标时，只需要修改class里的Unicode引用。

缺点：不过因为本质上还是使用的字体，所以多色图标还是不支持的。

Symbol引用

这是一种全新的使用方式，是未来的主流，是平台目前推荐的用法。这种用法其实是做了一个SVG的集合，与另外两种相比具有如下特点：

支持多色图标，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size、color来调整样式。
兼容性较差，支持IE9+，及现代浏览器。
浏览器渲染SVG的性能一般，还不如 png。

弹性布局

使布局更方便更简单。

弹性容器、弹性子元素

设置了display: flex的元素是弹性容器。
这个元素内的直接子元素按照弹性布局方式进行布局，为弹性子元素。

弹性主轴

主轴方向

在父元素中设置flex-direction: ;

默认从左到右：flex-direction: row;
从右到左：flex-direction: row-reverse;
从上到下：flex-direction: column;
从下到上：flex-direction: column-reverse;

多弹性子元素超出弹性容器宽高范围，默认不换行，按比例压缩。

主轴内容分布

在父元素中设置justify-content: ;

向主轴的开始位置靠拢（默认）：justify-content: flex-start;
向主轴的结束位置靠拢：justify-content: flex-end;
向主轴的中心位置靠拢：justify-content: center;
平均分布（两边有间距，是中间间距的一半）：justify-content: space-around
平均分布（两边无间距）：justify-content: space-between
平均分布（两边有间距，和中间间距一样）：justify-content: space-evenly（新，不一定被所有浏览器支持）

弹性侧轴

侧轴方向

与主轴方向垂直

侧轴内容分布

在父元素中设置align-items: ;

拉伸（默认，如果设置高度，则无效）：align-items: stretch
向侧轴的开始位置靠拢：align-items: flex-start;
向侧轴的结束位置靠拢：align-items: flex-end;
向侧轴的中心位置靠拢：align-items: flex-center;

弹性换行

在父元素中设置flex-wrap: ;

不换行（默认）：flex-wrap: nowrap;
换行：flex-wrap: wrap;

多行分布

在父元素中设置align-content: ;

多行内容向侧轴的开端靠拢： align-content: flex-start;
多行内容向侧轴的结束端靠拢： align-content: flex-end;
多行内容居中： align-content: center;
平均分布（两边有间距，是中间间距的一半）： align-content: space-around;
平均分布（两边无间距）： align-content: space-between;
平均分布（两边有间距，和中间间距一样）： align-content: space-evenly;

如果换行，一定要设置换行的分布情况

剩余空间分布

设置父容器为弹性容器，在非固定宽度的弹性子容器内设置flex: ;，值为该子容器占据剩余空间的分数的份数。

如：弹性子容器1中的flex: 1;是弹性子容器2中的flex: 2;的50%。

子元素排序

在子元素上设置order: ;

单独设置子元素侧轴排布

在子元素上设置align-self: ;

居中：align-self: center;
靠近侧轴的开端：align-self: flex-start;
靠近侧轴的结束端：align-self: flex-end;
拉伸：align-self: stretch;

移动端和响应式

一般情况下，一个项目，一般会划分为PC端的页面和移动端的页面。

但并不是所有页面都需要移动端和PC端响应，页面复杂时，代码会比较凌乱和繁多，不能针对性设置PC和移动端页面。

媒体查询

设置@media sceen {}
必须加上<meta name="viewport" content="width=device-width, initial-scale=1.0">

盒子模型

设置box-sizing: ;，盒子模型的大小设定。

content-box，默认值，希望内容大小固定时使用
border-box，希望整个盒子大小是固定的，不会因为设置了内边距和border而撑开改变大小

CSS基础知识

CSS