css样式学习笔记六

注：其中的内容只是自己学习时的一些笔记，好记性不如烂笔头，在此记录方便以后巩固！

网上搜索css中的各种命名规范

一、命名

类以及id、文件命名

1.根据开发文档去命名

2.业内常用命名规范命名

二、类的命名

1）根据布局结构去命名header left right center

2）根据功能去命名 newslist menu search

3）根据作用

4）命名的多个单词之间使用‘-’或‘_’

三、css文件的命名

global.css 全局样式

layout.css 布局

css的文件名称可以与html页面的名称相同

css命名注意：

1.一律小写

2.尽量用英文或者英文加数字组成

3.尽量不加杠和下划线

4.尽量不要缩写

5.根据功能命名

四、清除浮动

浮动元素影响的是他自己和紧挨着他的下一个元素

每当一行结束的时候就需要清除一下浮动（上面是一个div 下面是一个div ）

清除浮动的方式

1）加一个块级元素 设置他的clear:both <div class='clear'></div>

2)使用万能清除法

在css中添加一下代码

.clear:after

{

display:block;

clear:both;

height:0;

line-height:0;

content:"";

}

.clear

{

*zoom:1; /*兼容ie7及以下版本*/

}

clear的类为最后一个浮动的元素

：after表示在某个元素之后添加内容

zoom原本表示元素的缩放

zoom:1 元素原本大小 >1表放大 <1表缩放

测试各种浮动

五、溢出

overflow 处理内容的溢出

块元素的高度默认值为auto 会随着内容自动撑开

overflow

visible [默认值] 溢出部分可见

hidden: 溢出部分隐藏【常用】

scroll 显示滚动条（右、下）【不常用】

overflow-x

overflow-y

注意：先设置块级元素的尺寸，即宽度和高度 再设置overflow （宽度可以不设置，它默认的会继承父类的宽度）

六、绝对定位（absolute）

定位：

普通文档流（顺序）

浮动定位（主要用来布局）

普通定位和绝对定位的元素位置都是相对的，元素都在文档中占有确定的空间

绝对定位是一种比较特殊的定位方式 绝对定位的元素将不占用空间 不影响其他元素

调整位置的属性

left:10px（-10px）

top:10px（-10px）

上面的属性值默认是相对于body而言的，而有时候我们需要根据其他元素进行相对定位 这个时候就需要设置参考定位标签的属性 position:relative

定位的三种形式：

static 默认的定位方式

relative 相对定位 只是起一个参考的作用 并未从文档流中抽离出来

absolute 绝对定位 文档流中抽离出来

fixed 随着页面移动 固定定位【ie6不识别】 从文档流中抽离出来 总是处于固定的位置【页面中的广告，随着右侧滑动条的移动而移动】

七、层叠次序（z-index）

既可以正值也可以是负值，数值大的在上面

两种绝对定位的块级元素可以设置层叠次序

八、应用背景定位

背景合在一块：同类的图标或小图片（图片的格式一般存为png）

好处一：提高网页访问速度，图片多向服务器发出的请求越多

好处二：同类，方便管理

图片一般都使用png格式的图片，png图片格式清晰

九、光标样式

pointer：小手

help：帮助

move：移动

hand：小手

url()：使用自定义的图片作为光标 但是图片的格式需要是.ani \ .cur （ie8以下的版本才支持的)

dl dt dd是什么标签

三种提交按钮

<button>提交</button>

<input type='submit'/>

<input type='image' src=''/>

网站开发流程：

确定需求(客户调研)=>设计页面=>开发文档（流程和规范）前端开发（html/css/js）=>测试（兼容性）=>后台程序开发=>测试=>上线=>运营和维护