学习笔记-CSS（1）

博主： admin123
发布时间：2021 年 02 月 18 日
1750 次浏览
暂无评论
加载中
10233字数
分类：学习笔记

# 学习笔记-CSS（1）

## CSS注释

```css
/* 注释内容 */
```

## 字体样式属性

### font-size 字号大小

px 像素

### font-family 字体

分号包裹、逗号隔开

### CSS Unicode字体

字体可以为汉字、英文，也可使用汉字的Unicode编码

### font-weight 字体粗细

让加粗的不加粗

| 可选值           | 备注                       |
| ---------------- | -------------------------- |
| normal           | 默认值                     |
| bold             | 加粗                       |
| bolder           | 更粗                       |
| lighter          | 细                         |
| 100~900(100整数) | 400等价normal，700等价bold |

### font-style 字体风格

让`<em>`的不倾斜

| 可选值 | 备注   |
| ------ | ------ |
| normal | 默认值 |
| italic | 斜体   |
|        |        |

### font 简写

```css
d{
    font:font-style font-weight font-size/line-height font-family;
}
```

必须按照顺序；必须保留font-size和font-family

## 选择器

- 标签选择器
  
  HTML标签名作为选择器
  
  ```css
  htmlname{}
  ```
- 类选择器
  
  class属性作为选择器
  
  ```css
  .classname{}
  ```
- 多类名选择器
  
  html引用多个class样式
- id选择器
  
  id属性作为选择器
  
  ```css
  #idname{}
  ```
- 通配符选择器
  
  ```css
  *{}
  ```
- 伪类选择器
  
  ```
  :name{}
  ```
  
  - 链接伪类选择器
    
    ```html
    <a></a>
    ```
    
    - a:link 未访问
    - a:visited 访问过
    - a:hover 鼠标移动到链接上
    - a:active 选定的链接
      
      > 不能调换顺序
  - 结构伪类选择器
    
    - :first-child 首个子元素
    - :last-child 最后一个子元素
    - :nth-child(n) 第n个孩子
      - n 可以为数字
      - even偶数；odd奇数
      - n 全部(0-n)；2n(0 2 4 2n)；2n+1(1 3 2n+1)
    - :nth-last-child(n) 从最后一个孩子开始数
  - 目标伪类选择器
    
    - :target  选定状态

## 外观属性

### color 文本颜色

1. 预定义的颜色
2. 十六进制
3. RGB代码

### line-height 行高

段落中行和行之间的距离

一般设置比字体大7 8 像素

如果需要垂直居中，设置行高为盒子高度

### text-align 水平对齐方式

left/center/right

### text-indent 首行缩进

建议使用em做单位，1em为一个字的宽度

### text-decoration 装饰

为 none 可以取消 a 的下划线

### letter-spacing 字间距

字符间的距离

### word-spacing 单词间距

对英文单词有效。中文无效。

### 颜色半透明 css3

```css
color: rgba(r,g,b,a) /*a 0~1 透明度*/
```

### 文字阴影 css3

```css
text-shadow:水平位置（必） 垂直位置（必） 模糊距离 阴影颜色;
```

# day2

## 书写位置

- 内部样式表
- 行内样式
- 外部样式

## 标签显示模式（display）***

### 块级元素

独占一行或多行，可以设置宽度高度，用于布局

常见的块元素有

```css
h1~h6
p
dib
ul
ol
li
...
```

特点：

- 总是从新行开始
- 可以设置高高度、行高和内外边距
- 默认宽度100%
- 可以容纳内联元素和其他块元素

### 行内元素

不占有独立的区域，仅仅靠自身字体大小和图像尺寸来支撑结构，一般不可以设置宽高对齐等属性

span

- 和相邻行内元素共享
- 无法设置宽高，水平padding和margin可以设置，垂直无效
- 默认宽度是它本省内容宽度
- 行内元素只能放文本和其他行内元素。（a特殊）

> - 链接里不能再放链接
> - 只有文字才能组成段落，文字类块级标签不能再放块元素

### 行内块元素

`img` `input` `td` 可以设置宽高和对齐属性。但是不独占一行

特点：

- 和相邻行内元素在一行上，但是会有空白间隙
- 默认宽度是它本身内容的宽度
- 高宽，边距都可以设置

### 模式转换

设置display

块>行：inline

行>块：block

块行>行内块：inline-block

## CSS复合选择器

### 交集

第一个为标签，第二个为class选择器，无空格

### 并集

任意形式的选择器，逗号隔开

### 后代（可以选择所有后代）

外层选择器在前面，空格隔开

### 子元素（只会选择儿子）

大于号连接

### 属性选择器

```css
a[属性] /*包含属性*/
a[属性=值] /*属性等于值*/
a[属性^=值] /*属性为值开头*/
a[属性$=值] /*属性为值结束*/
a[属性*=值] /*属性包含值*/
```

### 伪元素选择器 css3

插入一个行内元素元素，可指定样式。

```css
: 伪类
:: 伪元素
p::first-letter 第一个字
P::first-line 第一行
p::selection 被选择
```

```css
在盒子的内部前后插入一个伪元素
div::before{
    cotent: neirong
}
div::after{
    content: neirogn
}
```

## 背景

### 背景颜色

background-color

### 背景图片

background-image

图片显示在颜色上

### 平铺

background-repeat

### 背景位置

background-position

方位名词  \ 坐标 \ 混搭

### 背景附着

background-attachment: fixed/scroll

### 简写

background: 无顺序

### 背景透明 css3

backgound:rgba(r,g,b,a)

### 背景缩放 css3

backgound-size 设置背景图片尺寸

px/百分比

> 尽量只改一个值，防止图片扭曲

cover 自动缩放比例，溢出部分隐藏，图片保证宽高同时满足

contain 自动缩放，保证图片完整，宽高一个满足就不再缩放

### 多背景 css3

每组背景逗号隔开，前面的覆盖在后面的背景上

# day3

## css三大特性

### 层叠

1. 样式冲突，就近原则
2. 样式不冲突，不会层叠

### 继承

text-、font-、line-、color属性会被继承

### 优先性

选择器有权重（特殊性公式）

标签选择器 0,0,0,1

类选择器,伪类选择器 0,0,1,0

id选择器 0,1,0,0

行内选择器 1,0,0,0

!important 无穷大

#### 权重叠加

复合选择器权重是叠加计算的

#### 继承为0

子元素继承为0

## 盒子模型

### 边框

border:bordre-width||border-style||border-style

border-style: none\solid\dashed\dotted\double

#### 表格的细线边框

设置td border-style:solid border会叠加

border-collapse: collapse 相邻合并

#### 圆角边框 css3

border-redius 值复制（左上 右上 右下 左下）

### 内边距

padding

边框和内容的距离

值复制

### 外边距

margin 与内边距一致

#### 实现居中对齐

块级有宽度元素设置左右外边距为auto 居中

#### img与背景图片的区别

img标签是行内块元素，可以设置宽高，使用内外边距改变距离 占位置

背景图片使用background-size和background-position设置  不占位置

### 清除默认内外边距

通配符 margin:0 padding 0

### 行内元素只能设置左右边距

### 外边距合并

垂直相邻块元素外边距合并以最大的为准

嵌套元素外边距合并：

- 解决方案： 定义父元素合并边框的边框和内边距
- 添加overflow:hidden

### content宽度和高度 **

空间尺寸：width/height+border+padding +margin

盒子尺寸：width/height+padding+border

! padding不影响盒子尺寸的情况：如果盒子没给定宽度高度或者块级元素继承了父元素的宽高，padding不会影响 尺寸。

# day4

### 盒子模型 布局稳定性

width>padding>margin

1. margin会有外边距合并
2. padding会影响盒子大小
3. width没有问题

### CSS3盒模型

box-sizing用于指定盒模型

content-box: 以前的盒模型 w3c推荐 padding border会撑开盒子

border-box:  padding border不撑开盒子

border-box 盒子宽度就是宽度

### 盒子阴影

文字阴影： text-shadow 水平 垂直 模糊距离 颜色

盒子阴影     box-shandow 水平 垂直 模糊距离 影子大小 颜色 内外（inset 内、 外不写）

## 浮动

### 普通流

块级元素自上问下，独占

行内元素前后排列

### 浮动

开始的时候，浮动用来做文字环绕效果。

浮动飘离标准流不占位置，会遮盖标准流。只有左右浮动。

！浮动首先需要添加标准流父级元素。浮动元素总是会找到离他最近的父级元素对齐，不会超出内边距。

一个父盒子里的子盒子，如果一个浮动，其他都需要浮动才能一行对齐。

**添加浮动后，会有行内块的元素特性**，可以设置大小对齐

行内块：内容撑开盒子

## 布局

版心 width通常为960px

### 一列固定宽度且居中

### 两列左窄右宽

### 通栏平均分布

## 清除浮动

清除浮动后造成的影响

考虑孩子高度会变，父级盒子可以不给高度，这时孩子浮动，父元素内部高度为0

属性：clear

方法：

1. 额外标签法
2. 父级添加overflow属性方法
   
   1. overflow:hidden 触发BFC
3. 使用after伪元素清除浮动
   
   1. ```css
      .clearfix:after{
          content:'.';
          display:block;
          height: 0;
          visibility: hidden;
          clear: both;
      }
      ```
4. 使用before和after双伪元素清除浮动
   
   1. ```css
      .clearfix:before,.clearfix:after{
          content:"";
          display:table;
      }
      .clearfix:after{
          clear:both;
      }
      .clearfix{
          *zoom:1;
      }
      ```

## Photoshop

颜色填充：

alt+delete：前景色

ctrl+delete：背景色

套索工具：

魔法棒：

ctrl+shift+i 选区反选

ctrl+d 取消选区

钢笔：

alt+右键 取消曲线

ctrl+enter 确认选取

# day5

## 定位

### 边偏移

top right left bottom

### 定位模式

position

- static
  - 静态定位
  - 无法通过边偏移改变位置
  - 一般用来清除定位
- relative
  - 相对定位
  - 相对原来的位置左上角（忽略padding）进行移动
  - 原来的位置继续占有（标准流，相对定位不脱标）
- absolute
  - 绝对定位
    - 如果父级没有定位，相对于文档左上角（忽略padding）定位，原来的位置不再占有
    - 父级有定位，根据父亲左上角（忽略padding）定位
  - 脱离标准流，不占有位置

**子绝父相**

- fixed
  - 固定定位
  - 父亲定位没影响，只认浏览器
  - 完全脱标
- z-index
  - 调整层叠顺序
  - 默认为0
  - 只有相对定位，绝对定位，固定定位有该属性，标准流、浮动、静态定位都没有该属性

### 定位模式的转换

添加绝对定位和固定定位会自动转换为行内块元素

## 元素的显示与隐藏

### display显示

display:none 隐藏元素，不保留位置。没有删除

display:block 转换为block，显示元素

### visbility隐藏

visbility:hidden 隐藏元素保留位置

visbility:visable 显示元素

### overflow 溢出

visible: 默认 超出显示

hidden: 超出隐藏

scroll: 一直显示滚动条

auto: 超出 显示滚动，不超 不显示

## CSS用户界面样式

### 鼠标样式

cursor:default pinter move text

### 轮廓

outline 类似边框，显示在边框外

一般将outline设为0

### 防止拖拽文本域textarea

resize:none

### vertical-align 垂直对齐

对块级元素无效。

给图片表单加上该属性，使文本和图片、表单 对齐

baseline基线对齐

top顶线对齐

middle中线对齐

bottom底线对齐

> 图片和文字默认基线对齐

**行内块元素会使用底线与父盒子的基线对齐**

解决方法：

1. img转换为block
2. 更改img垂直对齐

## 文字溢出

### word-break 换行

normal 默认规则

break-all 允许单词拆开分行

keep-all 只有在半角空格( )或连字符(-)换行

**针对英文**

### white-space

normal 默认

nowrap 强制一行显示

### text-overflow 文字溢出

**首先强制一行内显示，再使用该属性。**

clip 裁剪 不显示省略号(...)

ellipsis 裁剪超出用  省略号(...)代替

## CSS精灵（sprite）技术

网页背景图处理方式

将零星的小背景图片集中在一张大图里。

使用background-position移动

## 字体图标

## 滑动门技术

背景图根据内容拉长缩短

精灵+padding

http://weixin.qq.com 导航栏效果

```html
div>a>span
```

## 过渡

transition: 为 状态a->状态b 补充动画 与hover配合使用

property 要过渡的属性

duration 花费时间必须写单位（s）

timming-funtion 运动曲线 默认ease

> linear 线性  v恒定
> 
> ease  逐渐慢下来
> 
> ease-in 加速
> 
> ease-out 减速
> 
> ease-in-out 先加速后减速

delay 何时开始 默认0

transation放在div而不是div:hover中，否则回去无过渡

多阶段变化 ',' 隔开，多属性一起变化，属性填 all

## 2D变形 tansform

结合transation实现动画。

- translate(x,y) 平移
  
  - translateX(x)
  - translateY(y)
  
  > **定位盒子居中完美解决方案**：
  > 
  > 移动距离如果是%，那么以自己的宽高为准
  > 
  > ```css
  > left: 50%;
  > top: 50%;
  > transform: translate(-50%,50%);
  > ```
- 缩放scale(x,y)
  
  - scaleX
  - scaleY
  
  > scale默认值为1 scale属于[0.01,0.99]缩小，否则变大
- 旋转rotate(deg)
  
  - deg为度，+值顺时针，-值逆时针
  - 设置旋转中心点
    - transform-origin(x,y)
      - top|bottom|center|num
      - left|right|center|num
    - 需要设置在变化之前
- 倾斜skew(deg,deg)

## 3D变形 tansform

- 旋转
  
  - rotateX(deg)沿x轴立体旋转
  - rotatey(deg)沿y轴立体旋转
  - rotatez(deg)沿z轴立体旋转
  - backface-visiblity:hidden 正面反转隐藏
- 3D移动
  
  - 透视(perspective)
  - tanslateZ(z)
  
  > perspective是眼睛到屏幕的距离
  > 
  > tranlateZ是物体到屏幕的距离 Z
  > 
  > z只能是px
  
  - tranlate3d(x,y,z)

## 动画 animation

简写

```css
animation:动画名称 时间 运动曲线 何时开始 播放次数 是否反方向;
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
```

> infnite 无限循环

```css
@keyframes 动画名称{
    from|0%{
        /* transform */
    }
    ?%{
        
    }
    to|100%{
        /* transform */
    }
}
```

## 伸缩布局

父元素指定display为flex

### 份额 flex

使用flex属性为子元素主轴指定份额。自动缩放。

> 为父元素设置min-width指定最小宽度，不会过度缩放
> 
> max-width指定最大宽度，不会过度拉伸

会对子元素有flex属性的子盒子配额分配固定宽度剩余的宽度

### 排列方向 flex-direction

设置主轴方向，默认 row 行向，column 列向

row|column - reverse 反转

### 主轴对齐方式 justify-content

flex-start 从主轴开头开始

flex-end 从主轴末端，盒子顺序不变

center 主轴居中

space-between 首末贴近盒子，中间平均分配空白

space-around 添加相同的主轴方向边距

### 侧轴对齐方向 align-items（一行）

stretch 默认 拉伸，

> 子元素没有高度时，子元素高度适应父盒子高度
> 
> 否则相当于顶端对齐

flex-start 顶端对齐，上对齐

flex-end 底部对齐，下对齐

center 垂直居中

### 换行 flex-wrap

nowrap 默认 不换行，收缩强制一行显示，

wrap 必要时换行

wrap-reverse 必要时翻转换行，不常用

### 多行对齐 align-content

必须为 flex-direcion:row flex-wrap:wrap 才起作用

### flex-flow:flex-direction flex-wrap;

### order

排列顺序，数值越小越靠前，可以为负数，默认为0

---

转载至CSDN博主：[[李唐敏民](https://blog.csdn.net/qq_39041210 "李唐敏民")]

最后修改：2021 年 02 月 18 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

陈汶魔
陈汶魔:文章真不错http://wap.jst-gpmx.cn...
空空裤兜
按照博主的办法，将true改为false，现在终于好了
潜心学习的匿名人士
我也发现了那就是我安装出问题了,但是没安装教程参考
潜心学习的匿名人士
感谢！！！(ノ°ο°)ノ
潜心学习的匿名人士
9.2.1版本和你改动9.0.2的内容是一样的但是还是身份认...

学习笔记-CSS（1）

admin123 • 2021 年 02 月 18 日

# 学习笔记-CSS（1）

## CSS注释

```css
/* 注释内容 */
```

## 字体样式属性

### font-size 字号大小

px 像素

### font-family 字体

分号包裹、逗号隔开

### CSS Unicode字体

字体可以为汉字、英文，也可使用汉字的Unicode编码

### font-weight 字体粗细

让加粗的不加粗

### font-style 字体风格

让`<em>`的不倾斜

| 可选值 | 备注   |
| ------ | ------ |
| normal | 默认值 |
| italic | 斜体   |
|        |        |

### font 简写

```css
d{
    font:font-style font-weight font-size/line-height font-family;
}
```

必须按照顺序；必须保留font-size和font-family

## 选择器

## 外观属性

### color 文本颜色

1. 预定义的颜色
2. 十六进制
3. RGB代码

### line-height 行高

段落中行和行之间的距离

一般设置比字体大7 8 像素

如果需要垂直居中，设置行高为盒子高度

### text-align 水平对齐方式

left/center/right

### text-indent 首行缩进

建议使用em做单位，1em为一个字的宽度

### text-decoration 装饰

为 none 可以取消 a 的下划线

### letter-spacing 字间距

字符间的距离

### word-spacing 单词间距

对英文单词有效。中文无效。

### 颜色半透明 css3

```css
color: rgba(r,g,b,a) /*a 0~1 透明度*/
```

### 文字阴影 css3

```css
text-shadow:水平位置（必） 垂直位置（必） 模糊距离 阴影颜色;
```

# day2

## 书写位置

- 内部样式表
- 行内样式
- 外部样式

## 标签显示模式（display）***

### 块级元素

独占一行或多行，可以设置宽度高度，用于布局

常见的块元素有

```css
h1~h6
p
dib
ul
ol
li
...
```

特点：

- 总是从新行开始
- 可以设置高高度、行高和内外边距
- 默认宽度100%
- 可以容纳内联元素和其他块元素

### 行内元素

不占有独立的区域，仅仅靠自身字体大小和图像尺寸来支撑结构，一般不可以设置宽高对齐等属性

span

> - 链接里不能再放链接
> - 只有文字才能组成段落，文字类块级标签不能再放块元素

### 行内块元素

`img` `input` `td` 可以设置宽高和对齐属性。但是不独占一行

特点：

- 和相邻行内元素在一行上，但是会有空白间隙
- 默认宽度是它本身内容的宽度
- 高宽，边距都可以设置

### 模式转换

设置display

块>行：inline

行>块：block

块行>行内块：inline-block

## CSS复合选择器

### 交集

第一个为标签，第二个为class选择器，无空格

### 并集

任意形式的选择器，逗号隔开

### 后代（可以选择所有后代）

外层选择器在前面，空格隔开

### 子元素（只会选择儿子）

大于号连接

### 属性选择器

```css
a[属性] /*包含属性*/
a[属性=值] /*属性等于值*/
a[属性^=值] /*属性为值开头*/
a[属性$=值] /*属性为值结束*/
a[属性*=值] /*属性包含值*/
```

### 伪元素选择器 css3

插入一个行内元素元素，可指定样式。

```css
: 伪类
:: 伪元素
p::first-letter 第一个字
P::first-line 第一行
p::selection 被选择
```

```css
在盒子的内部前后插入一个伪元素
div::before{
    cotent: neirong
}
div::after{
    content: neirogn
}
```

## 背景

### 背景颜色

background-color

### 背景图片

background-image

图片显示在颜色上

### 平铺

background-repeat

### 背景位置

background-position

方位名词  \ 坐标 \ 混搭

### 背景附着

background-attachment: fixed/scroll

### 简写

background: 无顺序

### 背景透明 css3

backgound:rgba(r,g,b,a)

### 背景缩放 css3

backgound-size 设置背景图片尺寸

px/百分比

> 尽量只改一个值，防止图片扭曲

cover 自动缩放比例，溢出部分隐藏，图片保证宽高同时满足

contain 自动缩放，保证图片完整，宽高一个满足就不再缩放

### 多背景 css3

每组背景逗号隔开，前面的覆盖在后面的背景上

# day3

## css三大特性

### 层叠

1. 样式冲突，就近原则
2. 样式不冲突，不会层叠

### 继承

text-、font-、line-、color属性会被继承

### 优先性

选择器有权重（特殊性公式）

标签选择器 0,0,0,1

类选择器,伪类选择器 0,0,1,0

id选择器 0,1,0,0

行内选择器 1,0,0,0

!important 无穷大

#### 权重叠加

复合选择器权重是叠加计算的

#### 继承为0

子元素继承为0

## 盒子模型

### 边框

border:bordre-width||border-style||border-style

border-style: none\solid\dashed\dotted\double

#### 表格的细线边框

设置td border-style:solid border会叠加

border-collapse: collapse 相邻合并

#### 圆角边框 css3

border-redius 值复制（左上 右上 右下 左下）

### 内边距

padding

边框和内容的距离

值复制

### 外边距

margin 与内边距一致

#### 实现居中对齐

块级有宽度元素设置左右外边距为auto 居中

#### img与背景图片的区别

img标签是行内块元素，可以设置宽高，使用内外边距改变距离 占位置

背景图片使用background-size和background-position设置  不占位置

### 清除默认内外边距

通配符 margin:0 padding 0

### 行内元素只能设置左右边距

### 外边距合并

垂直相邻块元素外边距合并以最大的为准

嵌套元素外边距合并：

- 解决方案： 定义父元素合并边框的边框和内边距
- 添加overflow:hidden

### content宽度和高度 **

空间尺寸：width/height+border+padding +margin

盒子尺寸：width/height+padding+border

! padding不影响盒子尺寸的情况：如果盒子没给定宽度高度或者块级元素继承了父元素的宽高，padding不会影响 尺寸。

# day4

### 盒子模型 布局稳定性

width>padding>margin

1. margin会有外边距合并
2. padding会影响盒子大小
3. width没有问题

### CSS3盒模型

box-sizing用于指定盒模型

content-box: 以前的盒模型 w3c推荐 padding border会撑开盒子

border-box:  padding border不撑开盒子

border-box 盒子宽度就是宽度

### 盒子阴影

文字阴影： text-shadow 水平 垂直 模糊距离 颜色

盒子阴影     box-shandow 水平 垂直 模糊距离 影子大小 颜色 内外（inset 内、 外不写）

## 浮动

### 普通流

块级元素自上问下，独占

行内元素前后排列

### 浮动

开始的时候，浮动用来做文字环绕效果。

浮动飘离标准流不占位置，会遮盖标准流。只有左右浮动。

！浮动首先需要添加标准流父级元素。浮动元素总是会找到离他最近的父级元素对齐，不会超出内边距。

一个父盒子里的子盒子，如果一个浮动，其他都需要浮动才能一行对齐。

**添加浮动后，会有行内块的元素特性**，可以设置大小对齐

行内块：内容撑开盒子

## 布局

版心 width通常为960px

### 一列固定宽度且居中

### 两列左窄右宽

### 通栏平均分布

## 清除浮动

清除浮动后造成的影响

考虑孩子高度会变，父级盒子可以不给高度，这时孩子浮动，父元素内部高度为0

属性：clear

方法：

## Photoshop

颜色填充：

alt+delete：前景色

ctrl+delete：背景色

套索工具：

魔法棒：

ctrl+shift+i 选区反选

ctrl+d 取消选区

钢笔：

alt+右键 取消曲线

ctrl+enter 确认选取

# day5

## 定位

### 边偏移

top right left bottom

### 定位模式

position

**子绝父相**

### 定位模式的转换

添加绝对定位和固定定位会自动转换为行内块元素

## 元素的显示与隐藏

### display显示

display:none 隐藏元素，不保留位置。没有删除

display:block 转换为block，显示元素

### visbility隐藏

visbility:hidden 隐藏元素保留位置

visbility:visable 显示元素

### overflow 溢出

visible: 默认 超出显示

hidden: 超出隐藏

scroll: 一直显示滚动条

auto: 超出 显示滚动，不超 不显示

## CSS用户界面样式

### 鼠标样式

cursor:default pinter move text

### 轮廓

outline 类似边框，显示在边框外

一般将outline设为0

### 防止拖拽文本域textarea

resize:none

### vertical-align 垂直对齐

对块级元素无效。

给图片表单加上该属性，使文本和图片、表单 对齐

baseline基线对齐

top顶线对齐

middle中线对齐

bottom底线对齐

> 图片和文字默认基线对齐

**行内块元素会使用底线与父盒子的基线对齐**

解决方法：

1. img转换为block
2. 更改img垂直对齐

## 文字溢出

### word-break 换行

normal 默认规则

break-all 允许单词拆开分行

keep-all 只有在半角空格( )或连字符(-)换行

**针对英文**

### white-space

normal 默认

nowrap 强制一行显示

### text-overflow 文字溢出

**首先强制一行内显示，再使用该属性。**

clip 裁剪 不显示省略号(...)

ellipsis 裁剪超出用  省略号(...)代替

## CSS精灵（sprite）技术

网页背景图处理方式

将零星的小背景图片集中在一张大图里。

使用background-position移动

## 字体图标

## 滑动门技术

背景图根据内容拉长缩短

精灵+padding

http://weixin.qq.com 导航栏效果

```html
div>a>span
```

## 过渡

transition: 为 状态a->状态b 补充动画 与hover配合使用

property 要过渡的属性

duration 花费时间必须写单位（s）

timming-funtion 运动曲线 默认ease

> linear 线性  v恒定
> 
> ease  逐渐慢下来
> 
> ease-in 加速
> 
> ease-out 减速
> 
> ease-in-out 先加速后减速

delay 何时开始 默认0

transation放在div而不是div:hover中，否则回去无过渡

多阶段变化 ',' 隔开，多属性一起变化，属性填 all

## 2D变形 tansform

结合transation实现动画。

## 3D变形 tansform

## 动画 animation

简写

> infnite 无限循环

```css
@keyframes 动画名称{
    from|0%{
        /* transform */
    }
    ?%{
        
    }
    to|100%{
        /* transform */
    }
}
```

## 伸缩布局

父元素指定display为flex

### 份额 flex

使用flex属性为子元素主轴指定份额。自动缩放。

> 为父元素设置min-width指定最小宽度，不会过度缩放
> 
> max-width指定最大宽度，不会过度拉伸

会对子元素有flex属性的子盒子配额分配固定宽度剩余的宽度

### 排列方向 flex-direction

设置主轴方向，默认 row 行向，column 列向

row|column - reverse 反转

### 主轴对齐方式 justify-content

flex-start 从主轴开头开始

flex-end 从主轴末端，盒子顺序不变

center 主轴居中

space-between 首末贴近盒子，中间平均分配空白

space-around 添加相同的主轴方向边距

### 侧轴对齐方向 align-items（一行）

stretch 默认 拉伸，

> 子元素没有高度时，子元素高度适应父盒子高度
> 
> 否则相当于顶端对齐

flex-start 顶端对齐，上对齐

flex-end 底部对齐，下对齐

center 垂直居中

### 换行 flex-wrap

nowrap 默认 不换行，收缩强制一行显示，

wrap 必要时换行

wrap-reverse 必要时翻转换行，不常用

### 多行对齐 align-content

必须为 flex-direcion:row flex-wrap:wrap 才起作用

### flex-flow:flex-direction flex-wrap;

### order

排列顺序，数值越小越靠前，可以为负数，默认为0

---

转载至CSDN博主：[[李唐敏民](https://blog.csdn.net/qq_39041210 "李唐敏民")]

学习笔记-CSS（1）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

handsome模板添加服务器状态按钮

# 基于宝塔面板的sspanel魔改V3一键搭建带脚本

基于Handsome主题美化

V2Ray 基于 Nginx 的 vmess+ws+tls 一键安装脚本

黑群晖折腾记（一）安装群辉系统

万能账号密码--sql注入

使Typecho支持emoji表情

畅购商城---第3章.微服务网关鉴权

百度新闻爬虫搜索引擎实战---爬虫篇（2）

学习笔记-CSS（1）

学习笔记-CSS（1）

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

学习笔记-CSS（1）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款