下面是小编为大家精心整理的CSS复习笔记 清除浮动的影响的方法文章,供大家阅读参考。
Day01
一.CSS2.0(Cascading Style Sheet)层叠样式表
1.作用：CSS用来修饰网页的(网页表现)
w3c规定尽量用css样式替代XHTML的属性
2.css的使用
a.内部样式(写在网页的头部)
b. 内联样式(写在网页标记中)
<标记名称style="css代码"/>
<标记名称style="css代码">...
c.外部样式
(1)type :链接页面的文档类型
(2)rel:当前文档和目标文档的关系
(3)href:css样式目标页面
(4)media:根据媒体类型使用不同的css样式
all所有|screen计算机屏幕|tv电视|print打印机
说明：内联样式优先级最高,如果内部样式和外部
样式冲突，后面的覆盖前面的样式
3.css的语法结构
选择器{属性:值;属性:值;...}
selector{attrbute:value}
4.选择器（selector）
(1)通配选择器==== *(自动应用所有标记)
(2)标记（类型）选择器==== 标记名称(自动应用指定标记)
(3)class类选择器=== .class名称
(手动应用任意标记中,一个标记中多个class名称用空格隔开)
应用:在标记中属性class="class名称"
(4)id选择器==== #id名称
(手动应用唯一标记中)
应用:在标记中属性id="id名称"
(5)群组选择器=== 选择器名称,选择器名称...
(多个选择器有相同属性的缩写)
(6)后代选择器=== 选择器名称选择器名称
(两个选择器至少是父子关系)
(7)子代选择器=== 选择器名称>选择器名称
(两个选择器必须是父子关系)
5.颜色值
a.单词字符：red红,green绿...
b.十六进制: #ff0000 ===#f00 红色
c.rgb()：rgb:分别是red,green,blue
0-255或百分比
例如:
红色: #f00 rgb(255,0,0) rgb(100%,0%,0%)
绿色：#0f0 rgb(0,255,0)
蓝色：#00f rgb(0,0,255)
黄色: #ff0 rgb(255,255,0)
白色: #fff rgb(255,255,255)
黑色: #000 rgb(0,0,0)
浅灰: #eee rgb(230,230,230)
深灰：#333 rgb(3,3,3)
6.文本样式1
(1)文本颜色color:颜色值
(2)文本大小font-size:value (单位：像素px,
em:网页默认字体大小的比例例如：1.5em默认字体的1.5倍)
(3)文本加粗font-weight:normal|bold|值(100-900)
(normal==400 bold==700)
(4)文本倾斜font-style:normal|italic
(5)文本字体font-family:宋体,微软雅黑,"Times New Roman"
(6) text-decoration:none|underline下划线|
overline上划线|line-through删除线
7.选择器优先级
标记选择器权值0001
class类选择器权值0010
id 选择器权值0100
内联样式权值1000
说明：选择器权值越大优先级有高，
样式显示选择器优先级高的
继承的样式优先级最低,
如果权值相同后面的覆盖前面的样式!important 的优先级最大
Day02
一.伪类选择器：
a.行为伪类
:link：链接未访问状态
:visited：链接已访问状态
:hover:设置鼠标悬停状态
:active:设置鼠标激活状态
说明: LVHA 顺序设置
工作：
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#f00;
text-decoration:underline;
}
:focus 设置获得光标效果
去掉文本框默认边框
:focus{
outline:none;
}
b.UI元素伪类
:checked：设置元素选择状态
:disabled:设置元素禁止状态
:enabled:设置元素启用状态
二.伪元素选择器
:before
:after
例如：
:before{
content:"内容"|url(图像URL);
}
三.布局样式中盒子属性：
1.width:宽度
2.height：高度
div标记：块元素，宽度是父级百分之百
span标记：行元素,宽度是元素的宽度
说明：行元素不能设置宽高，只能给块元素
设置宽高，及有宽高属性的元素设置img,input等3.padding:内边距（边框和内容的距离）
padding-top:value 上内边距
padding-right:value 右内边距
padding-bottom:value 下内边距
padding-left:value 左内边距
缩写：
padding:value 上下左右一个值
padding:value value 上下左右
padding:value value value
上左右下
padding:value value value value
上右下左
说明：padding 会撑大盒子，并且只有正值没负值
4. margin:外边距（元素边框的外围）
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
缩写：
margin:value 上下左右一个值
margin:value value 上下左右
margin:value value value
上左右下
margin:value value value value
上右下左
说明:
a.有正值，负值，auto
b.margin:0 auto;
实现盒子块元素的水平居中
c.将盒子中的空隙清除margin:0, padding:0
d.两个元素上下margin冲突取大值
左右冲突值相加
e.嵌套元素，子元素会将上下margin值
传递给父元素，如果父元素和子元素margin
冲突取大值
5. border (边框)
border-top-width:上边框宽度
border-top-sytle:上边框样式
(实线solid, 虚线dashed,
点线dotted,双线double) border-top-color:上边框颜色
border-right-width:右边框宽度
border-right-sytle:右边框样式
border-right-color:右边框颜色
border-bottom-width:下边框宽度
border-bottom-sytle:下边框样式
border-bottom-color:下边框颜色
border-left-width:左边框宽度
border-left-sytle:左边框样式
border-left-color:左边框颜色
缩写1
border-width:value 四个方向的宽度
border-width:value value 上下左右
border-width:value value value
上左右下
border-width:value value value value
上右下左
border-style:value 四个方向的样式
border-color:value 四个方向的颜色
缩写2
border:width style color
例如：
border:2px solid #f00;
6.盒子的总宽度计算
总宽度= 左外边距+左边框+左内边界+盒子width
+右内边界+右边框+右外边距
四.文本样式2
font:font-style 倾斜
|font-variant 小号的大写字母
|font-weight 加粗
|font-size 字大小
|line-height 行高
|font-family 字体
font-style:normal|italic
font-variant:normal|small-caps小号的大写字母
font-weight:normal|bold|值(100-900)
normal==400 bold==700
font-size:value (单位: px, em)
font-family:宋体,Arial,"Times New Roman";
line-height:value 行高
说明:元素的行高等于盒子的
高度，实现元素的垂直居中
text-align:left|center|right
元素的水平对齐
text-decoration:none|underline
|overline|line-through
text-transform:none
|capitalize首字母大写
|uppercase 大写字母
|lowercase 小写字母
text-indent: value (单位px em)首行缩进
说明：只能对块元素使用text-indent
五.浮动（Float）
float:left左浮动
|right右浮动
|none不浮动
说明:
1.元素浮动脱离文档流(不占位),无论是
左浮动还是右浮动靠在含边框的边界或浮动盒子
上才停止编辑
2.设置块元素浮动，宽度会缩到和内容一样宽度
3.设置行元素浮动，可以设置宽高
4.设置元素浮动对后面元素的影响是实现文字环绕
六.清除浮动
clear:both 清除两边浮动
|left 清除左浮动
|right 清除右浮动
说明：
高度塌陷：父元素中的子元素都浮动，
并且没有设置父元素的高度，
父元素高度为0
解决方法：
a. clear:both （父级中的子级盒子）
b.万能清除（给父级加样式）
.clear{
clear:both;
zoom:1;
}
.clear:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
七.布局显示
(1) display:none|
block 块
inline 行
inline-block 内联块
说明：inline-block 属于块元素，
能设置宽高，但是还具有行
元素不自动换行的功能
display:none 不显示，
脱离文档流（不占位）
(2) visibility：visble 默认值
| hidden 隐藏
说明：visibility:hidden 占文档流
(占位)
Day03
一.背景(background)
background-color:value 背影颜色
background-repeat:
repeat(重复默认值)
|repeat-x 水平重复
|repeat-y 垂直重复
|no-repeat 不重复
background-image:url(图片路径)
背影图片
background-attachment:scroll(滚动)
|fixed(固定)
background-position:
value(水平位置) value(垂直位置)
说明:
a.水平位置值:left center right
垂直位置值：top center bottom
b.当background-position有一个值
代表水平方向，垂直方向默认垂直居中
例如:
background-position:right;//center
水平居右垂直居中
c. background-position: 数值数值
如果是正值背景图片往右，负值往左
缩写：
background:color image repeat attachment position;
二. 图片精灵(图片整合) css sprites
1.原理：将多张小背景图片整合到一张大图中
2.作用：减少服务器请求，客户端显示每张图片
都要向服务器请求，为了减少服务器请求
将图片整合
三.无序，有序列表
list-style-type:disc :
circle : CSS1 空心圆
|square : CSS1 实心方块
|decimal : CSS1 阿拉伯数字
|lower-roman : CSS1 小写罗马数字
|upper-roman : CSS1 大写罗马数字
|lower-alpha : CSS1 小写英文字母
|upper-alpha : CSS1 大写英文字母
|none : CSS1 不使用项目符号
list-style-image:none|url(图片路径)
list-style-position:outside|inside
缩写
list-style:type image position
例如：
list-style:none;(重要)
list-style:url(1.jpg) inside;
工作中：
background:url(images/dot.gif) no-repeat 0px -96px;
padding-left:12px;
Day04
布局：
文档流布局
浮动布局
定位布局
一.定位(Position)
(1)属性值
a. static(默认值):标准文档流
b. fixed(固定定位):脱离文档流(不占位)，
通过top,left,right
,bottom属性定位置
c. absolute(绝对定位)：脱离文档流(不占位)，
通过top,left,right
,bottom属性定位置
说明：默认情况坐标在浏览器的左上角，
通过左上角移动位置
d. relative(相对定位)：通过自身文档流定位（位置保留），
通过top,left,right
,bottom属性定位置
说明:默认情况坐标在自身盒子的左上角
工作中：
给父元素或祖先加相对定位(relative),
实现坐标定位到自身盒子的左上角,
然后给子元素加绝对定位(absolute),
最后对子元素通过top,left,right
,bottom实现移动效果
(2) z-index (实现层排序)
说明：z-index属性只能有fixed,absolute
relative 属性值时使用
可以是正值，负值；默认值是0
值越大定位层越在上面
二.透明度属性
(1) opacity:0~1;
(支持的浏览器：chrome谷歌，firefox火狐，
safari苹果浏览器,opera欧朋)
说明：透明度属性值0 代表完全透明
1 代表不透明
(2) filter:alpha(opacity=1~100)
(支持的浏览器:IE)
Day05
一.定位(Position)
（1）属性值
static：默认值（标准文档流）
fixed(固定定位):脱离文档流(不占位),通过top,left
,right,bottom属性移动
absolute(绝对定位):脱离文档流(不占位),通过top,left
,right,bottom属性移动
说明:默认坐标在浏览器的左上角，通过左上角坐标来移动
fixed 有滚动条时与absolute有区别
relative(相对定位):根据自身文档流定位(保留位置)
说明：默认坐标自身盒子的左上角
工作中:
首先给父元素或祖先一个相对定位，实现默认坐标在自身
盒子的左上角，然后再子元素绝对定位（在自身盒子的基
础上移动），子元素通过top,left,right,bottom属性移动
二.透明度
(1) opacity:0~1
说明: chrome(谷歌)，firefox(火狐)
safari (苹果浏览器),opera（欧朋）
(2)：filter:alpha(opacity=1~100)
说明：IE支持
三.Hack技术(针对不同浏览器兼容问题解决方法)
(1)条件注释表示法
(2)属性前缀表示法
* 只有IE6.0 和IE7.0 例如: *background
_ 只有IE6.0 例如_background
(3)选择器前缀表示法
*html标记{...} 只有ie6支持
*+html标记{...} 只有ie7支持
四.
overflow属性：
overflow:visible 默认值|
auto |
hidden |
scroll
auto :在必需时对象内容才会被裁切或显示滚动条
hidden:不显示超过对象尺寸的内容
scroll :总是显示滚动条
总结:
1.css样式链接方法（内部链接，外部链接，内联样式）
2.选择器(
通配符选择器
标记选择器
class类型选择器
id 选择器
群组选择器
后代选择器
子代选择器
)
3.伪类选择器
4.盒子属性（width,height,padding,margin,border,background）
5.全局样式
6.布局中浮动
7.布局定位
8.hack 兼容
推荐访问:清除浮动的影响的方法 复习 标签 笔记
