美文网首页
css3的新特性

css3的新特性

作者: WPeach | 来源:发表于2017-03-11 21:06 被阅读0次

    CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgba在CSS3中唯一引入的伪元素是::selection.媒体查询,多栏布局border-image

    CSS3中新增了一种盒模型计算方式:box-sizing。盒模型默认的值是content-box, 新增的值是padding-box
    和border-box,几种盒模型计算元素宽高的区别如下:

    content-box (默认)
    布局所占宽度Width:
    Width = width + padding-left + padding-right + border-left + border-right

    布局所占高度Height:
    Height = height + padding-top + padding-bottom + border-top + border-bottom

    padding-box (默认)
    布局所占宽度Width:
    Width = width(包含padding-left + padding-right) + border-top + border-bottom

    布局所占高度Height:
    Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

    border-box
    布局所占宽度Width:
    Width = width(包含padding-left + padding-right + border-left + border-right)

    布局所占高度Height:
    Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

    对BFC规范的理解?

    BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。 (W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。

    相关文章

      网友评论

          本文标题:css3的新特性

          本文链接:https://www.haomeiwen.com/subject/keezgttx.html