• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(8):css流体的多列布局、元素尺寸计算与修改

    CSS3常规使用(8):css流体的多列布局、元素尺寸计算与修改

    作者: 分类:HTML5与CSS3.0 点击: 55 次
    wordpress CMS主题:ssmay主题

      在CSS3的学习中,我了解了许多在CSS2中没有的新功能。前面的我就不多说了,本节我主要介绍我了解到的CSS3的新功能:液体多列布局、修改元素尺寸大小、解析元素的尺寸大小这3个新功能。

      1、box-sizing 解析元素内边距和边框,而无需计算。 主流浏览器 IE8+

      box-sizing:content-box 默认值,元素的border 和 padding 设置后用于元素的总长度。
      box-sizing:border-box 元素border 和 padding 设置后不记入元素的总长度。

      如下:

      div {
      background:#ccc;
      width:100px;
      height:100px;
      padding:15px;
      border:5px solid red;
      box-sizing:border-box; /* 这样,在网页上看到的 div+内边距+边框=100 */
      box-sizing:content-box; /* 这样,在网页上看到的 div+内边距+边框=120 */
      }

      2、resize 更改元素尺寸大小

      none 默认值,不允许用户调整元素大小。
      both 用户可以调节元素的宽度和高度。
      horizontal 用户可以调节元素的宽度。
      vertical 用户可以调节元素的高度。

      必须与 overflow:auto 同时使用。

      如: aside {
      resize: both;
      overflow:auto;
      }

      3、columns 流体的多列布局 要使用前缀,IE10+不需前缀

      columns 集成 column-width 和 column-count 两个属性
      column-width 定义每列列宽度
      column-count 定义分分列列数
      column-gap 定义列间距
      column-rule 定义列边框

      案例:

      div{
      -webkit-columns:4; //4列
      -webkit-column-gap:50px; //列与列之间间距 50px
      -webkit-column-rule:1px solid #ccc; //列与列之间的分隔线
      }

      css2中要想实现流体多列布局,需要许多的样式来实现,而CSS3中操作就是这么简单。

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807316381.html
    本文时间:2018-07-31 06:59:24
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.