CSS笔记

99 阅读9分钟

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有两个原则:

  1. 独立的结构和样式
  2. 独立的容器和内容

OOCSS的关键部分

  1. 创建一个组件库
  2. 独立的容器和内容,并且避免样式来依赖位置
  3. 独立的结构和样式
  4. 使用类名为扩展基本对象
  5. 坚持以语义类来命名类名

要注意问题

  • 找出所有可重用的组件,并给这个组件创建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;}

预览效果 oocss.org/grids_docs.…

间距(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属性,