大家一起来突击下前端知识的盲区（1）

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布局

子盒子：

父盒子：


5、让元素消失

  • opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
  • visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
  • display:none, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
  • z-index=-1置于其他元素下面

6、清除浮动

  1. 在浮动元素后面添加 clear:both 的空 div 元素，
  2. 给父元素添加 overflow:hidden 或者 auto 样式，触发BFC。
  3. 使用伪元素，也是在元素末尾添加一个点并带有 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

相关

标签