不同浏览器和浮动及定位

Posted 2020-10-14 opacity-m

background：lineer-gradient（to right/90deg，red，yellow） 渐变/横向

border-radius：50% *** 圆角

box-shadow：x y 模糊值 外延线 颜色；

BEM

块-元素-修饰符

margin，占用

不加margin 实际面积

W3C标准盒模型算法

box-sizing：content-box/boder-box 控制计算方式/标准/IE计算方式

 

过渡 ***

transi/tion：all linear 2s； all值可变，目前表示全部

浏览器厂商前缀

-webkit- chrome
-moz- firefox
-ms- 微软
-o- 欧朋

渐收渐合 ，放在元素选择器里

旋转：transform：rotnte（45deg）

放大缩小 =1不变 &gt 1 放大 &it 1缩小 不占像素
transform：scale（1/2/.5/0.5）；

anima/tion：F45_run linear 2s； /*写在要控制的元素选择器里*/
no1 @keyframes F45_run{ /*单独作为一个选择器*/
from {

background-color：red；
}
to {
background-color：yellow；
}
}

no1 @keyframes F45_run{ /*单独作为一个选择器*/
0% {
background-color：...
}
20% {
background-color：...
}
50% {
background-color：...
}
80% {
background-color：...
}
}

html的包含块:初始化包含块

包含块的尺寸：盒模型，定位体系的影响。

三种定位体系：常规流，浮动，绝对定位

 

float /浮动

1、行内元素设置浮动后可设置高宽。
2、文本类型浮动后会折叠刀最小宽度。
3、元素的浮动始终停留在wrap的content里，不会穿越到padding。
4、子级浮动导致父级高度塌陷。 所以最好设置高度，或者用BFC块级格式化 overflow：hidden
5、浮动会影响别的元素

容器/包含块

 

头部和尾部通栏 设置宽度100%

显示屏宽度1366px 1425px 1920px

为了自适应设置宽度为100%

not（s） 不选择括号里某项

清浮动/clear

值：left/both/right

用在被浮动影响的元素上

提行清浮动

placeholder input属性值，输出文本框默认内容

 

定位/position

值：static/relative/absolute/fixed

static：为position的默认值，非静态定位
relative：相对于本身定位，浏览器（00） 点
absolute：以离它最近的，包含它的非静态定位的元素定位，一般和relative配合使用，脱离文档流。
fixed：固定定位，用于返回顶部或广告，以视口为准。脱离文档流