# CSS

# 一、引入CSS样式

行内式(内联样式)

是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;"> 内容 </标签名>
内部样式表(内嵌式)

在style 标签内部书写

外部样式表(外链式)

通过link 标签的href 链接css文件, 如下:

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

1
2
3

# 二、选择器

# 1. 基本选择器

标签选择器
类选择器
ID选择器
通配符选择器

属性选择器

**选择器	**示例	**含义
E[attr]****		存在attr属性即可
E[attr=val]****		属性值完全等于val
*E[attr=val]******		属性值里包含val字符并且在“任意”位置
E[attr^=val]****		属性值里包含val字符并且在“开始”位置
E[attr$=val]****		属性值里包含val字符并且在“结束”位置

# 2. 复合选择器

后代选择器
子代选择器
并集选择器
交集选择器

# 3. 伪类选择器

a链接伪类选择器

love hate

- :link      /* 未访问的链接 */
- :visited   /* 已访问的链接 */
- :hover     /* 鼠标移动到链接上 */
- :active    /* 选定的链接 */

1
2
3
4

结构(位置)伪类选择器
伪元素选择器

# 三、CSS盒子模型

# 1. main

border + padding + content 盒子真实宽高
padding, margin属性, 对于行内元素无效
margin: 0 auto; 盒子必须是有宽度的块级元素
border-color的 transparent属性实现小三角效果

# 2. margin's bug

垂直塌陷
包含塌陷: 子盒子设置margin会带跑父盒子

解决方式: 1.设置1px的外边框或内边距(一般不用) 2.overflow:hidden

# 3. 盒子模型转换

box-sizing:
- contnet-box 盒子改变时, 会保证content大小不变
- border-box 改变content的大小以保证盒子真实宽高不变

# 四、浮动

# 1. 特点

浮动的本质是为了解决文字环绕图片, 所以图片浮动不会遮盖文字
display: inline-block
脱标, 不占据标准流位置
浮动元素顶部对齐, 上个元素如果是标准流元素则与其底部对齐
不会主动占据标准流元素的位置

# 2. 清除浮动影响

Why: 子盒子浮动会导致父盒子高度为0

高度法
额外标签法
overflow: hidden

单伪元素(常用)

.clearfix::after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
// 兼容
.clearfix {
    *zoom: 1;
}

1
2
3
4
5
6
7
8
9
10
11

双伪元素

# 五、定位

# 1. 分类

position:

static 静态定位(标准流)
fixed 固定定位
relative 相对定位(不脱标,占有标准流位置)
absolute 绝对定位(子绝父相)

# 2. 特点

display: inline-block
元素成为定位流元素(布局最高层级)
边偏移属性
z-index 设置层级

# 3. 定位元素居中

水平 left: 50%; transform: translateX(-50%);
垂直同理

# 六、元素的可见性

# 1.display

dispaly: none 不显示且清除元素位置

dispaly: block 显示

display: flex 弹性布局

# 2.visibility

visibility: hidden 不显示保留位置

visibility: visible 显示

# 七、overflow 超出处理

overflow:hidden
- 解决包含塌陷
- 清除浮动影响
- 超出部分隐藏
others
- overflow: auto 自适应添加滚动条 (常用)
- overflow: scroll 滚动条
- overflow: visible 不隐藏超出部分也不添加滚动条

# 八、CSS高级技巧

# 1. cursor 鼠标样式

default 小白
pointer 小手
move 移动
text 文本
wait 等待
help 帮助
not-allowed 禁止

# 2. 文本换行

.English {
    width: 200px;
    border: solid 1px red;
    /* 不打乱单词 在半角空格或链接符号 - 处换行 */
    /* word-all 可以打断单词换行 */
    word-break: keep-all;
}
// 超出文本用...显示        
.Chinese {
    width: 200px;
    border: solid 1px red;
    /* 强制文本一行显示(不换行)  默认值为normal*/
    white-space: nowrap;
    /* 隐藏内容用 ... 代替 */
    text-overflow: ellipsis;
    /* text-overflow 必须配合overflow: hidden 使用 */
    overflow: hidden;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3. iconfont 字体图标

fontclass
1. link 引入字体图标css文件
  
  <link rel="stylesheet" type="text/css" href="./iconfont.css">
2. 给需要使用字体图标的标签加上iconfont 以及对应字体图标的类名
```
<i class="iconfont icon-xxx"></i>
或者
<i class="iconfont">&#x33;</i>
```
  1
  2
  3
3. 字体库链接
- 阿里iconfont字库
- 外网icomoon字库
- Icons8提供png下载
unicode 引入CSS代码,给需要使用字体图标的标签加上 iconfont

# 4. transform 变形

# a) translate 平移

# b) scale 缩放

# c) rotate(deg) 旋转

rotate3d(0,1,1,ndeg)
// 统一控制方向轴的旋转, 旋转度数一致, 需要旋转写1, 不旋转写0

1
2

# d) skew(deg, deg) 倾斜

# e) transform-origin

-// 设置旋转中心点
- tranform-origin: left bottom;
- transform-origin: 50% 75%;

1
2
3

# f) perspective 透视

透视可以将一个2D平面，在转换的过程当中，呈现3D效果;
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
transform-style: preserve-3d; // 此盒子呈现3D效果

1
2
3

# g) others

1. backface-visibility: hidden
属性定义当元素不面向屏幕时是否可见, 不是正面对象屏幕，就隐藏

2. @keyframes 动画名称 {
  from{ 开始位置 } (0%) (节点设置可用百分比);
  to{ 结束 } (100%);  
}
 - animation:动画名称 动画时间 运动曲线 何时开始
			播放次数: 定次n/ 无限循环infinite 播放模式: 默认normal/ 往返播放alternate;
 - animation-fill-mode: forwards;// 动画完成时保持最后节点状态

1
2
3
4
5
6
7
8
9
10

# 九、CSS书写规范

# a) 样式属性书写顺序

布局定位属性--> 自身属性--> 文本属性--> 其他属性;

此条可根据自身习惯书写, 但尽量保证同类属性写在一起;

属性列举: 布局定位属性主要包括: margin、padding、float（包括clear、position（相应的top、right、bottom、left、display、visibility、overflow 等；

自身属性主要包括: width& height& background& border;

文本属性主要包括：font、color、text-align、text-decoration、text-indent等；

其他属性包括: list-style、vertical-align、cursor、z-index、zoom等;

所列出的这些属性只是最常用到的, 并不代表全部;

← Basics C3 →