使用CSS创建图形组件

给HTML 元素着色

语法： 元素选择器 『着色属性』

选择符

标签选择器

属性选择器

位置选择器

其他

页面布局

浮动布局

• 纵向对齐: align-items
• 横向对齐
• justify-content (单行)
• 横向对齐 align-content( 多行 )

2. 元素 扩展: flex-grow 收缩: flex-shrink 基础长度: flex-basis

兼容

浏览器特殊前缀

• -o- Opera
• -webkit- safari 和 chrome
• -moz- mozilla

增强某样式的权重 !important

单位

• 绝对长度(不推荐) cm,mm,in
• 相对长度 px,em(字体大小) , rem(根元素字体大小),%,vw(视口宽度1%),vh

1 in=2.54cm=25.4mm=72pt=6pc=96px。

页面元素着色

边框

• margin (外边框)
• border (边框)
• padding (内边框)
• width (最里面)

默认这些都在 width(宽度的外面)

1
2
3
4
5

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

使 width ,height 包含 padding,border 边框

-  边框图像（border-image）
   * border-image-source  //背景图片源
   * border-image-slice  //图片边框内偏移
   * border-image-width  //图片边框的宽度
   * border-image-outset  //边框图像区域超出边框的量
   * border-image-repeat  //边框是否适应平铺(repeated)、铺满(rounded)、拉伸(stretched)

-   投影（border-shadow）
-   圆角（border-radius）
    - border-top-left-radius:10px;
    - border-top-right-radius:10px;
    - border-bottom-right-radius:10px;
    - border-bottom-left-radius:10px;

盒倒影 box-reflect

box-reflect：none , direction offset, mask-box-image - direction (above | below | left | right) - offset (length | percentage) - mask-box-image (none | url | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient)

-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

背景

• background-color
• background-image:url(’')

渐变背景

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

1
2
3
4
5
6
7
8

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

1
2
3
4
5
6
7
8
9

body{
  width: 100%;
  height: 100vh;
  background: #63c0e1;
  background: linear-gradient(-150deg, #4ad8c3, #83a2f1);
  display: flex;
  justify-content: center;
  align-items:center;
}

多背景

background: url() left top no-repeat ,url() right bottom no-repeat;

遮罩

mask-box-image:url() 75 stretch; mask-image: linear-gradient(left, rgba(209, 36, 36, 0), rgba(33, 30, 30, 0) 30%);

文本

• 内容排列 text-align 不光是文字排列 (left,right,center,word-spacing ,letter-spacing)
• line-height 行高
• 文本装饰 text-decoration underline(下划线) overline(上划线) line-through(穿过线) blink(闪烁) inherit
• 字体 font-family 字型 font-family: Times, Times New Roman, Georgia, serif;
• 字体大小 font-size
• 颜色 color (rgb、rgba，hsla) hsl(127,80%,80%)
• 透明度 opacity: 0.6;
• 字符转换 text-transform (uppercase , lowercase, capitalize)
• 粗细、样式、拉伸和装饰(font-weight / font-style / font-stretch / text-decoration)
• 行间距(line-height)、字母间距(letter-spacing)和单词间距(word-spacing)
• 对齐 (text-align)方式
• 缩进 (text-indent)
• 链接样式（:link / :visited / :active / :hover）
• 阴影效果 - text-shadow: 水平偏移 垂直偏移 [模糊半径][颜色]
• 首字母和首行文本(:first-letter / :first-line)
• 响应用户
• 换行模式 white-space (nowrap 不换行, normal 换行)
• word-break: break-all box-shadow: 10px 10px 5px #888888; box-shadow: h-shadow v-shadow blur spread color inset;

链接

• a:link 普通的、未被访问的链接
• a:visited 用户已访问的链接
• a:hover -鼠标指针位于链接的上方
• a:active 链接被点击的时刻

列表

• 列表的项目符号 list-style
• 表格的边框和背景 border-collapse
• 列表橫向顯示 display:none

图像

• 控制图像的大小（display: inline-block）
• 对齐图像
• 背景图像（background / background-image / background-repeat / background-position）

定位 position

- 普通流  默认
- 相对定位 relative  相对于原来所在的位置进行定位，元素占有空间
- 绝对定位 absolute 相对于原来所在的位置进行定位, 元素没有空间
- 固定定位 fixed
- 浮动元素（float / clear）  左右浮动

定位方式

• top 距窗口顶部距离
• right
• bottom
• left
• overflow 溢出
• vertical-align 垂直对齐
• z-index 堆叠顺序

解决子div设float后导致父div无法自动撑开(常用2种)

原因：内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。

• 1)直接给父div设置 “display: inline-block;”
• 2)在最后添加一个 div 用来清除浮动
• <div style="clear:both;"></div>

弹性布局 flexbox

任何一个容器都可以指定为 Flex 布局

1
2
3

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

1
2
3

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上 =-webkit=前缀。

1
2
3
4

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

容器的属性

以下6个属性设置在容器上。

• flex-direction 排列方向 row (默认)| row-reverse | column | column-reverse;
• flex-wrap 截断方式 nowrap | wrap 第一行在上方| wrap-reverse 第一行在下方
• flex-flow flex-direction和 flex-wrap的简写形式
• justify-content 对齐方式 flex-start | flex-end | center | space-between | space-around
• align-items 逆向轴对齐方式 flex-start | flex-end | center | baseline | stretch;
• align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
• align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow 放大比例 如果存在剩余空间，也不放大
• flex-shrink 缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis
• flex flex是 flex-grow, flex-shrink 和 flex-basis的简写，默认值为 (0 1 auto)
• align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items
• align-self: auto | flex-start | flex-end | center | baseline | stretch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 设置 Flex 模式 */
display: flex;
/* 决定元素是横排还是竖着排，要不要倒序 */
flex-direction: column;
/* 决定元素换行格式，一行排不下的时候如何排 */
flex-wrap: wrap;
/* flex-flow = flex-direction + flex-wrap */
flex-flow: column wrap;
/* 同一排下对齐方式，空格如何隔开各个元素 */
justify-content: space-between;
/* 同一排下元素如何对齐，顶部对齐、中部对齐还是其他 */
align-items: center;
/* 多行对齐方式 */
align-content: space-between;

定义要引入的网络字体 (注意版权)

1
2
3
4

@font-face{
font-family:Calibri;
src:url(http://www.examples.com/fonts/Calibri.ttf);
}

媒体查询 (根据不同设备适配不同样式)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

 .my-class {
   width: 40px;
 }

 @media (min-width: 480px) {
   /* 仅在 480px 或更宽的屏幕上生效的样式规则 */
   .my-class {
     width: 200px;
   }
 }
 

1
2
3

    @media all and (min-width: 800px) and (max-width: 1024px) {
      ...;
    }

定义变换 transform

• transform:
  • translate(X,Y) 平移多少位置
  • rotate() 旋转多少角度 ( 30deg ) 多少圈 (0.5turn 半圈)
  • scale(2,4) 缩放
  • skew(30deg,20deg) 倾斜
  • matrix() 需要六个参数，包含数学函数，旋转、缩放、移动以及倾斜
  • transform-origin 允许你改变被转换元素的位置

过渡效果 动画

div{transition:width 2s;} div:hover{width:300px;}

• transition-property 规定应用过渡的 CSS 属性的名称
• transition-duration 定义过渡效果花费的时间
• transition-timing-function 规定过渡效果的时间曲线
• transition-delay 规定过渡效果何时开始

高级功能

viewport (视窗)

1. 禁用缩放(手机默认会启用缩放)

1
2

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

2. 设备无关像素(dip device-independent pixel )

   width=device-width 可指示网页与屏幕宽度（以设备无关像素为单位）进行匹配。这样，网页就可以重排内容以匹配不同的屏幕尺寸。

移动优先

当用手机打开网页的时候，默认打开的只是相对比较简单的手机版样式，而复杂一些的桌面版的相应样式都在 media-query 中包裹着，所以不会加载，那么这样页面访问速度是最佳的。 参考下面代码

.content {
  /* 一些简单的样式，专门为手机而生 */
}

@media screen and (min-width: 400px) {
  .content {
    /* 为大屏设备设计的比较复杂的样式 */
  }
}

滚动条

用 max-width 代替 width 可以防止窗口太小时出现滚动条

溢出用省略号

1
2
3
4
5
6
7

/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
white-space: nowrap;
/* 2. 超出的部分 隐藏*/
overflow: hidden; 
/* 3. 溢出的部分用省略号替代*/
text-overflow: ellipsis; 
/* 以上3个步骤一个都不能少*/

CSS中添加 文本内容 content

1
2
3
4
5
6
7
8
9

q {
    color: #00008B;
    font-style: italic;
}

q::before   { content: open-quote }
q::after    { content: close-quote }

h1::before  { content: "Chapter "; }

灰度

filter: blur(px);模糊度 filter: grayscale(%);灰度 filter: hue-rotate(deg);色相转换 filter: drop-shadow(px px px green);阴影

select option 设置样式

1
2
3
4
5
6
7
8

<!-- select外面必须包裹一个div,用来覆盖select原有的样式 -->
<div class="option">
        <select name="">
          <option value=" ">筛选实验类型</option>
          <option value="实验1">实验1</option>
          <option value="实验2">实验2</option>
        </select>
      </div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

.option{
/*用div的样式代替select的样式*/
    margin: 100px;
   width: 140px;
    height: 40px;
    /*border-radius: 5px;*/
  /*盒子阴影修饰作用,自己随意*/
 /* box-shadow: 0 0 5px #ccc;*/
    border: 1px solid #cccccc;
    position: relative;
}

  .option select{
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  /*将select的宽高等于div的宽高*/
  width: 100%;
    height: 40px;
    line-height: 40px;
  /*隐藏select的下拉图标*/
  appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  /*通过padding-left的值让文字居中*/
  padding-left: 20px;
  }

/*使用伪类给select添加自己想用的图标*/
  .option:after{
      content: "";
      width: 14px;
      height: 8px;
      background: url(../assets/arrow-down.png) no-repeat center;
    /*通过定位将图标放在合适的位置*/
    position: absolute;
      right: 20px;
      top: 41%;
    /*给自定义的图标实现点击下来功能*/
    pointer-events: none;
    }

颜色