h5+css知识点

渐变：
       线性渐变：linear-gradient
       径向渐变：radial-gradient
       1. 渐变颜色 >= 2
       2. 渐变可以控制百分比
       3. 线性渐变上有方向
       4. 渐变前一个颜色要高度后一个颜色
           渐变分割线

6、定位

postion：
static：默认定位没开定位（静态定位）普通文档流
fixed：固定定位开定位
       找窗口进行定位
       参照物：窗口
       兄弟顶上
relative：相对定位开定位
       找自己原有的位置进行定位
       参照物：自己原有的位置
       兄弟不用顶上
absolute：绝对定位开定位
       向上找定位范围进行定位
       参照物：定位范围
       兄弟顶上
       如果没找到定位范围，找到了body

只用元素具备定位，就意味着，元素脱离了，普通文档流，进入定位文档流relative，把自己的位置保留了下来，所以兄弟顶不动

元素只有定位了， left right top bottom 才能用
left > right
top > bottom
left 和 right 同时出现，
margin 横向上 auto；元素就会居中
top 和 bottom 同理

let 和 top 没有设置值的时候，
默认就是 0 ， 0

7、浮动 float

浮动的方向只有 left 和 right
浮动元素再 NB，不能超出父视图的横向边界

浮动：两个步骤：1. 先飘脱离普通文档流。2. 找方向 left 或 right。

1、一个元素浮动了，必然影响自己的兄弟

2、一个元素要想浮动，先看自己的哥哥。如果自己的哥哥没有浮动，那么在自己哥哥的下一行进行左和右浮动。如果自己的哥哥浮动了，跟着哥哥的那一行进行浮动。

3、哥哥浮动，影响了弟弟如果弟弟自己不想受影响，弟弟自己： clear： both；

4、元素浮动，导致父元素高度塌陷可以给父元素增加 overflow：hidden；

8. 弹性布局

display: flex;
父元素开启弹性盒子，父元素控制布局规则
子元素控制自己大小

flex-direction: 4个方向；
主轴：弹性布局的方向称为主轴
justify-content: center;
次轴：另外一个方向称为次轴
align-items: center;

例：1 2 3 三个div要求显示成 3 2 1。

子元素在控制自己的大小的时候，比例值 > width，比例值(父元素剩余空间的比例值)

想要一个元素变高变低，旁边元素跟着变
1，父元素高度丢掉
2，子元素在次轴上，默认采用100%

9.、三角形

边框的本质是三角形，有了内容后，变成了梯形

10.css怎么画一个边长为屏幕宽度一半的正方形

padding: % 与width: % 参照物是一样的都是父元素的 width

11. 变形 transform：

rotate：旋转 deg
tranlate：平移 px
skew：拉伸 deg
scale：缩放倍数没有单位

字体如何变小？（超出极限值）
变形指的是视觉效果上的变形
不会影响自己也不会影响其他人

12. 动画：

1. 制作动画（帧）样式之外
   @keyframes zhuan{
       0~100
   }
2. 使用动画元素的样式内
   animation: 动画名称持续时间播放速度延迟时长播放次数
                               linear匀速 7
                               steps(8)步长 infinite

13. 鼠标悬浮：

元素:hover
鼠标悬浮，切换子元素
大元素:hover>子元素

14. overflow 单词：溢出

滚动
   1. 形成父子关系
   2. 子 > 父
   3. 给父增加 overflow：scroll；

15. 3D

1. 父元素开景深 perspective：1000px;
2. 子元素进行 3D 变形

如果子元素内部有很多小元素，此时子元素进行 3D 旋转。子元素： transform-style: preserve-3d;

16. 居中

块元素居中（只能横向居中）margin： 0 auto;
行/行内块元素居中（只能横向居中）给父元素增加： text-align: center;
定位居中：（横向和纵向都可以居中）左右都设置距离， margin： auto；
定位+变形：（横向和纵向都可以居中） left： 50%； %参数的是父元素的宽度
transform：translate(-50% , 0px); %参照的是自身的宽度
弹性布局居中：（横向和纵向都可以居中）搞清楚主轴和次轴
行内块元素和文字：默认按照文字的底线进行对齐可以给行内块元素增加 vertical-align: middle;

17. css选择器：

选择器

class选择器

id选择器 #

>选择器：下一级

空格选择器：下N级

,选择器：组合选择器

css三种引入方式：

外部样式:
       外边的css文件
       在头部标签，用：
       <link ref="stylesheet" href="css文件" >

内部样式:
在 html 文件中增加
<style>样式</style>

行内样式:
在标签上增加 style 属性

css 优先级的问题

行内样式 > 内部样式 > 外部样式
id: 100
class: 10
标签名: 1
选择器叠加值，代表优先级大小

江一意

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5+css知识点

只用元素具备定位，就意味着，元素脱离了，普通文档流，进入定位文档流relative，把自己的位置保留了下来，所以兄弟顶不动。自己独沾满一行，不允许其他元素同行能设置宽高,默认宽度是父元素宽度的100%高度靠子元素撑开。自己独占不满一行，允许其他元素同行，不能设置宽高，默认宽高没有，宽度和高度靠内容撑开行。4、元素浮动，导致父元素高度塌陷可以给父元素增加 overflow：hidden；子元素在控制自己的大小的时候，比例值 > width，比例值(父元素剩余空间的比例值)%参照的是自身的宽度。
复制链接

扫一扫