不同浏览器和浮动及定位

Posted opacity-m

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不同浏览器和浮动及定位相关的知识,希望对你有一定的参考价值。

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:固定定位,用于返回顶部或广告,以视口为准。脱离文档流

 

以上是关于不同浏览器和浮动及定位的主要内容,如果未能解决你的问题,请参考以下文章

CSS布局浮动和定位属性的区别

CSS权威指南 - 浮动和定位

Css3之基础-8 Css 浮动(定位,浮动定位)

网页侧边浮动条的实现

定位体系之浮动

浮动,定位,flex布局