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

时间: 04-10

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

css如何实现一个文字两种颜色代码实例

css如何实现一个文字两种颜色代码实例:在实际应用中可能需要设置文本效果比较炫酷.有一种效果就是将一个文字设置为两种颜色,使用普通的方法肯定是无法实现.下面就分享一下实现此功能的代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

HTML/CSS从零开始-常用属性(三)

一.css文本属性 (1)文本大小{font-size:value;} 单位:pt:9pt=12px;浏览器默认字体大小为16px          em:1em=16px;    在CSS2.0中    xx-small:9px     x-small:11px       small:13px       medium:16px       large:19px     x-large:23px    xx-large:27px (2)字体颜色 {color: rbg250,250,250/

GitHub常用上传文件的两种方法 附带常见的问题及Git安装教程

从早上下课到现在一直在琢磨如何给Gethub下载本地文件,中午饭都没吃.还好是解决了,感觉挺有成就感的.O(∩_∩)O哈哈~ 好哒 闲话不说,说重点. 一.git的安装 百度云:http://pan.baidu.com/s/1mhFy8Ik 打开后 点next 2.继续点next 3.继续点next 4.选第一行是默认windows使用 选第二行是Windows和Linux都可以 点next 5.可以不用管,选择默认就可以了 点next 6.安装成功后弹出 7 这时候你找到你的git文件夹,点击

css3常用属性

CSS3 动画属性(Animation) @keyframes //规定动画. animation //所有动画属性的简写属性,除了 animation-play-state 属性. animation-name //规定 @keyframes 动画的名称. animation-duration //规定动画完成一个周期所花费的秒或毫秒. animation-timing-function //规定动画的速度曲线. animation-delay //规定动画何时开始. animation-it

最常见的两种防御模型|安全千字文系列2

为了保证系统的机密性.可靠性.稳定性,我们要围绕系统的核心建立一些防御措施,最常见的防御措施模型有两种,分别被描述为棒棒糖和洋葱. 棒棒糖模型 最常见的防御模型被称为便捷安全,也就是围绕有价值的对象建立一个屏障,这个屏障可以是逻辑上的也可以是物理的.很多机构都会选择采用这样的防御模式,比如断绝企业内网与英特网的连接,或者在内外网的交界处放置防火墙,或者有些企业在网络边界上设置认证服务器等. 这样的防御方式,就像一个棒棒糖一样,外层是保护屏障,中心是被保护的信息. 这种模型的好处很明显,就是物料成

css3常用属性之 skew翻转角度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

属性的两种定义方式

属性的定义有两种方式: 装饰器 即:在方法上应用装饰器 静态字段 即:在类中定义值为property对象的静态字段 装饰器方式:在类的普通方法上应用@property装饰器 新式类:我们知道Python中的类有经典类和新式类,新式类的属性比经典类的属性丰富.( 如果类继object,那么该类是新式类 ) class Goods(object): def __init__(self): self.original_price = 100 #普通字段 self.dicount_rate = 0.8

0821基础控件(UIButton常用属性)

一.可以通过代码的方式创建UIButton 1.通用实例化对象方法: UIButton *button = [[UIButton alloc] initWithFrame:rect]; 2.快速实例化对象方法: UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 提示: 在OC开发中,实例化任何类型的非自定义对象,都请首先尝试一下是否存在快速定义方法.如果存在快速定义方法,就尽量不要使用init之类的方法实例

0821基础控件(UILabel常用属性)

一.UILabel常用属性1--实例化和设置文字 // 实例化UILabel并指定其边框 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 210.0, 320.0, 40.0)]; // 设置label显示的文本 [label setText:@"Hello World"]; // 设置字体和字体大小 [label setFont:[UIFont fontWithName:@"Helvetica-B