• 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 / 动画结束时触发

  • 相关阅读:
    SQL Server中查询结果拼接遇到的小问题
    Java中的类加载器----ClassLoader
    Struts2中的namespace使用
    Windows 8.1激活问题
    Zuul的使用,路由访问映射规则
    hystrixDashboard(服务监控)
    Hystrix(服务熔断,服务降级)
    POI 操作 excel表格 (简单整理)
    Feign的介绍和使用
    自定义Ribbon的负载均衡策略
  • 原文地址:https://www.cnblogs.com/kaerbnvbgfq/p/6228595.html
Copyright © 2020-2023  润新知