CSS3笔记

一、css常用选择器

1.标签名选择

2.id选择器

<p id="red"></p>

调用时直接用#red{}

3.类选择器（class）

4.通配选择器（*）

5.复合选择器

• 交集选择器（选择器1.选择器2{}）
• 并集选择器（选择器1，选择器2{）

6.关系选择器

• 子元素选择器（>）
• 后代元素选择器（&nbsp）
• 兄弟元素选择器（+选择下一个兄弟，~选择下面所有兄弟）

7.属性选择器

• 【属性名】 选择指定属性的元素
• 【属性名=属性值】
• 【属性名^=属性值】指定属性值开头元素
• 【属性名$=属性值】指定属性值结尾元素
• 【属性名*=属性值】指定属性值含有某值元素

8.伪类选择器（:伪类，::伪元素）

二、常用知识

1.em与rem

• em：相对于元素的字体大小计算 1em=1font-size
• rem：相对于根元素的字体大小计算

2.文档流

网页是多层的结构，层中的最底层称为文档流

3.盒子模型

• 内容区（content）
• 边框（boder）
• 内边距（padding）
• 外边距（magin）

4.overflow（溢出显示）

• visible:默认值，显示溢出
• hidden：裁剪，不显示
• scroll：滚动条，水平垂直都有
• auto：根据需要生成滚动条

5.display（元素显示类型）

• inline
• block
• inline-block
• table
• none

6.visibility（元素显示状态）

• visible：默认值
• hidden：隐藏，但占位

7.居中方式

• 方法一：text-aline：center；line-height与height保持一致
• 方法二：magin：0 auto；
• 方法三：position，left、top、right、bottom：0，magin：auto；
• 方法四：postion:ausolute;left:50%;top:50%;transfrom:translateX(-50%);translateY：（-50%）；
• 方法五：display：table-cell；text-align：center；vertical：middle；

8.去掉下划线

text-decoration：none；

9.盒子大小

box-sizing：

• content-box
• border-box

10.轮廓、阴影、圆角

outline：不影响下行因边框原因的布局
box-shadow：阴影效果
boder-radius：圆角

11.高度塌陷

因子元素浮动，无法撑起父元素高度，导致父元素高度丢失

.clearfix::before,
.clearfix::after{
content:";
dispaly:table;
clear:both;

12.定位

position：

• static：静止，没有开启定位
• relative：相对定位
• absolute：绝对定位 脱离文档流
• fixed：固定定位 脱离文档流
• sticky：粘滞定位

13.层级

z-index

14.字体的简写属性

font：bold加粗，italic斜体，字体大小/行高 字体族

font-weight：

• normal
• bold
• 100-900 九个级别

font-style：

• normal
• italic

text-align 水平对齐

• left 默认
• center
• right
• justify 两端对齐

vertical-align 垂直对齐

• baseline
• top
• bottom
• middle

text-decoration 文本修饰

• underline 下划线
• line-through 删除线
• overline 上划线
• none

15.网页如何处理空白

white-space

• normal
• nowrap 不换行
• pre 保留空白

16.背景

1.背景图片：
background-img：url（“ ”）；
2.背景的重复方式：
background-repeat：设置背景的重复方式

• repeat 默认值
• repeat-x 沿x轴重复
• repeat-y
• no-repeat

3.背景图片位置：
background-position（相对于视口移动）
4.设置背景范围：

background-clip

• border-box 默认值 背景出现在边框下面
• padding-box 只出现在内容区和内边距
• content-box

5.其他：

background-origin

背景图片偏移量计算原点

• padding-box
• content-box
• border-box

background-size

• 宽度 高度
• cover 图片比例不变，将元素铺满
• contain 图片比例不变，完整显示图片

background-attachment

背景图片是否跟随元素移动

• scroll 默认值
• fixed 固定

17.雪碧图（css-sprite）

优点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。

18.线性渐变

background-image

• linear-gradient(to right,red,yellow);
• repeating-linear-gradient(red 50px,yellow 100px);

19.径向渐变（从中心向四周扩散）

background-image

• radial-gradient(大小at位置,颜色 位置,颜色 位置）

20.表格

 <table>
       <!-- 行 -->
       <tr>
           <td>单元格</td>
           <td colspan="2">横向合并两个单元格</td>
           <td rowspan="2">纵向合并两个单元格</td>
       </tr>
   </table>

边框合并（折叠）：
border-collapse:collapse；

21.表单（将本地数据提交给服务器）

   <form action="表单要提交的服务器的地址">
       <!-- 文本框 -->
       <input type="text" name="#" autocomplete="on/off">
       <!-- 提交按钮 -->
       <input type="submit" value="注册">
       <!-- 密码框 -->
       <input type="password" name="#">
       <!-- 单选按钮 圆形 -->
       <input type="radio" name="#" value="a" checked>
       <input type="radio" name="#" value="b">
       <!-- 多选框 -->
       <input type="checkbox" name="#" value="2">
       <input type="checkbox" name="#" value="3">
       <!-- 下拉列表 -->
       <select name="#" id="#">
           <option value="i">选项一</option>
           <option value="ii">选项二</option>
       </select>
       <!-- 普通按钮 -->
       <input type="button" value="按钮">
       <!-- 重置按钮 -->
       <input type="reset">
       <!-- 颜色选择框 -->
       <input type="color">
   </form>
   <!-- 伪类(获取焦点)
   ：focus{}
       <button></button>与input一样
   -->

22.标题栏logo

文件：favicon.ico

 <link rel="icon" href="">

23.过渡

transition

• property:多属性
• duration:指定持续时间
• function:过渡的时序函数
• delay:过渡效果的延迟

transition-function

• ease 慢速开始-加速-减速
• linear 匀速
• ease-in 加速
• ease-out 减速
• ease-in-out

transition-timing-function

• cubic-bezier(); 贝赛尔曲线
• steps(); 分布执行

24.动画

要设置一个关键帧@keyframes name{
from{其中from也可写成0%~100%}
to{}
}

animation-name 声明关键帧名字

animation-duration:动画的执行时间

animation-delay:动画延时

animation-iteration-count:

• 动画的执行次数
• infinite 无限执行

animation-play-state:动画的执行状态

• running
• paused

animation-fill-mode:动画的填充模式

• none
• forwards 动画执行完毕后停止在最后的位置
• backwards 动画延时时，元素处于开始位置
• both 结合前两种

25.变形

（1）平移

transform:

• translateX()
• translateY()
• translateZ()
  注意：z轴平移时属于立体效果，所以需设置视距
  html{
  perspective：800px；
  }

（2）旋转

transformer：

• rotateX
• rotateY
• rotateZ:45deg;
  元素设置不透明效果：opacity
  设置3d变形：transform-style:preserve-3d;

transform:scale(); 放大缩小

• scaleX();
• scaleY();
• scale(); 双方向
• scaleZ();

transform-origin:center默认值；可设置20px 20px 或者left center

26.弹性盒

弹性容器的设置：
display:flex; 或者inline-flex；

flex-direction: 弹性元素的排列方向

• colum:自上向下
• colum-reverse
• row
• row-reverse

弹性元素的属性

• flex-grow 伸展的系数 默认值0
• flex-shrink 收缩的系数 默认值1

flex-wrap

• nowarp：默认值
• wrap：沿辅轴方向自动换行
• wrap-reverse

flex-flow：wrap与direction的缩写

flex-flow:row wrap；

容器

justify-content：如何分配主轴上的空白空间

• flex-start
• flex-end
• center
• space-around 空白分布到元素双侧
• space-evenly 空白分布到元素单侧
• space-between

align-items:辅轴对齐

• stretch 元素长度设置相同的值
• flex-start
• flex-end
• center
• baseline

align-content 辅轴空白空间分布

元素

align-self：覆盖align-items
flex-basis：元素的基础长度，默认auto
总写：flex：

• initial =flex:0 1 auto
• auto=flex:1 1 auto
• none

order:排列顺序

27.响应式布局（媒体查询）

@media 查询规则{}
查询规则：

• all
• print 打印设备
• screen 带屏幕设备
• speech 屏幕阅读器
  例如：
  @media only screen{
  @media(min-width:510px){…}
  }
  或者：
  @media only screen and (min-width:510px) and (max-width:700px) {…}