高质量的css--css hack ,行元素,块元素,居中,定位
2015-03-18 00:08
351 查看
1.DTD:document type definition。
2.组织css base.css+common.css+pages.css 功能职责,层叠结构。base 被所有页面都引用,是页面样式所需依赖的最底层 一个
common 组件 网页中高度重用的模块 一个
page 非高度重用模块 可谓为多个
3.css 命名 简单明了,最好用简单的英文组合
4.margin上下重叠:统一规范,要么全用margin-top,要么margin-bottom。或者,上下用padding 左右用margin
5.优先级--避免滥用子选择器,不用的选择符样式设置有冲突时,会采用权重高的选择器设置的样式。
id-100 class-10 标签-1(从内容所在的源码中的位置推算)
组合选择器class="test test1":从test与test1 在样式表中定义的位置,那个在后面,优先使用那个的样式
6.css的常见问题
1.编码,html代码、css、js三者的编码方式一致
2.尽量使用class,少使用id。原因id会限制页面的扩展性
3.css hack
1)ie条件注释法<!--[if ie]>.....<![endif]-->
2)选择符前缀 *html .test{}
3)样式属性前缀-最流行方式 height:100px;/*for all*/ *height:120px;/*for ie7*/ _height:150px;/*for ie6*/
width:120px;/*for all*/ width:120px\9;/*for ie*/
4.超链接方式LVHA顺序
方便简洁: a{} a:hover{}
5.hasLayout:IE浏览器为解析盒模型而设计的一个专有属性,用于css的解析引擎,需要触发。设计初衷是用于块元素
zoom:1 是最常用的、最安全、承成本最小的触发haslayout。若还是无效,在使用position:relative触发haslayout,但是可能会带来副作用
6.行元素 块元素
块元素:独占一行,默认情况下,其宽度自动填满父元素的宽度,即使定义了块元素的宽度,他也会独占一行,除非他设置了浮动或定位
行元素:不会独占一行,宽度随元素的内容变化,设置width, height,margin-top,margin-bottom,padding-top,padding-bottom(竖直方向)不会产生效果,但是水平方向是可以设置的
7.display:inline-block : 行内的块级元素(拥有块级元素特点的行内元素),可以设置常宽、margin、pading值,但是却不能独占一行,他的宽度并不占满父元素,而是和行元素一样,可以与其他行元素排在同一行里。它集行元素与块元素的特点于一身,是个非常有用的display类型,ie6,ie7不支持此样式
ie6,7中对行内元素触发haslayout,可以模拟display:inline-block 效果(针对于行内元素,)
span{width:100px; height:30px; display:inline-block; *vertical-align:-10px}
or span{width:100px; height:30px; zoom:1; *vertical-align:-10px}
8.relative absolute float : z-index:0 文档流
relative position可以触发top,left,right,bottom和z-index属性(默认情况下,这些属性未激活,设置了也无效)
relative:保留自己在z-index:0层的占位,
absolute:完全脱离文档流,不再z-index:0中保留占位符。
float:改变文档流,但仍在z-index:0层排列 ,float会改变正常文档流的排列,影响到周围元素。在ie6下会有双倍边距bug,通过display:inline解决
absolute 与 float 会改变display属性,为display:inline-block,可以设置长宽,但是不会占满父元素。重新设置display无效
9. 居中
行内元素(文本、图片): text-align:center
块级元素:margin:0 auto;
转载自 http://www.cnblogs.com/littlejerry/archive/2011/11/14/2248335.html
相关文章推荐
- 高质量的css--css hack ,行元素,块元素,居中,定位
- 高质量的css--css hack ,行元素,块元素,居中,定位
- css-定位元素水平居中
- 【CSS基础】绝对定位元素的水平居中 和 垂直居中
- 【CSS基础】绝对定位元素的水平居中 和 垂直居中
- css中绝对定位的元素如何让其居中显示
- CSS实现文字或图片等元素垂直、水平、绝对定位居中技术
- CSS:绝对定位元素实现水平居中
- CSS实现定位元素居中的方法
- CSS 元素垂直居中的 6种方法
- css元素定位和布局
- CSS垂直居中div中的input元素
- CSS 元素的定位
- 绝对定位元素居中--学习笔记
- 浅析CSS——元素重叠及position定位的z-index顺序
- 打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决
- css-元素水平、竖直居中
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- 浅析CSS——元素重叠及position定位的z-index顺序
- 怎么让浮动的元素和定位的元素水平垂直居中