line-height
[css行高line-height的一些深入理解及应用] www.zhangxinxu.com/wordpress/2…
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。
有一个空的div
,<div></div>
,如果没有设置至少大于1
像素高度height
值时,该div
的高度就是个0
。如果该div
里面打入了一个空格或是文字,则此div
就会有一个高度。那么您思考过没有,为什么div
里面有文字后就会有高度呢?
事实上,深入理解inline
模型后,会发现,根本不是文字撑开了div
的高度,而是line-height
!
CSS代码:
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}
HTML代码:
<div class="test1">测试</div>
<div class="test2">测试</div>
结果如下图(windows IE6浏览器下):
原因
在inline box
模型中,有个line boxes
,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes
。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes
罩着你;但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes
,于是总计五个line boxes
。
line boxes
什么特性也没有,就高度。所以一个没有设置height
属性的div
的高度就是由一个一个line boxes
的高度堆积而成的。
其实line boxes
不是直接的生产者,真正的活儿都是它的手下 – inline boxes
干的,这些手下就是文字啦,图片啊。line boxes
只是个考察汇报人员,考察它的手下谁的实际line-height
值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。
line-height
的单位最好设置为数字
"px"使用px
定值,由于继承性,无法实现根据文字大小自动调整间距,会出现大号文字重叠的现象。
“%”
150%
虽然和1.5
在值上是一样的,但是它们也是有差别的,差别在于继承性,使用百分比会计算line-height
的值,然后以px
像素为单位继承下去,而1.5
则是先继承1.5
这个值,遍历到了该标签再计算去line-height
的像素值。
OOCSS
面向对象的CSS有两个原则:
- 独立的结构和样式
- 独立的容器和内容
OOCSS的关键部分
- 创建一个组件库
- 独立的容器和内容,并且避免样式来依赖位置
- 独立的结构和样式
- 使用类名为扩展基本对象
- 坚持以语义类来命名类名
要注意问题
- 找出所有可重用的组件,并给这个组件创建HTML和CSS样式规则。
- 独立的容器和内容,并且避免样式依赖位置也是用面向对象的方法创建CSS的基本要求之一,这里的核心思想是,把容器和内容独立出来,这样的好处是,内从插入到任何容器中都可以。
- OOCSS的做法主张避免类名嵌套的处理方法。OOCSS主张是通过在基础组件中添加更多的类,从而扩展基础组件的CSS规则,这也就是我们前面所说的OOCSS的扩展性。
HTML Markup
CSS规则
.post .metadata {css code}
.comment .metadata {css code}
.userInfo .metadata {css code}
- 可重用性的组件的重要性创建基础的结构(HTML)和创建基础的类名,就是在给这个刚创建的对象写样式时,需要把样式和其结构独立出来,更简明的讲就是定义一个组件库中定义一个基础类,我们不应该给样式创建类似于“border,width,height,background”等样式规则。
- 始终坚持以逻辑和语义来给元素定义类名才是王道
我们不应定义类名为“redText”,定义为"warning"将更有语义化,更具有重用性。
核心
出处: www.w3cplus.com/css/oocss-c…
媒体对象(Media Objects)
媒体对象常见的就是“左边是图像,右边是描述性的内容排列;或者左边是描述性内容排列,右边是图片”,如下图所示:
oocss用在媒体对象上,意味着图像可以是任意大小,并且描述性文本内容不会围绕着图片周围,只是保持在一条直线上左对齐,如上图那样的效果,很多网站都应用过。我们只需要为这样的效果创建一个对象,这样我们就可以在不同的项目中重复使用。首先创建html。
<div class="media clearfix">
<a href="aboutme.html" class="fixedMedia icon">
<img src="myimage.png" alt="img" />
</a>
<div class="mediaDes clearfix">
Something about me
</div>
</div>
.media {margin: 10px;}
.mediaDes {display: table-cell;zoom:1;}
.mediaDes > :first-child{margin-top:0;}/*你也可以在这个标签中加上一个类名.nmT {margin-top:0;}*/
.mediaDes > :last-child{margin-bottom:0;}/*在这个标签上加上一个类名.nmB {margin-bottom:0}*/
.fixedMedia {float:left;margin-right:10px;}
/*这两个属性完全可以用类名来代替:.fl{float:left} .mrm {margin-right: 10px}*/
.fixedMedia img {display: block;}
.fixedMediaR {float:right;margin-left: 10px;}
/*这两个属性完全可以用类名来代替:.fr{float:right} .mlm {margin-left: 10px}*/
上面是图像在左边,描述生内容在右边,如果你想图像在右边,描述性内容在左边。其实只要把fixedMedia换成fixedMdiaR就实能实现了。
网格系统(Grid System)
oocss网格系统使用基于宽度的百分比来设定的,其类名相当的好记,就是其宽度所占宽度的几分之几。
.size1of1{float:none;}/*100%宽度*/
.size1of2{width:50%;}/*占总宽度的一半:1/2*/
.size1of3{width:33.33333%;}/*占总宽度的三分之一:1/3*/
.size2of3{width:66.66666%;}/*占总宽度的三分之二:2/3*/
.size1of4{width:25%;}/*占总宽度的四分之一:1/4*/
.size3of4{width:75%;}/*占总宽度的四分之 三:3/4*/
.size1of5{width:20%;}/*占总宽度的五分之一:1/5*/
.size2of5{width:40%;}/*占总宽度的五分之二:2/5*/
.size3of5{width:60%;}/*占总宽度的五分之三:3/5*/
.size4of5{width:80%;}/*占总宽度的五分之四:4/5*/
为了让网格趋运行更稳定,可以用一个line的div一包装每组单元格,如下所示.
<div class="line">
<div class="unit size3of5"></div>
<div class="unit size1of5"></div>
<div class="unit size1of5 lastUnit"></div>
</div>
我们可以给这种结构写上一个统一的样式:
.line:before,.line:after{content:"";display:table;}
.line:after{clear:both;}
.line{*zoom:1;}
.unit{float:left;}
.unitRight{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{float:none;display:block;display:table-cell;width:9999em;*width:auto;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
间距(spacing)
/* ====== Default spacing ====== */
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote, .media {margin:10px;}
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
/* spacing helpers
p,m = padding,margin
a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
s,m,l,n = small(5px),medium(10px),large(20px),none(0px)
*/
.ptn,.pvn,.pan{padding-top:0px !important}
.pts,.pvs,.pas{padding-top:5px !important}
.ptm,.pvm,.pam{padding-top:10px !important}
.ptl,.pvl,.pal{padding-top:20px !important}
.prn,.phn,.pan{padding-right:0px !important}
.prs,.phs,.pas{padding-right:5px !important}
.prm,.phm,.pam{padding-right:10px !important}
.prl,.phl,.pal{padding-right:20px !important}
.pbn,.pvn,.pan{padding-bottom:0px !important}
.pbs,.pvs,.pas{padding-bottom:5px !important}
.pbm,.pvm,.pam{padding-bottom:10px !important}
.pbl,.pvl,.pal{padding-bottom:20px !important}
.pln,.phn,.pan{padding-left:0px !important}
.pls,.phs,.pas{padding-left:5px !important}
.plm,.phm,.pam{padding-left:10px !important}
.pll,.phl,.pal{padding-left:20px !important}
.mtn,.mvn,.man{margin-top:0px !important}
.mts,.mvs,.mas{margin-top:5px !important}
.mtm,.mvm,.mam{margin-top:10px !important}
.mtl,.mvl,.mal{margin-top:20px !important}
.mrn,.mhn,.man{margin-right:0px !important}
.mrs,.mhs,.mas{margin-right:5px !important}
.mrm,.mhm,.mam{margin-right:10px !important}
.mrl,.mhl,.mal{margin-right:20px !important}
.mbn,.mvn,.man{margin-bottom:0px !important}
.mbs,.mvs,.mas{margin-bottom:5px !important}
.mbm,.mvm,.mam{margin-bottom:10px !important}
.mbl,.mvl,.mal{margin-bottom:20px !important}
.mln,.mhn,.man{margin-left:0px !important}
.mls,.mhs,.mas{margin-left:5px !important}
.mlm,.mhm,.mam{margin-left:10px !important}
.mll,.mhl,.mal{margin-left:20px !important}
优缺点
缺点
- OOCSS适合真正的大型网站开发,因为大型网站用到的可重用性组件特别的多,如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
- 如果没用巧妙的使用,创建组件可能对于你来说是一堆没用的东西,成为一烂摊子,给你的维护带来意想不到的杯具,说不定还是个维护的噩梦。
- 最好给每一个组件备写一份说明文档,有助于调用与维护
优点
- 减少CSS代码
- 具有清洁的HTML标记,有语义的类名,逻辑性强的层次关系
- 语义标记,有助于SEO
- 更好的页面优化,更快的加载时间(因为有很多组件重用)
- 可扩展的标记和CSS样式,有更多的组件可以放到库中,而不影响其他的组件
- 能轻松构造新的页面布局,或制作新的页面风格
AMCSS
[AMCSS] amcss.github.io/ AMCSS官网
AMCSS 是Attribute Modules for CSS的缩写,表示借助HTML属性来进行CSS相关开发。
传统我们多个模块特性是通过多个类名进行控制的,典型如下:
<div class="button button-large button-blue">Button</div>
而AMCSS则是基于属性控制,例如:
<div button="large blue">Button</div>
为了避免属性名称冲突,我们可以加一个统一的前缀,例如am-
,于是有:
<div am-button="large blue">Button</div>
此技术能够实行离不开这个一个选择器: [attr~=”val”]
看法
有对AMCSS的优点进行说明:每个属性有效地声明一个单独的命名空间,用于封装样式信息,从而产生更易于阅读和维护的HTML和CSS。
有时候,AMCSS这套基于属性选择器开发的思路还是很有用的。
例如,
- 我们经常需要在DOM元素上存储数据,例如放在
data-store
属性中,此时,配合AMCSS,我们可以非常高效进行不同数据不同样式的控制。 - button尺寸
class=”button button-small button-big”
可以替代成用size=“small”
,size=“big”
之类的代替尺寸 - 用来定义按钮的样式,例如 type=”ghost”,type=”round”之类的
无障碍访问中的aria-*
本质上也都是通过属性控制,现代Web Components的UI控制也是基于HTML属性,