CSS3 常用屬性（三）-- 使用者介面、文字、兩種盒模型

標籤：高度   屬性   text   情況   lips   hid   溢出   單詞   需要   

　　使用者介面--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 常用屬性（三）-- 使用者介面、文字、兩種盒模型