css
盒子的深入
注意:里面所有的值加到一起一定不能大于父盒子的内容区的宽度width的值
总的宽度=内容区的宽度width+border(左、右)+padding（左、右）+margin(左右)
定位
position:fixed 固定定位
QQ咨询栏、扫网页的二维码等
position:relative 相对定位
position: absolute 绝对定位
商品活动等页面：比如限时抢（“父相子绝”）
列表的属性
去掉列表前面的项目符号: list-style:none;
用小图代替列表前面的符号: list-style-image:url(图片的地址)
合并表格边框线
合并表格的边框线 border-collapse:collapse;
边框线的属性
上边框:
border-top-color:颜色值;上边框的颜色
border-top-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
border-top-粗细；例如border-top-2px;
简写为border-top:粗细 线型 颜色;
右边框:
border-right-color:颜色值;上边框的颜色
border-right-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
border-right-粗细；例如border-right-2px;
简写为border-right:粗细 线型 颜色;
下边框:
border-bottom -color: 颜色值;上边框的颜色
border-bottom-style: 线型;线型有 solid 实线 dashed 虚线 dotted 点状线
border-bottom- 粗细；例如border-bottom-2px;
简写为border-bottom: 粗细 线型 颜色;
左边框
border-left-color:颜色值;上边框的颜色
border- left -style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
border- left -粗细；例如border- left -2px;
简写为border- left:粗细 线型 颜色;
简写： border:粗细 线型 颜色；
注意: 上右下左四条边框的样式一样
内边距的写法
内边距属性:
padding-top：数值；内容和上边框之间的距离
padding-right：数值；内容和右边框之间的距离
padding-bottom：数值；内容和下边框之间的距离
padding-left：数值；内容和左边框之间的距离
简写:
padding：10px 20px 30px 40px; 上右下左
padding:10px 20px 30px; 上10px 左右 20px 下 30px
padding:10px 30px; 上下10px 左右 30px
padding:10px; 上右下左都是10px
外边距
外边距:
margin-top:数值；上边框往外的距离
margin-right:数值；右边框往外的距离
margin-bottom:数值；下边框往外的距离
margin-left:数值；左边框往外的距离
简写:
margin:10px 20px 30px 40px; 上边框以外的10px 右是20px 下30px 左40px
margin:10px 20px 30px; 上边框以外的10px 左右是20px 下是30px
margin:10px 20px; 上下为10px 左右为20px
margin:10px; 上右下左都是10px
浮动
浮动属性:
float:left; float:right
浮动的特点:
设置浮动的元素，不占空间
设置浮动的元素层级高于普通元素
不管是什么元素，设置浮动之后一定是块元素
如果在一行中的元素想横向排列，都设置浮动就可以
三个块元素排列的思想:
float:left float:left float:left
float:left float:left float:right
清除浮动
属性：clear: both;
清除浮动的作用：
1、清除浮动后，浮动元素之后的其它元素，不再继承浮动的特性，将恢复原始的默认排版方式。
2、清除浮动特性后，包围元素 “从视觉上”包住了浮动元素。
背景属性
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片是否平铺
取值：no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺
repeat横向和纵向都平铺 （默认）
background-attachment:背景附件，背景是否随着上方的内容一起滚动
取值 ：fixed 背景固定 scroll 滚动
background-position:背景图片的展开方式
例如：background-position: 水平 left center right
垂直 top center bottom
background: 背景颜色 背景图片 背景图片是否平铺 水平 垂直；
文本属性
font-size 文本的大小
font-weight 文本是否加粗 属性值：bold加粗 // normal 正常,不加粗
font-style 文本是否倾斜 属性值：italic ;倾斜 // normal 正常,不倾斜
font-family 文字的字体 属性值：字体（默认是宋体）
text-align 文本的对齐方式 属性值：left 左对齐//center居中对齐// right 右对齐
text-indent 文本首行缩进
text-decoration 文本装饰线
①underline 下划线
②overline 上划线
③line-through 删除线
④none 没有线
text-transform 文本转大小写（扩展）
①capitalize单词首字母转大写
②uppercase全大写
③lowercase全小写
color 文本的颜色
letter-spacing 字母和字母之间的距离
word-spacing 单词和单词之间的距离
选择器的分类
基本选择器
标签选择器（选择器的名称是"标签名"）
语法：标签选择器名{ 属性:属性值; }
例如: p{font-size: 12px;}
类选择器（选择器的名称是“. 类名"）
定义: <标签 class=”选择器名”> </标签>
例如: <span class="myclass"></span>
使用: .myclass{ font-size: 12px; }
Id选择器（选择器的名称是“#类名"）
定义: <标签 id="id选择器名称"></标签>
例如: <span id="myclass"></span>
使用: #id选择器名 { font-size: 12px; }
注意: 引用的方法，每一个标签都有id属性
通用选择器（选择器的名称是“*"）
（*所有）给所有的标签加样式
*{属性:属性值; }
注意: Ie6版本不支持
复合选择器
多元素选择器( ， )
语法: 选择器,选择器,选择器 {共有的属性：属性值; }
例如: p,a,div { font-size: 12px;}
注意: 多个标签用逗号(,)链接
后代元素选择器( 空格 )
语法: 选择器1 选择器2 选择器3 {属性:属性值; }
例如: div p a {font-size: 12px;}
注意: 多个标签用空格链接
子元素选择器（ > ）
语法:选择器>选择器{属性:属性值; }
例如: .news>h3{color:blue; }
给第一层的子元素加，用大于号>链接
伪类选择器（匹配的是超链接的四种状态）
伪类:
a:link: 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动链接上
a:active 单击鼠标左键的那一时刻的样式
引入css样式
行内样式表
行内样式，是写在标签的style属性值中
格式：<标签 style=”属性名:属性值;”> 内容 </标签>
例如: <p style=“font-size:12px;color:green;”></p>
内嵌样式表（ 常用）：
内嵌样式，写在头部head标签中,用一对<style>标记引入
格式:
<style type=”text/css”>
选择器{属性名:属性值; }
</style>
外部样式表（ 常用）：
<link rel=”stylesheet” type="text/css" href=”外部样式表文件 xx.css” />
导入样式
@import url(另外一个css样式)
页面布局思想
①分析结构，用div画出骨架，划分好区域， 然后填充内容
②清除所有标记原有的margin和padding
比如：body,div,table,tr,td,h1,h2,h3,h4,h5,h6….{margin:0 ; padding : 0;}
③设置全局属性：
在body{ } 中： 设置背景颜色/背景图片 网页整体字体大小、字体颜色 字体类别、行间距
全局的超链接的全局样式
列表去除项目符号：ul,li,ol{list-style:none;}
图片去边框 img{border:none;}
等
举例
body,ul,li,ol,dl,dt,dd,p,img,a,h1,h2,h3,h4,h5,h6……{
margin:0px;
padding:0px;
}
body{
background-color:#ccc;
font-size:12px;
color:#444;
line-height:180%;
}
ul,li{list-style:none;}
img{border:none;}
.clear{clear:both;}
a:link,a:visited{……}
a:hover,a:active{…….}
行内元素和块元素转换
行转块：display:block;
块转行: display:inline;
控制内容溢出隐藏
处理溢出的属性：overflow
①overflow : hidden 隐藏溢出的内容（用的较多）
②overflow : scroll 始终显示滚动条
③overflow : auto 系统自动判
④overflow : visible 默认(即使内容超出也可以显示)
继承和优先级
继承性
外层元素的样式，会被里面的元素所继承。
可以继承的CSS属性有哪些？
字体、文本样式的属性：
font-size,font-family,font-weight,font-style,font,
text-align,text-decoration,text-indent,text-transform,
color,letter-spacing,word-spacing,line-height
列表样式的属性:
list-style,list-image,list-style-type,list-style-position
优先级
单个选择器的优先级
标签选择器 <类选择器 < id选择器 <行内样式表
复合选择器优先级
写的越精确，优先级越高。