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;”即可。

转载于:https://www.cnblogs.com/nation-blue/p/6701942.html