1、css
盒模型:
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距margin,边框border,填充padding,和实际内容content。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
box-sizing: content-box
(W3C盒模型,又名标准盒模型):元素的宽高大小表现为内容的大小。box-sizing: border-box
(IE盒模型,又名怪异盒模型):元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。2、CSS3的新特性
- word-wrap 文字换行
- text-overflow 超过指定容器的边界时如何显示
- text-decoration 文字渲染
- text-shadow文字阴影
- gradient渐变效果
- transition过渡效果 transition-duration:过渡的持续时间
- transform拉伸,压缩,旋转,偏移等变换
- animation动画
transition和animation的区别:
animation 和 transition 大部分属性是相同的,他们都是随时间改变元素的属性值,
他们的主要区别是 transition 需要触发一个事件才能改变属性,
而animation不需要触发任何事件的情况下才会随时间改变属性值,
并且transition为2帧,从from .... to,而animation可以一帧一帧的。
3、BFC
BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器
BFC应用
- 防止margin重叠
- 清除内部浮动
- 自适应两(多)栏布局
- 防止字体环绕
触发BFC条件
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute、fixed
BFC的特性
- 内部的Box会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定
- bfc的区域不会与float的元素区域重叠。
- 计算bfc的高度时,浮动元素也参与计算
- bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
4、flex布局
子盒子:
父盒子:
![](https://img2018.cnblogs.com/common/1887596/201912/1887596-20191213090038432-1841527005.png)
5、让元素消失
- opacity:0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定了一些事件,如click事件也能触发
- visibility:hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
- display:none, 把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删掉
- z-index=-1置于其他元素下面
6、清除浮动
- 在浮动元素后面添加
clear:both
的空 div 元素, - 给父元素添加
overflow:hidden
或者 auto 样式,触发BFC。 - 使用伪元素,也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。
建议使用第三种方法,不会在页面新增加div、文档结构更加清晰。
7、calc函数
calc函数是css3新增的功能,可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值。
#div1 { position: absolute; left: 50px; width: calc( 100% / (100px * 2) ); //兼容写法 width: -moz-calc( 100% / (100px * 2) ); width: -webkit-calc( 100% / (100px * 2) ); border: 1px solid black; }
注意点:
- 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
- calc()函数支持 + - * / 运算;
- 对于不支持 calc() 的浏览器,整个属性值表达式将被忽略。不过我们可以对那些不支持 calc()的浏览器,使用一个固定值作为回退。
8、CSS画圆半圆扇形三角梯形
/* 半圆 */ .half-circle{ height: 50px; border-radius: 50px 50px 0 0; } /* 扇形 */ .sector{ border-radius: 100px 0 0; } /* 三角 */ .triangle{ width: 0px; height: 0px; background: none; border: 50px solid red; border-color: red transparent transparent transparent; } /* 梯形 */ .ladder{ width: 50px; height: 0px; background: none; border: 50px solid red; border-color: red transparent transparent transparent; }
q