首页 > 代码库 > CSS3 常用属性(三)-- 用户界面、文字、两种盒模型

CSS3 常用属性(三)-- 用户界面、文字、两种盒模型

  用户界面--column

  关于用户界面,我们先了解一下在块元素中写文字时,浏览器中的呈现情况,这个其实很明显,所有的文本内容会在块元素内从左到右一个个字排列,排满后,从上到下一排排渲染……然而,有些时候,页面需求的呈现方式是,类似于报纸似得,将一段文本内容,分成多列布局显示。

  用户界面使用的示例如下:

.font{
    width:300px;
    height:300px;
    border:1px solid #000;
    margin:0px auto;
    column-count:3;  /* 定义数量 */
    column-width:1em;   /* 定义每列的最小的宽度 */
    column-rule: 1px dotted red;  /* 定义间距填充的样式,不占位置 */
    column-gap: 0em;  /* 定义每一列的间距 */
    column-fill: auto;    /* 定义是否是平衡每一列的显示高度 */
    overflow: hidden;
}

  

  文本模型--text

  在css3中,利用它的新特性,给文本添加阴影,指定换行模式,规定文本的轮廓等一些效果,极大的弥补了css2当中的不足。

  接下来,我将一个一个细说每一个 CSS3 文本属性

    text-overflow:规定当文本溢出包含元素时发生的事情,该属性一个比较重要的值是ellipsis,使用省略号来代表溢出的文本。

    text-fill-color:给文字指定填充颜色。

    text-stroke:给文字描边,缩写,展开后如下两条。

    text-stroke-width:给文字描边的宽度。

    text-stroke-color:给文字描边的颜色。

    text-shadow:向文本添加阴影,后加四个值,上下偏移,左右偏移,羽化,颜色。

    word-break:规定非中日韩文本的换行规则。

    word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。

 

  盒模型--box-sizing

      盒模型有两种,一种是,盒子的padding和border是向外扩展的,另一种是向内扩展的,也就是说,第二种的盒模型,padding和border不会使元素在页面中的占位增大。

      目前,各大主流浏览器,默认的盒模型就是第一种,想要让元素实现第二种盒模型,只需要在该元素的样式表中添加“box-sizing:border-box;”即可。

CSS3 常用属性(三)-- 用户界面、文字、两种盒模型