zoukankan      html  css  js  c++  java
  • H5--第六课

    怪异盒模型:盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

    多列布局:不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count 和 column-width

    06-css3-盒模型(下),过渡和动画的监听事件

    resize: 配合overflow:auto一起使用,允许盒子调整大小
    none 不允许调整大小
    both 水平垂直都可以缩放
    horizontal 只有水平方向可以缩放
    vertical 只有垂直方向可以缩放

    box-reflect:a b c; 倒影
    a 倒影方位:above 上、below 下、left 左、right 右
    b 倒影与对象的间隔 像素/百分比
    c 遮罩层:
    none 无遮罩层
    url 图片地址
    线性渐变/径向渐变

    box-sizing:盒模型形式
    content-box 标准和模型(宽度=设定宽+padding+border+内容)
    border-box 怪异盒模型(设定总宽不变,内容看情况缩减)


    columns:a b; 多列排布(火狐要加兼容前缀)
    a 每列宽度 分解属性 column-width
    b 列数 可缺省 分解属性 column-count

    column-gap:间隙的大小,初始值和font-size一样大
    column-rule:列与列之间的边框,值类似于border
    column-span:设置给某个子元素,是否跨列 none(默认)/all

    /*只兼容谷歌*/
    -webkit-column-break-before:所有元素之前是否另起一列 auto不规定/always总是/avoid避免
    -webkit-column-break-after:所有元素之后是否另起一列 auto不规定/always总是/avoid避免

    关于禁止选中
    user-select:none; 火狐加兼容:-moz-user-select:none; IE加兼容:-ms-user-select:none;
    IE9及之前onselectstart='return false';

    伪元素 ::selection 可以修改选中内容的样式

    过渡/动画相关的监听事件
    transitionend / 过渡结束时触发
    animationstart / 动画开始时触发
    animationiteration / 动画重复执行时触发
    animationend / 动画结束时触发

  • 相关阅读:
    数学基础详解 1——微积分
    logistic回归梯度上升优化算法
    决策树
    西瓜书学习笔记(1)——模型评估与选择
    关于map与set的一点理解;
    STL中的set容器的一点总结(转)
    HDOJ 题目分类
    Train Problem I(栈)
    猜数字(规律)
    Change the ball(找规律)
  • 原文地址:https://www.cnblogs.com/kaerbnvbgfq/p/6228595.html
Copyright © 2011-2022 走看看