CSS笔记

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

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

OOCSS的关键部分

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

要注意问题

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