美文网首页
CSS3 多列

CSS3 多列

作者: 随意人生_1b90 | 来源:发表于2017-05-27 17:31 被阅读0次

    1多列

    创建多个列来对文本进行布局 - 就像报纸那样

    1-1 创建多列

    column-count 属性规定元素应该被分隔的列数

    .div1 {

      height: 500px;

      width: 500px;

      margin: 50px

    }

    .div2 { column-count: 3 }

    p { text-indent: 2em }

    运行效果:

    1-2 规定列之间的间隔

    column-gap 属性规定列之间的间隔

    .div2 {

      column-count: 3;

      column-gap: 50px

    }

    运行效果

    1-3 列规则

    column-rule 属性设置列之间的宽度、样式和颜色规则

    .div2 {

    column-count: 3;

    column-rule: 5px solid #F00

    }

    运行效果:

    1-4 新的多列属性

    column-count 规定元素应该被分隔的列数。

    column-gap 规定列之间的间隔。

    column-rule 设置所有 column-rule-* 属性的简写属性。

    column-rule-color 规定列之间规则的颜色。

    column-rule-style 规定列之间规则的样式。

    column-rule-width 规定列之间规则的宽度。

    column-span 规定元素应该横跨的列数。

    column-width 规定列的宽度。

    columns 规定设置 column-width 和 column-count 的简写属性。

    2 用户界面

    2-1 resize

    resize 属性规定是否可由用户调整元素尺寸。

    .div1 {

      width: 300px;

      border: 3px solid;

      resize: both;

      overflow: auto

    }

    运行效果:

    2-2 box-sizing

    box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

    .div2 {

      width: 500px;

      border: 5px solid

    }

    p {

      box-sizing: border-box;

      float: left;

      width: 50%;

      border: 5px solid red

    }

    运行效果

    2-3 outline-offset

    outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

    轮廓与边框有两点不同:

      一,轮廓不占用空间

      二,轮廓可能是非矩形

    .div2 {

      width: 300px;

      height: 200px;

      border: 3px solid;

      padding: 20px;

      margin: 20px;

      outline: 2px solid red;

      outline-offset: 15px

    }

    运行效果:

    2-4 新的用户界面属性

    appearance 允许您将元素设置为标准用户界面元素的外观 

    box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 

    nav-down 规定在使用 arrow-down 导航键时向何处导航。 

    nav-index 设置元素的 tab 键控制次序。 

    nav-left 规定在使用 arrow-left 导航键时向何处导航。 

    nav-right 规定在使用 arrow-right 导航键时向何处导航。 

    nav-up 规定在使用 arrow-up 导航键时向何处导航。 

    outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 

    resize 规定是否可由用户对元素的尺寸进行调整。

    相关文章

      网友评论

          本文标题:CSS3 多列

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