HTML.5盒相关样式

盒的类型
基本类型,block类型;inline类型。
block基本就是div,p这些常用的元素所具有的类型
inlnie基本是a,span这些常用元素所具有的类型
inline-block类型:它具备block和inline两者的功能,比如像让元素排在一排,用float浮动,但是浮动会让结构变得复杂化,这里就可以用inline-block,这时它具备inline的功能,自动排在一排了,但是inline的类型设置宽高不起作用啊?怎么办?别忘了它还具备block的功能,所以inline-block既能排在一排又可以设置宽高,一个类型,两种功能,厉害吧^_^ ,顺便说一下,目前为止它得到了Safari、Opera、Chorme、Firefox及IE8+浏览器的支持。
inline-table类型:table元素是属于block类型的,所以周围的内容变成了table独自一行,内容分上下了;要想让内容围绕table周围,给table设置inline-table类型,表格就与其它内容同处一行了。该类型得到Safari、Opera、Chrome、Firefox及IE8+的支持。 
list-item类型:给div设置list-item类型后,它就被认为是一个列表的标记。同时还可以给它设置list-style-type属性的值为circle,这样,本来默认具备block的div就可以当做列表来使用了,而且该列表标记左侧还有个空心小圆圈装饰。
none类型:给元素设置了none类型,这个元素在html页面上就不被显示了。
太多了不再赘述,看下表吧
对盒中容纳不下的内容的显示
overflow属性,得到Firefox、Safari、Opera、IE、Chrome的支持。
overflow:hidden 溢出隐藏
overflow:scroll元素容器出现固定的水平滚动条与垂直滚动条
overflow:auto当内容超出范围时出现水平滚动条或垂直滚动条
overflow:visible显示效果与不设置overflow时一样,超出的内容依原样显示
overflow-x属性与overflow-y属性:可以单独指定在水平方向上或垂直方向上内容超出盒的容纳范围时的显示方法。它是IE中独自扩展出来的属性。在CSS3中被采用并被标准化。目前得到IE、Firefox、Safari 3+ 、Opera10+ 的支持。
text-overflow属性:当overflow值为hidden时,使用该属性可以将溢出的文本在盒末尾显示一个代表省略号的符号"..."。但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效。它目前得到IE6+、Safari、Opera的支持。完整的溢出因此并显示省略符号的写法:
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
对盒使用阴影:
box-shadow属性的使用方法:
box-shadow:length length length color; 参数说明:阴影离开被设置元素的横向距离、阴影离开被设置元素的纵向距离、阴影的模糊半径、阴影的颜色。前两个参数设置为负值,则表示向相反方向绘制阴影。模糊半径设置为0时,表示绘制不向外模糊的阴影。
对第一个文字或第一行使用阴影:这个先介绍下选择器
第一个文字:元素:first-letter{}
第一行文字:元素:first-line{}
对表格及单元格使用阴影、对子元素使用阴影(一些小技巧,自己练习一下吧)

指定针对元素的宽高的计算方法
box-sizing属性

box-sizing:content-box:表示元素的宽高不包括内部补白区域,以及边框的宽高值
box-sizing:border-box: 表示元素的宽高包括内部补白区域,以及边框的宽高值
各浏览器写法
Firefox  -moz-box-sizing
Safari或Chrome  -Webkit-box-sizing
Opera   box-sizing
IE   -ms-box-sizing
在Firefox中还可以box-sizing:padding-box 它表示指定的宽高值包括内容的宽高+内容补白区域的宽高,不包括边框的宽高

为啥子要使用box-sizing属性咧? 目的是控制元素的总宽度,确保元素并列显示,不溢出。

 
发表评论
验证码: 点击我更换图片