爱周末 » css http://zhoumo123.cn 知识分享，共同进步。zhoumo123.cn Thu, 07 Nov 2019 05:53:49 +0000 zh-CN hourly 1 http://wordpress.org/?v=4.0.1 css中rem与px，pt转换 http://zhoumo123.cn/web/css/3410.html http://zhoumo123.cn/web/css/3410.html#comments Thu, 03 Dec 2015 14:45:45 +0000 http://zhoumo123.cn/?p=3410 阅读全文 ]]> rem是css3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

例如：当前根元素html的font-size为100%，那么根据下边的参照表可以看出，其px值为16，那么我们如果要转换一个块元素的px为rem，就可以有以下写法

注：1000为需要转换元素块的宽度

1000除以16值为62.5rem

 

css中rem与px，pt转换

 

http://blog.csdn.net/xudanna/article/details/16946293

]]> http://zhoumo123.cn/web/css/3410.html/feed 0 css命名规范汇总css规范 http://zhoumo123.cn/web/css/3314.html http://zhoumo123.cn/web/css/3314.html#comments Fri, 18 Sep 2015 06:26:04 +0000 http://zhoumo123.cn/?p=3314 阅读全文 ]]> 命名规范

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。

/* 不推荐: 无意义 */ #yee-1901 {}
/* 不推荐: 与样式相关 */ .button-green {}.clear {}
/* 推荐: 特殊性 */ #gallery {}#login {}.video {}
/* 推荐: 通用性 */ .aux {}.alt {}

常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。

/* 不推荐 */ #navigation {}.atr {}
/* 推荐 */ #nav {}.author {}
类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

/* 不推荐 */ul#example {}div.error {}
/* 推荐 */#example {}.error {}

命名时需要注意的点：

规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
不允许通过1、2、3等序号进行命名
避免class与id重名
id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
class用于标识某一个类型的对象，命名必须言简意赅。
尽可能提高代码模块的复用，样式尽量用组合的方式
规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。

1、常用id的命名：

(1) 页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

(2) 导航

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3) 功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

2、常用class的命名：

(1) 颜色:使用颜色的名称或者16进制代码，如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2) 字体大小,直接使用”font+字体大小”作为名称，如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3) 对齐样式,使用对齐目标的英文名称，如

.left { float:left; }
.bottom { float:bottom; }

(4) 标题栏样式,使用”类别+功能”的方式命名，如

.barnews { }
.barproduct { }

]]> http://zhoumo123.cn/web/css/3314.html/feed 0 css文本超出显示省略号text-overflow语法 http://zhoumo123.cn/web/css/3252.html http://zhoumo123.cn/web/css/3252.html#comments Tue, 01 Sep 2015 01:53:35 +0000 http://zhoumo123.cn/?p=3252 阅读全文 ]]> CSS如何使超出文本显示省略号呢，看下csstext-overflow的用法：

语法：
text-overflow ： clip | ellipsis

取值：
clip：
不显示省略标记（…），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（…）

说明：
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

 

]]> http://zhoumo123.cn/web/css/3252.html/feed 0 css hack 各大浏览器 CSS Hack 收集 http://zhoumo123.cn/web/css/2900.html http://zhoumo123.cn/web/css/2900.html#comments Sun, 14 Jun 2015 11:26:34 +0000 http://zhoumo123.cn/?p=2900 阅读全文 ]]> 所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西，除非没有办法，我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。

css hack 各大浏览器 CSS Hack 收集

Firefox 浏览器

@-moz-document url-prefix() {
.selector {
property: value;
}
}

支持所有Gecko内核的浏览器 (包括Firefox)

*>.selector { property: value; }

Webkit 内核浏览器

@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector {
property: value;
}
}

Opera 浏览器

html:first-child>b\ody Selector {property:value;}

IE 浏览器

IE 浏览器针对不同的版本有不同个Hack方式。

IE 9

:root Selector {property: value\9;}

IE 9-

Selector {property: value\9;}

IE 8

Selector {property: value/;}

或：
@media \0screen {
Selector {property: value;}
}

IE 8+

Selector {property: value\0;}

IE 7

*+html Selector{property:value;}

或：
*:first-child+html Selector {property:value;}

IE 7-

Selector {*property: value;}

IE6

Selector {
_property: value;
}

或者：
*html Selector {
property: value;
}

http://developer.51cto.com/art/201506/479564.htm

]]> http://zhoumo123.cn/web/css/2900.html/feed 0 div css 如何实现div水平居中 http://zhoumo123.cn/web/css/225.html http://zhoumo123.cn/web/css/225.html#comments Sun, 10 Aug 2014 01:24:22 +0000 http://zhoumo123.cn/?p=225 使用DIV CSS 如何水平居中？很容易实现，水平居中使用  margin:0 auto; 

div-css-center

水平居中 效果图

 

代码如下：


<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>div css 水平居中</title>
<style>
body{ font-size:12px; font-family:"Microsoft Yahei";}
.w{margin-top:50px;}
.box{ width:300px;/*必须设置宽度*/ height:200px; background:#CCC; margin:0 auto; }
.tit{ text-align:center; padding-top:70px; font-size:16px;}
</style>
</head>

<body>
    <div class="w">
        <div class="box">
            <div class="tit">div css 水平居中 <br>zhoumo123.cn</div>
        </div>
    </div>
</body>
</html>

居中的div必须设置宽度，达到浏览器兼容性 代码头部必须有 文档声明  “<!doctype html>” ，添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

]]> http://zhoumo123.cn/web/css/225.html/feed 1 CSS中单位px和em的区别解析 http://zhoumo123.cn/web/css/199.html http://zhoumo123.cn/web/css/199.html#comments Fri, 08 Aug 2014 06:59:41 +0000 http://zhoumo123.cn/?p=199 阅读全文 ]]> 你对CSS中单位px和em的区别是否了解，这里和大家分享一下，px像素（Pixel），相对长度单位，像素px是相对于显示器屏幕分辨率而言的；而em也是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

彻底弄懂CSS中单位px和em的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em，那么两者有什么区别，又各自有什么优劣呢？

1.IE无法调整那些使用px作为单位的字体大小；

2.国外的大部分网站能够调整的原因在于其使用了em作为字体单位；

3.Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在CSS中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

◆em有如下特点：

1.em的值并不是固定的；

2.em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

1.body选择器中声明Font-size=62.5%；

2.将你的原来的px数值除以10，然后换上em作为单位；

3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em,因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

]]> http://zhoumo123.cn/web/css/199.html/feed 0 响应式TAB-FullWidthTabs http://zhoumo123.cn/web/jquery/46.html http://zhoumo123.cn/web/jquery/46.html#comments Thu, 22 May 2014 03:37:16 +0000 http://zhoumo123.cn/?p=46 响应式TAB-FullWidthTabs

在PC和移动设备上的显示效果如下图，根据屏幕大小，采用不同布局来展示内容。

BlueprintFullWidthTabs

演示地址 http://tympanus.net/Blueprints/FullWidthTabs/

下载地址 http://tympanus.net/Blueprints/FullWidthTabs/FullWidthTabs.zip

]]> http://zhoumo123.cn/web/jquery/46.html/feed 0