CSS

属性选择器

[属性名] 选择含有指定属性的元素

[title] 任意元素含有title

伪类选择器

伪类一般情况下都是使用 ：开头

:last-child :nth-child() :not()

伪元素选择器

伪元素使用 :: 开头

::first-line ::selection 表示选中的内容 ::before

选择器的权重

• 内联样式（行内样式） 优先级 1，0，0，0

• id选择器 0，1，0，0

• 类和伪类选择器 0，0，1，0

• 元素选择器 0，0，0，1

• 通配选择器 0，0，0，0

• 继承的样式 没有优先级*

单位

1. em

• em是相对于元素自身的字体大小来计算的
• 1em=1font-size=16px(默认情况下)
• em会根据字体大小的改变而改变

2. rem

• rem（root)是相对于根元素（html）的字体大小来计算的
• 不设置 html{font-size:},则为默认，此时元素内设置了 {font-size} 也不管用
• 移动端为了适配，会大量用到 rem

盒模型

1. 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定的

   • box-sizing:content-box:默认值，宽度和高度用来设置内容区的大小

   • box-sizing:border-box; 宽度和高度是用来设置整个盒子可见框的大小

阴影

• box-shadow用来设置元素的阴影效果，阴影不会影响页面的布局

• box-shadow:10px 10px 10px rgba(136, 136, 136,.5) x，y，阴影的模糊半径，color

浮动

1. 通过浮动可以使一个元素向其父元素的左侧或右侧移动

2. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

3. BFC(block formatting context)块级格式化环境

   • 元素开启BFC之后的特点：

     1. 不会被浮动元素所覆盖
     2. 子元素和父元素的外边距不会重叠
     3. 它可以包裹住浮动的子元素，不会出现塌陷问题

   • 清除浮动

     1. overflow: hidden
     2. .clearfix::before, .clearfix::after{

定位

1. 固定定位 fixed，参照于浏览器的视口进行定位，不会随网页的滚动条滚动，
2. 粘滞定位 sticky，可以在元素到达某个位置时，将其固定

文本样式

1. text-align：justify:两端对齐
2. vertical-align垂直对齐(相对于父元素)
3. 图片是默认对基线对齐的，所以图片和边框会有一个距离，要设置 vertical-align: top;只要改成非基线对齐即可
4. white-space空白区域，pre 保留空白（保留文本的预处理格式）
   • 单行文本溢出：overflow:hidden,text-overflow:ellipsis;
   • 多行文本溢出：display: -webkit-box-, -webkit-box-orient:vertical; -webkit-line-clamp:2;

背景

1. overflow: scroll;父元素的背景图片不随滚动条向下而消失
2. background-origin背景图片的偏移量所计算的原点
3. background-attachment 设置背景图片是否根据元素移动,背景附着
4. background-image: linear-gradient(red 0,yellow 200px);线性渐变（颜色沿着一条直线发生变化）
   • radial-gradient径向渐变（放射性的效果）
5. background-size: 100% auto;第一个表示宽度，第二个值表示高度
   • cover 图片比例不变，将元素铺满 图片比元素小，图片会被放大；图片比元素大，图片显示不完全
   • contain 图片比例不变，完整显示图片 图片比元素小，会自动重复;图片比元素大，缩放后自动重复

表格

1. 使用表格来表示格式化数据

   • table tr td / tr th
   • rowspan 纵向合并两个单元格
   • colspan 横向合并两个单元格

2. 表格样式

   • border-spacing: 指定边框的距离
   • border-collapse: collapse;设置边框的合并
   • display: table-cell 将元素设置为单元格 td，就能设置垂直居中 vertical-align: middle;
   • 浏览器会自动创建一个 tbody，并将所有tr都放进 tbody里
   • table的子元素时 thead, tbody, tfoot

表单

1. 表单 form 用于提交数据 ，将本地的数据提交给远程服务器
2. action 指定表单要提交的服务器的地址
3. 去掉表单的轮廓线 outline=0 or none
4. 防止拖拽 textarea 文本域 resize:none;
5. autofocus 设置表单项自动获取焦点，刷新后，光标自动在那里出现
6. cursor: pointer 当我们鼠标经过button 按钮的时候，鼠标变成小手
7. input button 都属于行内块元素，中间会有个空隙，加上浮动后就没有空隙了

动画

1. transition，过渡

   • transition-property，指定要实行过渡的属性，对哪些属性执行过渡效果，

2. animation

   • animation-play-state设置动画的执行状态：running 默认值 动画执行； paused 动画停止
   • animation-fill-mode 动画的填充模式
     1. none 默认值 动画执行完毕，元素回到初始位
     2. forwards 动画执行完毕，元素会停止在动画结束的位置
     3. backwards 动画延迟等待时，元素就会处于开始位置，(背景色变化时更明显)
     4. *both 结合了forwards和backwards
     5. @keyframes test

3. transform，变形

   • rotateX 旋转

   • scaleX 缩放

   • translate 平移，translateX

   • translateZ ，z轴平移，就是调整元素和人眼之间的距离

     1. perspective: 800px;设置视距
     2. 设置 transform-style:preserve 3d
     • transform-origin: 10px 10px; 变形的原点 默认值center

flex 弹性盒的样式

1. flex-direction指定弹性容器中元素的排列方式

   • row 默认值，弹性元素在容器中水平排列（左-右），row-reverse

   • column 弹性元素纵向排列（上-下），column-reverse

2. flex-flow 是 wrap 和 direction的简写属性

3. justify-content 如何分配主轴的空白空间，主轴上的元素如何排列

   • flex-start 元素沿着主轴的起边排列， *flex-end
   • center 元素居中排列
   • space-around 空白分配到元素两侧
   • space-evenly 空白分布的元素的单侧
   • space-between 空白均匀分布到元素之间

4. align-items ，辅轴上的对齐方式

• stretch 默认值，将元素的长度设置为一样的值，随着父元素的高度被拉伸
• flex-start 元素不会被拉伸，沿着辅轴起边对齐，flex-end，center
• baseline 基线对齐

5. align-content， 辅轴空白空间的分布
6. align-self: 用来覆盖弹性元素上的 align-items 单独设置

flex 弹性元素的样式

1. flex-grow: 1，弹性元素的增长系数
2. flex-shrink: 1; 弹性元素的缩减系数
3. flex-basis 元素在主轴上的基础长度，

• 主轴是横向，该值指定的是元素的 宽度
• 主轴是垂直的，该值指定的是元素的 高度
• auto，或自定义数值

像素

1. css像素，编写网页时用的像素

2. 物理像素，就是屏幕中的小点点，截图工具量出来的是物理像素

3. 默认情况下在pc端，一个css像素 = 一个物理像素

4. viewport 视口 屏幕中用来显示网页的区域

   • 可以通过改变视口的大小，改变css像素和物理像素的比值

5. 在不同的屏幕中，单位像素的大小是不同的，像素越小，屏幕越清晰

6. 移动端默认的视口大小是980px（css像素）

   • 设置网页视口大小 device-width是设备的宽度，也就是完美视口

7. viewport width ，vw ，表示视口的宽度

   • 100vw=1个视口宽度

8. rem ， 移动端适配

   • 1rem = 1 html 字体的大小
   • 1rem = 40px（设计图的像素）
   • html { font-size: 5.3333vw; 这是以16px为基础的写法
     • width: 17.325rem;
   • html { font-size: .8125rem; 这是设置了根字体为13px的写法
     • padding: 0.2rem 0.6rem;

响应式布局

1. 网页可以根据不同的设备或窗口的大小呈现出不同的效果，使一个网页适用于所有设备
2. 响应式的网站:1.移动端优先, 2.渐进增强
3. 媒体查询 *@media
   • all print screen speech
   • 媒体特性：
     • min-width 视口最小宽度（视口大于指定宽度时，样式生效）
     • max-width 视口最大宽度（视口小于指定宽度时，样式生效）
     • 断点：
       • 小于768 超小屏幕 max-width:768px 手机
       • 大于768 小屏幕 min-width:768px
       • 大于992 中型屏幕 min-width:992px pad
       • 大于1200 大屏幕 min-width:1200px 电脑
       • 以逗号连接，表示或者的关系
       • 以 and 连接，表示 与 的关系
       • @media only screen and (min-width:500px) and (max-width: 700px){ body{}
4. order 决定元素的排列顺序